JavaScript アニメーション オブジェクトは、加速、減速、イーズイン、イーズアウトの実装をサポートしています code_javascript スキル

呼び出しインターフェイス:

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

/**
* @param elem {HTMLElement} アニメーションを実行する HTML 要素
* @param params {JSON} アニメーション実行中に変更する必要がある HTML 属性
* @param duration {Number} オプション、アニメーション実行時間、ミリ秒単位
* @param easing {String} オプション、アニメーション実行メソッド、ease ineaseIn、ease outeaseOut
* @param callback {Function} オプション、アニメーション実行完了時のコールバック関数
* @戻る
*/
effect.animate(elem, params,duration, easing, callback);

これを使用すると、プロダクトの減速フェードアウトと加速フェードインの切り替えエフェクトを作成できます。 デモ効果を見るにはここをクリックしてください

コードをコピーします コードは次のとおりです。以下のように:

//補助オブジェクト、読み取り/書き込み DOM 要素属性
var 属性 = {
get: function(elem, attr){
var val; >if(elem.currentStyle){
if(attr == = "不透明度") {
val = elem.filters.alpha[attr];
}else {
val = elem.currentStyle [attr];
}
}
else {
val = getComputedStyle(elem)[attr];
if(attr === "opacity") {
val = 100 * val;
}
}
return val ;
},
set: function(elem, attr, val){
if(attr=='opacity'){
elem.style.filter = 'alpha(opacity=' (val ) ')';
elem.style.opacity = (val)/100;
else{
elem. style[attr] = val 'px';
}
}
};
/*
* 説明: トゥイーン アニメーション アルゴリズム。
* @param 数値 t: アニメーションが実行された時間 (実際に実行された回数/フレーム)
* @param 数値 b: 開始位置
* @param 数値 c: 終了位置
* @param 数値d: 開始位置から終了位置までの経過時間(実際に実行される回数/フレーム数)
*/
var tween = {
//イーズイン
easeIn: function (t, b, c, d){
return c * (t/=d) * t b;
},
//ease out
easeOut: function (t, b ,c,d){
return -c * (t/=d) * (t-2) b
}
}; アニメーション オブジェクト
var 効果 = {
animate: function(elem, params,duration, easing, callback){
var dt = new Date().getTime(),
b = 0,
c = 0,
d = 期間 500、
fps = 1000/60;
for(var attr in params){
b = parseFloat(attribute.get(elem, attr ));
c = params[attr] - b;
changes.push({
attr: b,
c: c
});
}
イージング = イージング || "easeOut";
callback = callback ||
setTimeout(function(){
var t = new Date().getTime() - dt;
var b, c, attr;
for(var i=0; ib = 変更[i].b; [ i].c;
attr = 変更[i].attr;
attribute.set(elem, attr, tween[easing](t, b, c, d)); < ;= t){
attribute.set(elem, attr, params[attr]);
return;
}
setTimeout(arguments.呼び出し先 , fps);
}
}; byrentj1@163.com