生命周期
1、创建Anim对象a。
2、调用a的animate方法。
3、把a放在动画队列里。
4、a的onStart事件被触发。
5、把from、to和by等参数统一转换成start和end两个参数。
6、AnimMgr调用自身的start方法,开启一个interval执行AnimMgr的run方法。
7、遍历动画队列:
分别对元素进行帧数调整:
Math . round (( elapsed / expected - 1 ) * currentFrame )
elapsed为实际经过的时间;expected为预期经过的时间;currentFrame为当前帧数。
触发每个元素的onTween事件。
通过method计算并设置当前的属性值:
method中通过当前帧数(t)、总帧数(d)、属性起始值(b)和属性差值(c)计算当前帧的属性值。
method可插拔,e.g.
没效果:c * t / d + b
从慢到快:c * (t /= d) * t + b
8、动画完毕时 onComplete事件被触发。
9、把a从动画队列中移除。
10、如果动画队列中已经没有元素,则清除interval。
可能存在的问题
1、调整帧数的算法。有跟直接的方法 (elapsed - expected) / delay ,delay为interval的间隔。
2、因为如果属性差值不高的时候,很可能在一段时间内元素的结果值是不变的,所以如果当属性值没有变化的时候不进行setStyle的操作或许能提升性能,就是不知道浏览器有没有优化过。
3、封装得太过,例如我想表格中的一行淡出的时候,并不能作用在tr上,所以我要分别对每个td淡出。这样的话我非得创建几个Anim对象不可。
朋友JK的实现思想
传入一个函数,此函数将会接受到一个范围是0到1的一个数值表示当前已经过的时间。
1、非常灵活,很轻松解决了上述的第三个问题。
2、动画库代码量少。
3、由于使用 (当前时间 - 开始时间) / 动画时间 计算参数,所以不需要跳帧。
不过这种实现封装太少,使用起来不方面。
1、创建Anim对象a。
2、调用a的animate方法。
3、把a放在动画队列里。
4、a的onStart事件被触发。
5、把from、to和by等参数统一转换成start和end两个参数。
6、AnimMgr调用自身的start方法,开启一个interval执行AnimMgr的run方法。
7、遍历动画队列:
分别对元素进行帧数调整:
Math . round (( elapsed / expected - 1 ) * currentFrame )
elapsed为实际经过的时间;expected为预期经过的时间;currentFrame为当前帧数。
触发每个元素的onTween事件。
通过method计算并设置当前的属性值:
method中通过当前帧数(t)、总帧数(d)、属性起始值(b)和属性差值(c)计算当前帧的属性值。
method可插拔,e.g.
没效果:c * t / d + b
从慢到快:c * (t /= d) * t + b
8、动画完毕时 onComplete事件被触发。
9、把a从动画队列中移除。
10、如果动画队列中已经没有元素,则清除interval。
可能存在的问题
1、调整帧数的算法。有跟直接的方法 (elapsed - expected) / delay ,delay为interval的间隔。
2、因为如果属性差值不高的时候,很可能在一段时间内元素的结果值是不变的,所以如果当属性值没有变化的时候不进行setStyle的操作或许能提升性能,就是不知道浏览器有没有优化过。
3、封装得太过,例如我想表格中的一行淡出的时候,并不能作用在tr上,所以我要分别对每个td淡出。这样的话我非得创建几个Anim对象不可。
朋友JK的实现思想
传入一个函数,此函数将会接受到一个范围是0到1的一个数值表示当前已经过的时间。
1、非常灵活,很轻松解决了上述的第三个问题。
2、动画库代码量少。
3、由于使用 (当前时间 - 开始时间) / 动画时间 计算参数,所以不需要跳帧。
不过这种实现封装太少,使用起来不方面。