网络编程
位置：首页>> 网络编程>> JavaScript>> Javascript 动画初探（实现）

Javascript 动画初探（实现）

作者：mingcheng　来源：gracecode.com　发布时间：2009-02-06 15:56:00　

标签：动画,组件,JavaScript,时间

说完了理论，我们来做点实事。这篇文章将介绍使用 Javascript 实现的动画组件。

下面记录下当时编写这个组件的考虑的些问题，对技术细节感兴趣的朋友，可以到这里参看源代码：

  1. 需要几个回调函数控制初始化、动画运行时、动画完成的情况

  2. 将动画精确到运行了几帧

  3. 使用 setInterval 还是 setTimeout，最后还是选择了 setInterval（详细）

  4. 不管元素需要更改那些属性，提供相应公式即可，但这可能带来性能问题

  5. 要可扩展、而且稳定

这个动画组件的用法简要的说明下，首先我们要确定元素从哪里移动（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 的动画组件 。

-- 未完待续 --

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com