项目地址:
https://github.com/luobotang/slide-animation
在 Github 上搜索 presentation/slider 相关的项目,很多,包括像 impress.js 这样 NB 闪闪的工具。
所以,我只是重复造了一个轮子,还是个小轮子。接下来分享下我的思路和实现方法。
最开始是想实现一个类似这样 http://www.smartisan.com/jianguo/#/overview 效果的工具库,用来做页面展示。主要原因是公司网络有点问题,干不了活,有几个小时可以用,名义上也是给后面的工作储备点工具。
基本样式
每一个“片子”都是独占屏幕显示的,这个很简单,用类似下面的 CSS 搞定就行:
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
当然片子有很多,所以放到一个容器里面,让容器 position: fixed
就好,单张片子采用position: abusolute
。
幻灯片切换过程状态设计
然后,得让这些片子可以切换啊,还得有个动画效果。切换的话用 JavaScript 来支持,正在显示的片子移走,下一张片子显示出来就是。动画效果考虑用 CSS 来做,不想做很复杂,就用过渡效果实现(CSS transition
属性)。
实际在做的时候,动画效果这里还是花了心思,反复琢磨了很久。倒不是如何实现这个动画效果,因为是用 CSS 写动画效果,难度不大,重点在于 JavaScript 这边的设计。
比如说要移走的片子,直接隐藏?那不就没有动画效果了嘛。通过 JavaScript,或者说用 jQuery 写动画效果实现,倒是可以,但是复杂了,不如用 CSS 写简单,而且可以方便的替换。
所以是在类名上考虑,把两张片子切换的过程通过一系列类名的添加、移除来模拟,由 CSS 具体实现这些状态下的样式。初步定下来的是这些类名,加在片子对应的元素上:
- slide-in
- slide-active
- slide-out
切换时有两张片子,当前的片子本身有类名 slide-active
,切换时,移除 slide-active
,添加 slide-out
;下一张片子在切换时,添加 slide-active
以及 slide-in
。在设定的切换过渡时间后,把上一张片子的 slide-out
移除,这样就还原为一张普通的片子,下一张片子移除 slide-in
,成为当前显示的片子。在 slide-in
和 slide-out
两个类名下写幻灯片的过渡样式。
不过有个问题!
片子不光是从上往下切换,还可以从下往上啊!slide-in
和 slide-out
里面区分不出来方向,所以动画效果区分不出来。
考虑到这个问题,我由给片子加上了 slide-prev
和 slide-next
两个类名,用于区分该片子是在当前显示的片子之前还是之后,这样分别定义了不同的 CSS 样式后,在切换为 slide-active
状态时就可以应用不同的效果了。而 slide-in
和 slide-out
其实不用写什么东西了。
所以,切换过程变成了:
- 向下切换时
- 当前片子
移除slide-active
,添加slide-prev
、slide-out
--> 移除slide-out
- 下一张片子
移除slide-next
,添加slide-active
、slide-in
--> 移除slide-in
- 当前片子
- 向上切换时
- 当前片子
移除slide-active
,添加slide-next
、slide-out
--> 移除slide-out
- 下一张片子
移除slide-prev
,添加slide-active
、slide-in
--> 移除slide-in
- 当前片子
JavaScript 切换动作实现
切换相关的样式设计完了,再说 JavaScript 这边的实现。
首先是过渡有一个时间,在此期间不影响进一步的操作,让动画先完成。
通过一个状态变量 sliding
,一旦开始切换,将其设为 true
,再次调用时判断变量值为 true
,则不再处理。指定的切换过渡时间后,再将变量值设为 false
。
然后是触发切换的方式。
最开始只做了一种,通过鼠标滚轮的上下滚动实现。这个要判断鼠标滚轮的滚动方向,用了之前用过的一个 jQuery 插件 jQuery.mousewheel,所以没花什么力气。绑定的是插件提供的 mousewheel 属性,事件对象的 deltaY 属性值大于 0 就是向上滚动,小鱼 0 则是向下。
后来觉得支持键盘方向键切换也就是顺手的事,也就做了支持,实现也很简单,判断按键呗。jQuery 包装后的事件对象带有 which 属性,判断 which 的值是否对应方向键,然后触发就好。
整合
把上面的东西整合一下,Slider
就完成了,由于借助了 jQuery 和 jQuery.mousewheel,我自己的 JavaScript 代码只有一百多行,CSS 效果的实现是通过 transition,只是在不同状态下设置了不同的位置属性,也没有多少。
小结
重复造轮子也还是挺有趣的,特别的好处之一是,完全满足自己的需求,不需要学习、研究别人写的接口和代码。
只是个小工具,喜欢的话请直接下载使用,也欢迎参与并贡献代码。