js的学习经验_简单动画库包tween.js
函数(){
无功myeffect = { {
线性函数(t,b,c,d){
返回
},
四:慢两次(t 2);
酪蛋白:功能(T,B,C,D){
返回C *(t = );
},
easeout:功能(T,B,C,D){
返回C *(T / = D)*(T-2)+ B;
},
easeinout:功能(T,B,C,D){
如果((1)< 2)返回2;
返回C / 2 *((t)×(T-2)- 1)+ B;
}
},
立方:{三次慢(t 3)
酪蛋白:功能(T,B,C,D){
返回C *(t = );
},
easeout:功能(T,B,C,D){
返回C *((T = T / D-1)* T * T + 1)+ B;
},
easeinout:功能(T,B,C,D){
如果(({ d = 2)< 1)返回C 2;
返回C 2 *((t = 2)* T + T + 2)+ b;
}
},
夸脱:四次慢(t 4);
酪蛋白:功能(T,B,C,D){
返回C *(t = );
},
easeout:功能(T,B,C,D){
返回C *((T = T / D-1)* T * T * T - 1)+ B;
},
easeinout:功能(T,B,C,D){
如果(({ d = 2)< 1)返回C 2;
返回2(* = 2)* T * T - T 2)b;
}
},
Quint的慢动作:{ / / 5(T ^ 5);
酪蛋白:功能(T,B,C,D){
返回C *(t = );
},
easeout:功能(T,B,C,D){
返回C *((T = T / D-1)* T * T * T * T + 1)+ B;
},
easeinout:功能(T,B,C,D){
如果(({ d = 2)< 1)返回C 2;
返回C 2 *((t = 2)* T * T * T + T 2)+ B;
}
},
Sine:(慢行)
酪蛋白:功能(T,B,C,D){
返回C * math.cos(t / d(数学。π/ 2))+ C + B;
},
easeout:功能(T,B,C,D){
返回C * Math.sin(T/D *(数学。π/ 2))+ B;
},
easeinout:功能(T,B,C,D){
返回C / 2 *(math.cos(数学。PI * T/D)- 1)+ B;
}
},
世博会:指数曲线慢(2吨);
酪蛋白:功能(T,B,C,D){
返回(T = = 0)B:math.pow C *(2, 10 *(T/D - 1))+ B;
},
easeout:功能(T,B,C,D){
返回(T = = D)B + C:C(-math.pow(2,- 10 * T/D)+ 1)+ B;
},
easeinout:功能(T,B,C,D){
如果(t=0)返回b;
如果(返回),返回;
如果((T / = D / 2)<1)返回C / 2 *(2, 10 * Math.pow(T 1))+ B;
返回C / 2 *(-math.pow(2,- 10 * - T)+ 2)+ B;
}
},
保监会:{ / /圆曲线缓慢(sqrt(1-T ^ 2));
酪蛋白:功能(T,B,C,D){
返回C *(math.sqrt(1 -((T / = D)* T)- 1)+ B;
},
easeout:功能(T,B,C,D){
返回math.sqrt C *(1 -((T = T / D-1)* T)+ B;
},
easeinout:功能(T,B,C,D){
如果((T / = D / 2)<1)返回C / 2 *(math.sqrt(1 T T)- 1)+ B;
返回C / 2 *(math.sqrt(1 -((t = 2)* T)+ 1)+ B;
}
},
弹性:正弦曲线慢指数衰减;
酪蛋白:功能(T,B,C,D,A,P){
如果(t=0)返回b;如果(((t = =)= 1)返回b + C;如果(!p=d×3;
如果(一| |!< math.abs(C)){ = C;var = P / 4;}
其他变量S = P /(2×数学。PI)* Math.asin(C / A);
返回(* Math.pow(10×(t = 1))* Math.sin((T * D-S)*(2 *数学。PI)/ P))+ B;
},
easeout:功能(T,B,C,D,A,P){
如果(t=0)返回b;如果(((t = =)= 1)返回b + C;如果(!p=d×3;
如果(一| |!< math.abs(C)){ = C;var = P / 4;}
其他变量S = P /(2×数学。PI)* Math.asin(C / A);
返回(* Math.pow(2,- 10 * T)* Math.sin((T * D-S)*(2 *数学。PI)/ P)+ C + B);
},
easeinout:功能(T,B,C,D,A,P){
如果(t=0)返回b;如果(((= 2)= 2)返回b + C;如果(!p)p=d *;
如果(一| |!< math.abs(C)){ = C;var = P / 4;}
其他变量S = P /(2×数学。PI)* Math.asin(C / A);
如果(t<1)返回。5 *(* Math.pow(10×(t = 1))* Math.sin((T * D-S)*(2 *数学。PI)/ P))+ B;
返回一个* Math.pow(2,- 10 *(t = 1))* Math.sin((T * D-S)*(2 *数学。PI)/ P)* 5 + C + B;
}
},
三方返回:在一系列慢速移动((S + 1)* 3×2)中;
酪蛋白:功能(T,B,C,D,S){
如果(=未定义)s=1.70158;
返回C *(t=)* *((s + 1)* s)+ b;
},
easeout:功能(T,B,C,D,S){
如果(=未定义)s=1.70158;
返回C *((T = T / T D-1)* *((+ 1)* T + S)+ 1)+ B;
},
easeinout:功能(T,B,C,D,S){
如果(=未定义)s=1.70158;
如果((T / = D / 2)<1)返回C / 2 * ((((((((( * =(1.525))+ 1)* T S)+ B;
返回C / 2 *((t = 2)*不* (((((((((( * =(1.525))+ 1)* T + S)+ 2)+ B;
}
},
ZfBounce:{ / /指数衰减慢回弹。
酪蛋白:功能(T,B,C,D){
返回C zhufengeffect.zfbounce.easeout(DT,0,C,D)+ B;
},
easeout:功能(T,B,C,D){
如果((t = )< <(1 2.75)){
返回C *(7.5625 * t * T)+ B;
}如果(< <(2 2.75)){
返回C *(7.5625 *(t =(1.5 2.75))* 75)+ B;
}如果(< <(2.5 2.75)){
返回C *(7.5625 *(t =(2.25 2.75))* 9375)+ B;
{人}
返回C *(7.5625 *(t =(2.625 2.75))* 984375)+ B;
}
},
easeinout:功能(T,B,C,D){
如果(t<D / 2)返回zhufengeffect.zfbounce.easein(T×2, 0,C,D)* 5 + B;
否则返回zhufengeffect.zfbounce.easeout(T *二维,0,C,D)* 5 * 5 + B + C;
}
}
};
移动:多方向运动动画的实现
*
CurEle:当前的运动元素
目标:当前动画的目标位置存储在目标位置的每一个方向上。
持续时间:当前动画的总时间
* /
影响支持以下内容
*
* /
功能移动(curele、目标、时间、效果、回调){
我们需要动画处理
Var tempEffect = myEffect.Linear;
如果(typeof效果=数){
开关(效果){
案例0:
tempeffect = myeffect。线性;
打破;
案例1:
tempeffect = myeffect.circ.easeinout;
打破;
案例2:
tempeffect = myeffect.elastic.easeout;
打破;
案例3:
tempeffect = myeffect.back.easeout;
打破;
案例4:
tempeffect = myeffect.bounce.easeout;
打破;
案例5:
tempeffect = myeffect.expo.easein;
}
} else if(作用是数组){
tempeffect =效果。长> = 2 myeffect {效果{ 0 } } {效果{ 1 } }:myeffect {效果{ 0 } }
} else if(typeof效果=函数){
我们应该/实际意义是:效果不是转移值,传递函数在回调函数值应该是
回调=效果;
}
在每次执行方法之前,首先将当前元素放到运行动画结束之前。
window.clearinterval(curele。定时器);
根据目标开始/开始时的每个方向的值和总的距离变化。
var开始=更改= { };
对于(目标中的var键){
如果(target.hasownproperty(关键)){
开始{key} = utils.css(curele,关键)
更改{键} =目标{ } } -开始{键};
}
}
多方向运动/动画
var时间= 0;
curele.timer = window.setinterval(函数(){()
时间=10;
要达到目标:动画的结尾,让当前元素样式值等于目标值样式。
如果(时间>持续时间){
Utils.css(curele,目标);
window.clearinterval(curele。定时器);
当动画结束时,如果用户的回调函数传递给我,我会给用户回调函数执行传输,这不仅指向当前元素的操作。
类型的回调=功能callback.call(curele):空;
回调(回调)或
返回;
}
没有达到目标:在每个方向上都获得当前位置,以便将样式设置为当前位置。
对于(目标中的var键){
如果(target.hasownproperty(关键)){
无功curpos = tempeffect(时间、开始{key},改变{key},持续时间);
Utils.css(curele,关键,curpos);
}
}
},10)
}
window.myanimate =移动;
(})
这上面的JS学习经验_简单动画库包tween.js小和大家分享的内容,希望能给大家一个参考,希望大家支持。