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

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

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

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

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

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

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

        3.0版本使用webgl进行渲染，基础功能已经出来一年多了，一直没时间整理，最近花了些时间写了点组件，包括控制、跳转、右键菜单等。点击页码也会自动判断前后顺序来决定旋转方向，使用控制按钮可完全控制旋转方向；链接跳转功能使它可以真正应用到项目中。并且，缓动参数、右键菜单、跳转链接、镜头等都可通过参数进行配置，具有很强的灵活性。

        以下是一段简洁的配置：

slicease('slicer').setup({
	width: 1000,
	height: 460,
	sources: [{
		file: 'images/img1.png',
		link: 'https://oddengine.com/product/rtc.html',
		target: '_blank'
	}, {
		file: 'images/img2.png',
		link: 'https://oddengine.com/product/player.html',
		target: '_blank'
	}, {
		file: 'images/img3.png',
		link: 'https://oddengine.com/product/im.html',
		target: '_blank'
	}, {
		file: 'images/img4.png',
		link: 'https://oddengine.com/product/live.html',
		target: '_blank'
	}, {
		file: 'images/img5.png',
		link: 'https://oddengine.com/product/vod.html',
		target: '_blank'
	}],
	range: '3-9',
	cubic: '10,4',
	distance: 12
});

        其他配置参数请搜索各模块中的_defaults变量。需要注意的是，主配置是在embed.config里面，其他子模块的配置参数需要用模块名分割开来，比如右键菜单需要配置成contextmenu.items这种形式，其中items为object数组，详见组件源码。

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

（转发请注明出处：HTML5 canvas 图片切换/图片轮播 贝塞尔曲线缓动 3D效果 (之) : slicease.js_3d slicer html展示_古怪巨蟹的博客-CSDN博客）