Tween中的方法接受4个参数t,b,c,d 。返回值为计算后的当前位置.
t => time(初始记步次数) b => begin(初始位置) c => change(变化量) d => duration(持续次数)
Tween详解:http://www.zhangxinxu.com/wordpress/2016/12/how-use-tween-js-animation-easing/
接上文【最好看一下】:http://blog.csdn.net/xiaomogg/article/details/65028805
m.Tween.js源码:
var Tween = {
linear: function (t, b, c, d){
return c*t/d + b;
},
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;
},
easeBoth: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.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;
},
elasticOut: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.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;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.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 < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 2.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
};
function cssTransform(el, attr, val) {
if(!el.transform){
el.transform = {}
}
if(typeof val == "undefined"){
if(typeof el.transform[attr] == "undefined"){
switch(attr) {
case "scale":
case "scaleX":
case "scaleY":
el.transform[attr] = 100;
break;
default:
el.transform[attr] = 0;
}
}
return el.transform[attr];
} else {
var transformVal = "";
el.transform[attr] = Number(val);
for(var s in el.transform){
switch(s){
case "rotate":
case "rotateX":
case "rotateY":
case "rotateZ":
case "skewX":
case "skewY":
transformVal += " "+s+"("+el.transform[s]+"deg)";
break;
case "translateX":
case "translateY":
case "translateZ":
transformVal += " "+s+"("+el.transform[s]+"px)";
break;
case "scale":
case "scaleX":
case "scaleY":
transformVal += " "+s+"("+el.transform[s]/100+")";
break;
}
}
el.style.WebkitTransform = el.style.transform = transformVal;
}
}
function css(element, attr , val){
if(attr == "rotate" || attr == "rotateX"
|| attr == "rotateY" ||attr == "rotateZ"
|| attr == "scale" || attr == "scaleX"
|| attr == "scaleY" || attr == "skewX"
|| attr == "skewY" || attr == "translateX"
|| attr == "translateY" || attr == "translateZ" ){
return cssTransform(element, attr, val);
}
if(arguments.length == 2){ //只要两个参数的时候是获取属性
var val = getComputedStyle(element)[attr];
if(attr=='opacity'){
val = Math.round(val*100); //透明的*100 减少小数误差
}
return parseFloat(val);
}
if(attr == "opacity") {
element.style.opacity= val/100;
} else {
element.style[attr]= val + "px";
}
}
function MTween(init){ //对tween进行再次封装
var t = 0;//当前计时
var b = {}; //当前值
var c = {};//目标值和当前值得差
var d = init.time / 20; //终止时间
for(var s in init.target){
b[s] = css(init.el, s);
c[s] = init.target[s] - b[s];
}
clearInterval(init.el.timer);
init.el.timer = setInterval(
function(){
t++;
if(t>d){
clearInterval(init.el.timer);
init.callBack&&init.callBack.call(init.el);
} else {
init.callIn&&init.callIn.call(init.el);
for(var s in b){
var val = (Tween[init.type](t,b[s],c[s],d)).toFixed(2);
css(init.el, s, val);
}
}
},
20
);
}
最终源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div {
width: 100px;
height: 100px;
background: red;
}
</style>
<script type="text/javascript" src="m.Tween.js"></script>
<script type="text/javascript">
window.onload = function(){
var div = document.querySelector('#div');
document.onclick = function(){
MTween({
el: div,
target: {
width: 400,
height: 300,
opacity: 50
},
time: 1000,
type: "backOut",
callBack: function(){
console.log("动画执行完了");
},
callIn: function(){
console.log("动画执行中");
}
});
};
/*
必写参数:
el 元素
target {} 目标点
time: 动画持续时间 (ms)
type: 动画类型 "string"
可选参数:
callBack: fn 回调函数(动画执行完之后,执行的函数)
callIn: fn 并发函数 (动画执行完中,执行的函数)
*/
};
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>