HTML5 canvas 图片切换/图片轮播 贝塞尔曲线缓动 3D效果 (之) : slicease.js

        最近开始建设个人主页（studease.cn）。买下域名的时候还没有规划好网站的方向和内容，而我也不是做前端的，不想花太多时间去学习框架，而是期望使用比较新的、有价值的技术，既可以增长技能，又不会很快就被淘汰。在构思的时候，首先想到的是网站头部的新闻图片切换动画，或者叫抬头新闻，这也就有了我的第一个开源项目，我把她叫做slicease.js（https://github.com/studease/Slicease），以与我的域名相匹配。

        还是先来看下最终的效果图吧，或者前往个人主页（http://studease.cn）预览。

        （以上内容为1.0版本所写）

        一直以来，深知自己基础知识不扎实，理论和概念模糊。前段时间发生了一些事，让我开始重视和思考这个问题。

        最近花了些时间，重新写了2.0。新版本依然使用原生JS来书写，采用了闭包封装，MVC结构，拥有规范的事件机制、灵活的缓动函数、以及简明强大的配置，并且便于扩展。与1.0相比，不论是逻辑结构、代码质量、坐标换算，还是配置参数，都更加规范。并且考虑到兼容问题，比如IE和移动端，做了扩展性方面的考虑。截至发稿日，spare模块，暨在不支持canvas或效率不够的平台所使用的备用模块，暂未实现，后续会跟进。开发者也可以像canvas模块一样，去继承spare写一些自己的效果，比如基于css3的。

        以下是一段简洁的配置：

slicease('slicer').setup({width: 1200,height: 500,sources: ['images/img1.png', 'images/img2.png', 'images/img3.png'],renderMode: 'canvas',// default modecanvas: {pieces: [9, 10, 8, 3]}});

        其他配置参数请搜索各模块中的_defaults变量。需要注意的是，主配置是在embed.config里面，其他子模块的配置参数需要用模块名分割开来，比如上面这段配置中的canvas。canvas作为默认渲染方式，其缓动配置看起来比较复杂，但是对css3动画有所了解的，相信一眼就能看懂。该模块中可以控制方块的10个属性，配合灵活且易于扩展的缓动曲线，几乎可以做出任何效果。

        切换按钮和页码的配置请参见组件display和pager。

        这个插件原本是为个人主页所设计，做成开源项目一是当作自我修行，二是想与大家分享代码，同时期待大家提一些优化建议，以及后期维护建议（主页有邮箱）。

（转发请注明出处：http://blog.csdn.net/icysky1989/article/details/39624155）