/**
|
* Created by 张思奇 on 16/9/28.
|
* tween.js实现补间动画
|
*/
|
|
//使用函数的闭包包裹整个动画代码
|
//自运行函数 ~表示js的自动解析 浏览器看见~就会自动执行之后的函数
|
~function(){
|
|
/*
|
t timer动画已执行的时间
|
b begin动画执行前的起始位置
|
d duration动画的持续执行时间
|
c change动画要移动的距离(动画要变动的数值范围)
|
返回值 得到动画在t这个时间点需要的具体坐标(数值)
|
* */
|
function linear(t,b,d,c) {
|
return c*t/d +b;
|
}
|
|
/*
|
* curEle 要做动画的元素
|
* dest 动画运动的目标值 { left:400,top:300,width:400,opacity: 0 }
|
* duration 动画的持续时间
|
*{ left:400,top:300,width:400,opacity: 0 }
|
* callback是回调函数 希望在动画结束时调用
|
* */
|
function startAnimation(curEle,dest,duration,callback)
|
{
|
|
//1.动画的初始化 计算属性的起始值 和需要改变多少值
|
//begin是个对象 用来保存目标属性的起始值 里面所有的属性名和dest里面的属性名对应
|
//change也是对象,用来保存目标属性需要变化的值,里面所有的属性名和dest里面的也对应
|
var begin={}, change={};
|
for(var key in dest)
|
{
|
if(dest.hasOwnProperty(key))
|
{
|
begin[key] = css(curEle,key);
|
change[key]=dest[key]-begin[key];
|
}
|
}
|
//2.启动周期定时器,定时执行移动的方法
|
//a.每一次动画开始之前要清除前一次动画的定时器
|
window.clearInterval(curEle.animTimer);
|
//用来累计动画已经播放了多长时间
|
var totalTime=0;
|
curEle.animTimer=window.setInterval(move,10);
|
|
//b 定义负责每一次修改动画值的函数move
|
function move() {
|
totalTime+=10;
|
//累计完时间判断是否动画结束
|
if(totalTime>=duration)
|
{
|
// for(var key in dest)
|
// {
|
// if(dest.hasOwnProperty(key))
|
// {
|
// //把位置全都定位最终值
|
// css(curEle,key,dest[key]);
|
// }
|
// }
|
css(curEle,dest);
|
|
window.clearInterval(curEle.animTimer);
|
|
if(typeof callback==="function")
|
{
|
callback();
|
}
|
return;
|
}
|
//计算这个时间刻,动画需要改变的所有属性的值
|
for(key in dest )
|
{
|
if(dest.hasOwnProperty(key))
|
{
|
curPos= linear(totalTime,begin[key],duration,change[key]);
|
css(curEle,key,curPos);
|
}
|
}
|
}
|
}
|
window.tween=startAnimation;
|
}();
|
