javascript_javascriptスキルでの緩和効果実装プログラム-jsチュートリアル-php.cn

javascript_javascriptスキルでの緩和効果実装プログラム

WBOY

リリース： 2016-05-16 17:44:54

オリジナル

1032 人が閲覧しました

アニメーションには 4 つの一般的なタイプがあります。それらを紹介します。
リニア: リニアアニメーション、つまり一定速度
easeIn: 小さいものから大きいものへの速度、つまりフェードイン
easeOut: 速度大から小へ、つまりフェードアウト
easeInOut: 最初は小から大へ、最後は大から小へ、つまりフェードイン、フェードアウト

実際、緩和に関して言えば、N 倍緩和公式を発明した Robert Penner について言及する必要があります。たとえば、

説明しましょう:

現在の変化量が X であるとすると、

t / d = X / c、つまり X = c * t / d になります。少し複雑なものを見てみましょう:

これにはフェードイン効果があり、アニメーションが開始されると値が小さい値から大きい値に変化します。 この 2 つの違いは t / d と (t /= d) * t だけであることがわかります。t / d は、一時的に名付けられた >=0 &&
なぜ二乗するのでしょうか?

1. まず、a >= Math.pow(a, 2) は確実です。2. 関数が呼び出されるたびに、t / d の比も大きくなります。一定の速度で、たとえば、最初の呼び出しは 0.1 (平方 0.01)、2 番目の呼び出しは 0.2 (平方 0.04) などです。このとき、10 番目の呼び出しは 1 でなければなりません。この時点で c * 1 b、アニメーションは終了します。ここで終了
3. ポイント 2 は、比率が小さいほど値の変化が小さく、比率が大きいほど値の変化が大きくなることが証明されています。正方形を使用せずに 3 乗すると、フェードイン効果が得られます。より明白になります。
スタイル、構造、パブリック関数は次のとおりです。

コードをコピー

コードは次のとおりです。

まず、開始位置、終了位置、ステップサイズを設定するたびに、終了条件になるまで固定値を増やします

コードをコピーします

コードは次のとおりです:var timer = null ; var begin = 0, end = 400 、ステップ = 5;

