Motio – 更轻松的使用Sprite动画

Motio是一个用于快速播放CSS Sprite动画的工具库。Motio以jQuery插件的方式，通过简单的API就可以播放Sprite动画。

如何使用

要使用Motio，我们需要准备一张放有CSS Sprite动画所有帧的图片，称为背景图。Motio本身即作用于这张图片。

Sprite动画是通过不断切换图片来实现的，因此动画所在的容器应当正好与动画图片的每一帧相当，比如10帧100×100 px的动画，背景图就为1000×100 px，而容器则正好应为100×100px。

Motio所有的方法都可通过motio对象或motio的实例调用，播放一段简单的动画代码如下：

var bgPan = $('#bg').motio( options, true );

bgPan.set( 'speed', 100 );
bgPan.play();

其中#bg即为动画容器。这段代码将速度设为100，并开始播放。这个速度指的是每秒移动的像素数，速度100即意味着每秒移动100个像素。

Motio使用MIT协议进行分发。

富有激情的前端工程师，专注GUI开发。