Motion - 小型高效的 Javascript 动画组件

概览

这是名为 Motion 的 Javascript 动画组件。它能够帮助您不依赖 Javascript 框架即可简单、高效地完成复杂的动画效果。

特性

高效率、不依赖任何 Javascript 框架
经过严格的测试，可信赖
苗条、只有 3KB ^{注：压缩后}
支持回调（callback），扩展容易
支持多浏览器，让您摆脱复杂的动画效果、重新关注业务本身
遵循 MIT 协议，自由使用

下载

您可以从下面的连接获得最新稳定版本

还可以查看所有 Motion 的历史版本，见证 Motion 的完善历程。

您还可以直接通过 SVN 获得最新测试版本（不适用于实际生产环境）。

起步

动画，从哲学的角度上讲就是不断改变自身的属性。所以在开始进行动画时，您需要了解以下些参数：

区间动画改变元素属性的区间值
时长动画展现的时长
类型现为动画函数，Motion 内置常见动画类型

下面是简单的实例：

实例化

在引入动画组件后，首先就是实例化一个动画类。例如：

var motion = new Motion('linear', 500);

其中包含了两个参数，分别是动画类型和时长。

设置回调

Motion 提供回调的方式扩展，常见的回调使用 onTweening，即在动画运行中的进行的操作：

var sample = document.getElementById('sample');
var interval = {from: 0, to: 500};
motion.onTweening = function() {
    sample.style.width = this.equation(interval.from, interval.to) + 'px';
};

其中，this.equation 则是根据上述实例化时生成的动画函数，他需要两个参数 -- 即动画区间的开始和结束，返回的是当前帧的位置。

下面是目前 Motion 支持的回调接口：

onInit在初始化时运行
onStart在动画开始时运行
onTweening在动画进行时运行
onComplete在动画完成时运行

0.3 版本以后新增

onSleep在暂停动画时运行
onWakeup在继续开始时运行

开始和停止

设置好动画参数以后，即可开始动画查看最终效果。

开始动画使用：

motion.start();

停止动画使用：

motion.sleep();

0.3 版本以后新增

暂停动画使用：

motion.wakeup();

恢复动画使用：

motion.stop();

例如，通常我们会将其绑定到某元素的事件中开始动画：

var trigger = document.getElementById('trigger');
trigger.onclick = function() {
    if (motion.tweening) { // 如果动画在行进中，则停止
        motion.stop();
    }
    motion.start(); // 开始动画
};

万事俱备

就这样我们完成了基本的动画，我们来看下效果。

好了，我们来看下最终代码：

var motion  = new Motion('linear', 500);
var sample  = document.getElementById('sample');
var trigger = document.getElementById('trigger');

motion.onTweening = function() {
    sample.style.width = this.equation(0, 500) + 'px';
};

trigger.onclick = function() {
    if (motion.tweening) { // 如果动画在行进中，则停止
        motion.stop();
    }
    motion.start(); // 开始动画
};

更快更好

如果我们想换个动画效果，那么只要该一下参数就可以啦。例如上面的例子，我们改成

var motion = new Motion('backOut', 500);

然后再点击试试看，这会很容易，对不？

如果需要查看所有 Motion 内置的动画类型，您可使用：

Motion.getTweens();

它将返回一个对象（Object），其中包含此组件内置的所有动画公式。

样例

我希望通过 Motion 能够实现尽可能多的动画效果，下面是些样例。如果您也有精彩的例子，欢迎您提交给我。

运行轨迹: 根据动画参数，返回相应的动画轨迹以及状态。
柱状统计图: 根据上述的例子，发展而来的柱状统计图。
Slider Menu by 桑拿院的小伙子: Slider Menu 实例，感谢桑拿院的小伙子提供

问答

天啊，又多了款这样（类似）的脚本，让我如何选择？

没有最好的，只有更适合的。或许其他同类型的脚本也能很好的完成工作（包括很多库中的动画组件能够完成更好的效果）。

本人编写该组件的目的，除了能让您能高效率完成动画效果的同时，也希望您能了解动画组件的原理。

而且完成这些复杂效果只需要 3KB （压缩后）并且可以定制，何乐而不为 :^)

该动画组件支持哪些浏览器？

经过本人的测试，主流的浏览器普遍都被支持。其中包括 Internet Explorer(6/7/8) 、最新版本的 Firefox、Safari、Chrome 以及 Opera，其他支持 Javascript 的浏览器也应该可被支持。

欢迎您提供相应的其他浏览器的兼容情况。

为什么使用 this.equation，而非直接内部计算出当前帧的位置？

动画有多种类型，但从实质上说就是不断的改变某具体对象的属性值。本人认为动画组件应该做的，只要提供公式，然后计算在相应的帧改变的位置即可。

同时这样做的另个好处就是可以同时控制多个动作，而不需要声明多个动画组件（只要他们的动画类型、时长都一致）。

我想重复运行某个动画，怎么办？

可以考虑回调实现改功能，例如在动画完成时重新执行开始

motion.onComplete = function() {
    this.start();
};

当然可以考虑加入相应的参数，但我发现使用回调也能很好、而且很清楚的工作。

我发现了个 Bug，怎么办？

在您发现是 Motion 本身的 Bug 时，欢迎您提出来并主动联系我。如果您对于 Motion 有更好的优化意见和建议，也欢迎您不吝提出。

怎样才能联系到作者？

您可以通过电子邮件或者 Gtalk 和我联系 i.feelinglucky[at]gmail.com；或者访问我的 Blog 。