Javascript 动画初探(实现)
作者:mingcheng 来源:gracecode.com 时间:2009-02-06 15:56:00
说完了理论,我们来做点实事。这篇文章将介绍使用 Javascript 实现的动画组件。
下面记录下当时编写这个组件的考虑的些问题,对技术细节感兴趣的朋友,可以到这里参看源代码:
需要几个回调函数控制初始化、动画运行时、动画完成的情况
将动画精确到运行了几帧
使用 setInterval 还是 setTimeout,最后还是选择了 setInterval(详细)
不管元素需要更改那些属性,提供相应公式即可,但这可能带来性能问题
要可扩展、而且稳定
这个动画组件的用法简要的说明下,首先我们要确定元素从哪里移动(begin)到哪里(final),我们可以将两个信息绑定到一起,比如
var position = {from: 0, to: 100};
然后实例化个动画组件,指定动画的运行时长(duration)以及动画运行类型(tween)
var motion = new Motion(duration, tween);
另外,我们当然希望在动画初始化、开始以及进行和结束时候做额外的事情,那么加入相应 的回调:
// 初始化motion.onInit = function() { // ...};// 开始motion.onStart = function() { // ...};// 动画运行时motion.onTweening = function() { // 需要获取某个时间点的坐标时,可以使用 this.equation 方法 var p = this.equation(position.from, position.to);};// 动画完成时motion.onComplete = function() { // ...};
当一切准备就绪,那么就可以开始动画了
motion.start();
当然,任何时候我们都希望能停止动画,那么就
motion.stop();
那么我们就可以通过这个动画组件完成常见的动画效果了。这里有个 DEMO,看下这个动画组件的实际使用例子。按照传统,代码可以在这里打包下载(中国as之家友情提示:.7z压缩文件,电脑安装7z软件后可以解压)。
附,参考资源:YUI 的动画组件、mootools 的动画组件 。
-- 未完待续 --