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

アニメーションには 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);

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。