varrag = $("drag");

 function run() {
 if((iLeft = parseInt(getStyle(rag,"left"))) < end) {
 rag.style.left = iLeft step "px" 🎜> } 
 var timer = setInterval(run, 20);

上記方法は一定速度であり、各移動の距離は固定されています。別の実装方法を見てみましょう: 

コードをコピー

コードは次のとおりです:

 
 var timer = null;
 var begin = 0, end = 400;
 varrag = $("drag");
 function run() {
 if(( iLeft = parseInt(getStyle(drag,"left"))) < end){
 var step = Math.ceil((400 - iLeft)/7);
rag.style.left = iLeft step " px";
 >



上記のメソッドは、現在位置とターゲットの間の距離に基づいて変位のステップ長を計算します。
 イージングを特別に処理するトゥイーン クラスが JavaScript に変換されます。

コードをコピー

コードは次のとおりです:

var Tween = {
 Linear: function(t,b,c,d){ return c*t/d b; },
 Quad: {
 easeIn: function(t,b,c,d){
 return c*(t/=d)*t b;
 },
 easeOut: function (t,b,c,d){
 return -c *(t/=d)*(t-2) b;
 },
 easyInOut: function(t,b,c,d ){
 if ((t/=d/2)  return -c/2 * ((--t)*(t-2) - 1) b;
 }
 },
 Cubic: {
 easeIn: function(t,b,c,d){
 return c*(t/=d)*t* t b;
 },
 easyOut: function(t,b,c,d){
 return c*((t=t/d-1)*t*t 1) b;
 },
 easyInOut: function(t,b,c,d){
 if ((t/=d/2)  return c/2*((t-=2)*t*t 2) b;
 }
 },
 Quart: {
 easeIn: function(t,b,c,d){ 
 return c*(t/=d)*t*t*t b;
 },
 easyOut: function(t,b,c,d){
 return -c * ((t =t/d-1)*t*t*t - 1) b;
 },
 easyInOut: function(t,b,c,d){
 if ((t/=d/ 2)  return -c/2 * ((t-=2)*t*t*t - 2) b;
 } 
 },
 Quint: {
 easyIn: function(t,b,c,d){
 return c*(t/=d)*t*t*t*t b;
 },
 easeOut: function(t,b,c,d){
 return c*((t=t/d-1)*t*t*t*t 1) b;
 },
 easyInOut: function(t,b,c,d){
 if ((t/=d/2) < 1) return c/2*t*t*t*t*t b;
 return c/2*((t-=2)*t*t*t*t 2) b;
 }
 },
 Sine: {
 easeIn:function(t,b,c,d){
 return -c * Math.cos(t/d * (Math.PI/2)) c b; 
 },
 easyOut: function(t,b,c,d){
 return c * Math.sin(t/d * (Math.PI/2)) b;
 }, 
 easeInOut: function(t,b,c,d){
 return -c/2 * (Math.cos(Math.PI*t/d) - 1) b;
 }
 },
 Expo: {
 easeIn:function(t,b,c,d){
 return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) b;
 },
 easeOut: function(t,b,c,d){
 return (t= =d)? b c : c * (-Math.pow(2, -10 * t/d) 1) b;
 },
 easeInOut: function(t,b,c,d){
 if (t ==0) return b;
 if (t==d) return b c;
 if ((t/=d/2)  return c/2 * (-Math.pow(2, -10 * --t) 2) b;
 }
 },
 Circ: { 
 easyIn: function(t,b,c,d){
 return -c * (Math.sqrt(1 - (t/=d)*t) - 1) b;
 },
 easeOut: function(t,b,c,d){
 return c * Math.sqrt(1 - (t=t/d-1)*t) b;
 },
 easeInOut : function(t,b,c,d){
 if ((t/=d/2)  return c/2 * (Math.sqrt(1 - (t-=2)*t) 1) b;
 }
 },
 Elastic: {
 easyIn: function (t,b,c,d,a,p){
 if (t==0) return b;  if ((t/=d)==1) return b c;  if (!p) p=d*.3;
 if (!a || 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;
 },
 easeOut: function(t,b,c,d,a,p){
 if (t==0) b を返します。  if ((t/=d)==1) return b c;  if (!p) p=d*.3;
 if (!a || 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) * Math.sin( (t*d-s)*(2*Math.PI)/p ) c b);
 },
 easeInOut: function(t,b,c,d,a,p){
 if (t ==0) b を返します。  if ((t/=d/2)==2) return b c;  if (!p) p=d*(.3*1.5);
 if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
 else var s = p/(2*Math.PI) * Math.asin (c/a);
 if (t  return a*Math.pow(2,-10*( t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 c b;
 }
 },
 戻る: {
 easeIn: function(t,b,c,d,s){
 if (s == unknown) s = 1.70158;
 return c*(t/=d)*t*((s 1)* t - s) b;
 },
 easyOut: function(t,b,c,d,s){
 if (s == 未定義) s = 1.70158;
 return c*( (t=t/d-1)*t*((s 1)*t s) 1) b;
 },
 easeInOut: function(t,b,c,d,s){
 if (s == 未定義) s = 1.70158;
 if ((t/=d/2)  return c/2*((t-=2)*t*(((s*=(1.525)) 1)*t s) 2) b;
 }
 },
 バウンス: {
easeIn: function(t,b,c,d){
 return c - Tween.Bounce.easeOut(d-t, 0, c, d) b;
 }, 
 easyOut: function(t,b,c,d){
 if ((t/=d)  return c*(7.5625*t*t) b ;
 } else if (t  return c*(7.5625*(t-=(1.5/2.75))*t .75) b;
 } else if (t  return c*(7.5625*(t-=(2.25/2.75))*t .9375) b;
 } else {
 return c*( 7.5625*(t-=(2.625/2.75))*t .984375) b;
 }
 },
easeInOut: function(t,b,c,d){
 if (t < d/2) return Tween.Bounce.easeIn(t*2, 0, c, d) * .5 b;
 else return Tween.Bounce.easeOut(t*2-d, 0, c, d) ) * .5 c*.5 b;
 }
 }
} 

各イージング方法は 3 種類に対応
easeIn: 0 から開始加速のイージング;
easeOut: 0 への減速のイージング;
easeInOut: 前半で 0 から加速し、後半で 0 への減速のイージング
パラメータの説明:
t: 現在の時間
b：初期値
c：変更量
d：継続時間
呼び出し方法：

コードをコピーコードは次のとおりです:

 
 var timer = null;
 var b=0 ,c=400,d=100,t=0;
 varrag = $("drag");
 function run() {
rag.style.left = Math.ceil( Tween.Circ .easeInOut(t,b,c,d)) "px";
 if(t t ;
 }else{
 clearInterval(timer);
 }
 }
var timer = setInterval(run, 20); 