javascript动画浅析资源-CSDN文库

125 浏览量 2020-12-10 10:35:09 上传评论收藏 80KB PDF 举报

资源推荐

资源详情

资源评论

javascript动画浅析动画浅析

动画原理动画原理

所谓的动画，就是通过一些列的运动形成的动的画面。在网页中，我们可以通过不断的改变元素的css值，来达到动的效果。

用到的公式

总距离S = 总时间T * 速度V 即: V = S/T

当前距离s = S/T * 已耗时t 即: s = S * (t/T)

即：当前距离 = 总距离 * (已耗时/总时间)

即：动画元素开始值 + (动画元素结束值 – 动画元素开始值) * (当前时间-开始时间) / (动画需要时间) + 值的格式

有了上面这些公式，我们就能利用javascript的setInterval或者setTimeout来做一个简单的动画了。

然而想要做一个动画库，就不得不考虑另外一些因素了。比如同一个元素的动画，必须要有顺序的执行。不同元素的动画可

以同步运行。

如此一来，就必须得用另外一个对象来管理这些动画了。我开始的想法是讲每个元素都放在一个数组里，用几个setInterval来

循环取出数组中的动画函数依次执行。

animate1 = [{elem,fn},{elem,fn}];

animate2 = [{elem,fn},{elem,fn}];

这样就能达到，相同的元素动画，是有顺序的执行，而不同的则可以同时运行了。然后这样却存在一个问题，那就是如果超过

10个元素的动画。程序就要开十个setInterval。

为了避免这样的情况发生，就在上面的基础上做了一些改进。使得，不论多少个动画。都使用一个setInterval来完成。修改后

结构如下。

代码如下:

[

[elem,[fn,fn,fn,fn]],

[elem,[fn,fn,fn,fn]],

[elem,[fn,fn,fn,fn]]

]

这样一来，就可以用一个setInterval来完成所有动画了。所需要做就是,循环取出elem,并执行elem后面一个元素的头一个

fn，fn执行完毕后删除fn。调用下一个fn，如果fn全部为空则从大的数组中删除elem，如果elem为空时，则清楚setInterval。

这样一来，逻辑上便可以走得通了。

然而动画最关键的因素还有一个，那就是缓动。如果没有缓动，那么动画效果看起来就非常的死板。千篇一律。目前做js动画

用到的缓动算法是很多的，大致分为两类。

一种是flash类，一种是prototype类。

flash的需要四个参数。分别是,

1.时间初始话的时间t

2.动画的初始值b

3.动画的结束值c

4.动画持续的时间d

下面是一个flash 类的匀速运动算法

Linear: function(t,b,c,d){ return c*t/d + b; }

另一种则是prototype，这一类的参数只需要一个，那就是当前时间t与持续时间d的比值 (t/d)

我采用了第二种，因为它的参数方便。也更加适合上面的动画公式,下面是一个prototype类的匀速运动算法

linear : function(t){ return t;}.

加入缓动后上面的公式变为

动画元素开始值 + (动画元素结束值 – 动画元素开始值) * 缓动函数((当前时间-开始时间) / (动画需要时间)) + 值的格式。

至此便是整个动画类设计便结束了。其中参考了一些其它人的博客，在此表示感谢!

最后，还是贴一下详细代码吧。

代码如下:

/**

* create time 2012/08/29

* @author lynx cat.

* @version 0.77beta.

*/

(function(win,doc){

var win = win || window;

var doc = doc || win.document,

pow = Math.pow,

sin = Math.sin,

PI = Math.PI,

BACK_CONST = 1.70158;

var Easing = {

// 匀速运动

linear : function(t){

return t;

},

easeIn : function (t) {

剩余7页未读，继续阅读

内容反馈

weixin_38688820

粉丝: 5
资源: 1003

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip