緩和機能とは何ですか？
https://stackoverflow.com/questions/8316882
-
25-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
アニメーションのコンテキストで機能を緩和することを意味します。 Dojo、JQuery、Silverlight、Flex、およびその他のUIシステムには、緩和機能の概念があるようです。緩和機能の良い説明を見つけることができませんでしたか？誰もが機能を緩和するという概念を説明したり、それらの良い説明を指摘することもできますか？私はフレームワークの特定の詳細ではない概念に興味がありますか？
緩和は場所に厳密に使用されていますか、それとも一般的であり、オブジェクトの任意のプロパティに適用できますか？
解決
通常、緩和関数は、完全性の割合が与えられたプロパティの値を記述する関数です。異なるフレームワークはわずかに異なるバリエーションを使用しますが、アイデアを得るとコンセプトは簡単に把握できますが、おそらくいくつかの例を見るのが最善です。
まず、すべての緩和機能が順守するインターフェイスを見てみましょう。
私たちの緩和機能は、いくつかの議論を取ります。
- パーセントcomplete：（
0.0に1.0). - ELASPEDTIME：アニメーションが実行されているミリ秒数
- StartValue：から始まる値（または完了したパーセントが0％の場合の値）
- EndValue：で終了する値（または完了率が100％の場合の値）
- 合計：ミリ秒単位でのアニメーションの総希望の長さ
プロパティを設定する値を表す数字を返します。
注：これは、jQueryが緩和機能に使用するのと同じ署名です。
最も簡単に理解するのは、線形の使いやすさです。
var linear = function(percent,elapsed,start,end,total) {
return start+(end-start)*percent;
}
そして今、これを使用するために：
1000ミリ秒間に進むアニメーションがあり、0から始まり50で終了することになっているアニメーションがあったとしましょう。
linear(0, 0, 0,50, 1000) // 0
linear(0.25, 250, 0, 50, 1000) // 12.5
linear(0.5, 500, 0, 50, 1000) // 25
linear(0.75, 750, 0, 50, 1000) // 37.5
linear(1.0, 1000, 0, 50, 1000) // 50
これは非常に単純な（しゃれは意図されていない）トゥイーンです。これは単純な線形補間です。値と時間をグラフ化する場合、それは直線になります：
もう少し複雑な緩和機能、2次容易さを見てみましょう。
var easeInQuad = function (x, t, b, c, d) {
return c*(t/=d)*t + b;
}
以前と同じ入力を使用して、同じ結果を見てみましょう。
easeInQuad(0, 0, 0, 50, 1000) // 0
easeInQuad(0.25, 250, 0, 50, 1000) // 3.125
easeInQuad(0.5, 500, 0, 50, 1000) // 12.5
easeInQuad(0.75, 750, 0, 50, 1000) // 28.125
easeInQuad(1, 1000, 0, 50, 1000) // 50
値は、線形の使いやすさとは大きく異なることに注意してください。それは非常にゆっくりと始まり、その終わりのポイントに加速します。アニメーションの50％が完了したとき、それは12.5の値にしか到達しませんでした。これは、実際の距離の4分の1です。 start と end 指定した値。
この関数をグラフ化する場合、それは次のようになります：
次に、基本的な簡単なことを見てみましょう。
var easeOutQuad = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
};
これは本質的に、使いやすさの「反対の」加速曲線を行います。それは速く始まり、その終わりの値に減速します。
そして、内外の両方を容易にする機能があります。
var easeInOutQuad = function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
};
この機能はゆっくりと開始され、ゆっくりと終了し、中央の最大速度に達します。
使用できる緩和/補間の束があります：線形、四分状、立方体、Quart、Quint、Sine。また、バウンスや弾性などの特殊な緩和機能があります。
たとえば、弾力性のある容易さ：
var easeInElastic = function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
おそらく、他の誰かが補間の背後にある実際の数学の部分を説明できるでしょう。正直なところ、私は数学のウィズではないからです。しかし、それは緩和機能自体の基本原則です。
Tween/Animationを開始すると、アニメーションエンジンは必要なスタート値と終了値を覚えています。その後、更新するたびに、時間が経過した時間から数字が出ます。供給された緩和関数を値と呼び、プロパティを設定する値を把握するために。すべての緩和関数が同じ署名を実装する限り、それらは簡単に交換することができ、コアアニメーションエンジンは違いを知る必要はありません。 （これは懸念の優れた分離をもたらします）。
あなたは私が話すことを避けたことに気付くでしょう x と y 緩和は位置に特に関係していないため、明示的に位置 それ自体. 。緩和関数は、開始値と終了値の間の遷移を定義するだけです。それらはそうかもしれません x 座標、または色、またはオブジェクトの透明度。
そして実際、理論的には、異なる緩和機能を適用して、異なる特性について補間することができます。うまくいけば、これが基本的なアイデアに光を当てるのに役立つことを願っています。
そして、これが本当にです クールな例 （それはわずかに異なる署名を使用しますが、同じ原則です）。
編集
少しです jsfiddle JavaScriptの基本的な使用法のいくつかを示すために一緒に投げました。に注意してください top プロパティはバウンスを使用してトゥイーンになります left プロパティはクワッドを使用してトゥイーンになります。スライダーを使用して、レンダリングループをシミュレートします。
ですべての機能があるため easing オブジェクトには同じ署名があり、それらのいずれかを互いに交換できます。現在、これらのほとんどはすべてハードコーディングされています（開始値と終了値、使用されているトゥイーン関数、アニメーションの長さなど）が、アニメーションヘルパーの実際の例では、渡したいと思うでしょう。次のプロパティで：
- 変更されるプロパティ
- 開始値（または残っている場合
undefined次に、現在の値を使用します） - 最終値
- アニメーションの長さ
- 使用するTweening関数への参照。
アニメーションエンジンは、アニメーションの期間中、これらの設定を追跡し、更新サイクルごとに、Tweening引数を使用してプロパティの新しい値を計算します。
他のヒント
緩和関数は、アニメーションの速度を制御して望ましい効果（バウンス、ズームイン、遅いなど）を与えるアルゴリズムです。
何をチェックしてください MSDNはそれらについて言わなければなりません もう少し詳細に。
受け入れられた答えがあるにもかかわらず、この古い質問に対する答えを投稿したいと思います。 32bitkid 必要な説明をしました。私が追加するのは、私がそれを見つけられなかったので、基本的な実用的な実装です（私も投稿しました 質問 それについて）。
たとえば、この単純な線形アニメーションを取ります。コードは自明であるため、説明が必要だとは思いません。時間の経過とともに変化しない一定の増分値を計算し、各反復でボックスの位置を増やします。位置変数を直接変更し、ボックスに適用しています。
var box = document.getElementById("box");
var fps = 60;
var duration = 2; // seconds
var iterations = fps * duration; // 120 frames
var startPosition = 0; // left end of the screen
var endPosition = window.innerWidth - box.clientWidth; // right end of the screen
var distance = endPosition - startPosition; // total distance
var posIncrement = distance / iterations; // change per frame
var position = startPosition; // current position
function move() {
position += posIncrement; // increase position
if (position >= endPosition) { // check if reached endPosition
clearInterval(handler); // if so, stop interval
box.style.left = endPosition + "px"; // jump to endPosition
return; // exit function
}
box.style.left = position + "px"; // move to the new position
}
var handler = setInterval(move, 1000/fps); // run move() every 16~ millisecondbody {
background: gainsboro;
}
#box {
width: 100px;
height: 100px;
background: white;
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
position: absolute;
left: 0;
}<div id="box"></div>それでは、緩和を追加しましょう。使用することから簡単に始めます linear （なし）。上記のアニメーションと同じアニメーションが発生しますが、アプローチは異なります。今回は、位置変数を直接変更することはありません。変更するのは時間です。
function linear(time, begin, change, duration) {
return change * (time / duration) + start;
}
まず、パラメーターについて話しましょう。
time: ：経過時間begin: ：プロパティの初期値（幅、左、マージン、不透明度など）change: ：変位、（終了値 - 開始値）duration: ：アニメーションがかかる合計時間
time と duration 直接関連しています。 2秒のアニメーションがある場合、増加します time そして、それを緩和関数に渡します linear. 。関数は、指定された時間にボックスがその位置にあることを示す位置を返します。
2秒で箱を0から100に移動しているとしましょう。ボックスの位置を取得したい場合は、700ミリ秒で、 linear 次の方法で機能します。
linear(0.7, 0, 100, 2);
それが戻ってきます 35. 。アニメーションが開始されてから700ミリ秒後、ボックスの位置は35pxになります。これを実際に見てみましょう。
var box = document.getElementById("box");
var fps = 60;
var duration = 2; // seconds
var iterations = fps * duration; // 120 frames
var startPosition = 0; // left end of the screen
var endPosition = window.innerWidth - box.clientWidth; // right end of the screen
var distance = endPosition - startPosition; // total distance
var timeIncrement = duration / iterations;
var position = 0;
var time = 0;
function move() {
time += timeIncrement;
position = linear(time, startPosition, distance, duration);
if (position >= endPosition) {
clearInterval(handler);
box.style.left = endPosition + "px";
return;
}
box.style.left = position + "px";
}
var handler = setInterval(move, 1000/fps);
function linear(time, begin, change, duration) {
return change * (time / duration) + begin;
}body {
background: gainsboro;
}
#box {
width: 100px;
height: 100px;
background: white;
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
position: absolute;
left: 0;
}<div id="box"></div>このコードで注意を必要とするパースは次のとおりです。
var timeIncrement = duration / iterations;
var time = 0;
function move() {
time += timeIncrement;
position = linear(time, startPosition, distance, duration);
// ...
最初のアニメーションでは、位置変数を直接変更しました。一定の位置増分値が必要でした。計算する方法です posIncrement = distance / iterations. 。緩和すると、位置変数を変更するのではなく、時間変数を変更します。したがって、時間増分値が必要です。ポジション増分を行ったのと同じ方法で計算しますが、今回だけ分割します duration に iterations. 。時間の増加とともに時間を増やし、機能を緩和するために時間を渡し、機能を緩和することで、ボックスが占める次の位置を返します。
total distance / iterations (frames) = position change per frame
total duration / iterations (frames) = time change per frame
これが目のグラフです。
そして最後に、Easeinoutquadの例。
var box = document.getElementById("box");
var fps = 60;
var duration = 2; // seconds
var iterations = fps * duration; // 120 frames
var startPosition = 0; // left end of the screen
var endPosition = window.innerWidth - box.clientWidth; // right end of the screen
var distance = endPosition - startPosition; // total distance
var timeIncrement = duration / iterations;
var time = 0;
var position = 0;
function move() {
time += timeIncrement;
position = easeInOutQuad(time, startPosition, distance, duration);
if (position >= endPosition) {
clearInterval(handler);
box.style.left = endPosition + "px";
return;
}
box.style.left = position + "px";
}
var handler = setInterval(move, 1000 / fps);
function easeInOutQuad(t, b, c, d) {
if ((t /= d / 2) < 1) {
return c / 2 * t * t + b;
} else {
return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
}body {
background: gainsboro;
}
#box {
width: 100px;
height: 100px;
background: white;
box-shadow: 1px 1px 1px rgba(0,0,0,.2);
position: absolute;
left: 0;
}<div id="box"></div>これは、ある状態から別の状態へのプロパティ（サイズ、形状、場所）の移行です。
Jquery UIが提供する緩和関数を説明するきちんとした小さなグラフをいくつか紹介します。
実生活ではコンピューターのように機能しないと考えています。あなたがあなたのガールフレンドがすぐにあなたを愛してくれるふりをすることができないように、すぐにオフに、そしてすぐにオフからオフに切り替えないでください。したがって、科学者とコンピューターの人々（あなたのガールフレンドについて何も知らない）は、緩和機能を発明しました。すぐにはないアニメーションのようなものを適用または切り替えるようなものです。したがって、長方形を左から右に移動すると、ロボットのように動いていません。「開始し、一定の速度で移動し、すぐに停止します」が、「開始し、速度を絶えず覆い、速度が絶えず減少し、最終的に停止します」。したがって、緩和は、いくつかのアニメーション、関数、オブジェクトまたはものを実生活ではように振る舞わせるようなものです。すべての使いやすさは動作を定義するため、「弾力性」、「バウンス」の効果などがあります。
