tween.js和css3变形的使用

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>