先来看下最终的效果图吧：
 
这个动画的使用很简单，引用在Git上面的例子：

实际上只需要上面这几个步骤，new->setup(config)->init->play就可以运行起来，其中config的canvas_id和images是必需的配置。pieces是各图期望被切割成的块数，mark_func是一个运行时回调函数，必需是我定义的Func类型。mark_func有一个int参数，代表当前播放的图片索引，用法可以参照index.html源码，很简短的。

对于“上一张”、“下一张”，以及图片编号这些，我没有把它封装到动画里面，这些布局和样式可以更自由，因此才提供了mark_func配置项，可以查看index.html里面是怎样播放上一张、下一张以及指定编号的。其它可配置参数还有很多个，但不是必须的，执行slicease.init的时候会去设置默认配置，因此你也可以查看init函数是怎样设置这些配置项的。

很明显Slicease就是主类了，里面的Available settings注释下就是可选配置，比如图片与canvas的间距padding，每张图片切成的小块与小块之间的播放延迟delays，缓动持续时长duration等等。

其中有几个easing_xxx的，是缓动函数，可以结合init里面的预设项来看Animation是怎么使用的。今天发布1.0版本的时候，缓动函数都是基于贝塞尔曲线（Bezier）来实现的，主要是三阶，你会看到js/cn/studease/animation/easing文件夹下的预设缓动函数，比如Linear、Ease、EaseIn这些，和css3或者as3的缓动函数名是一样的，甚至使用的曲度值都是一样的。也许你会想问，为什么还要封装这些函数，为什么不直接用css3的缓动函数？原因是那些函数不可用或不足以满足我的需求。CubicBezier就是预设了起点和终点的三阶曲线，你可以像Linear、Ease那样继承它，传入你想要的值，一般是介于0到1之间的。也可以直接继承Bezier创建高阶曲线，来实现震荡或者撞击效果。在1.0.0.2版本的时候，实现了震荡函数Elastic。震荡效果看起来往往会很“笨重”的样子，我努力调节Elastic的控制点，希望它看起来清爽一点。

除了缓动的高可配置性以外，比较重要的实现就是贴图了。因为canvas支持的变形，就是矩阵转换那些，是不能做梯形变形的。但是在实际的旋转过程中，由于近大远小，大部分的面都是梯形的，而非平行四边形，所以这里就要用到遮罩了。思路就是把梯形分成两个三角形，两个三角形分别是两个平行四边形的一半，然后拼接在一起。而在切分梯形的时候，最好是选择距离更大的两个点来切。

至于3D空间中的缓动分离，以及透视计算，就不用讲解了。

可能是各浏览器在矩阵转换的时候的精度原因，有的浏览器在拼接的地方会有不明原因线条，放大了看像是多了1像素东西。在最新版的chrome和opera下，是最完美的，但是在firefox下，就有1px的划痕。而且firefox的渲染能力着实不敢恭维，也就开发的时候好用。。。至于IE，就不说它了~本来canvas也属于比较新的技术，版本老一点的chrome内核封装的浏览器都支持得不好，也就没有意义现在去严控兼容了。后期会陆续做一些改进和优化。