缘起

ifuyun.com已经“像模像样”了,经过2个月的线上运行,无论功能还是细节,也优化得八九不离十了,但——唯独首页的轮播图还依然停留在静态图片方式。其实,在第一版的实现上,就已经设计了轮播图,并简单实现了轮播效果,但因彼时尚未接入CDN,多张图片的加载对于小水管实在一言难尽,因此在此后的版本中便暂时将其下线了……

偶遇

实现CDN的接入后,便一直惦记着这事,近日,走查未完成的TODO事项时,轮播图一事格外晃眼。罢,开始搞定它……

年初逛网时发现一个名为swiper的滑动插件,似乎使用的人颇多,可选择的效果也很完备。上去溜达一圈,有些交互还挺满意,但F12一看实现方式,犹豫了……

暂时搁置之后,无意中在B站首页上看到吃豆人的轮播图,眼前一亮……这不正是自己想要的吗?真是踏破铁鞋无觅处,得来全不费工夫!╰(*°▽°*)╯

好奇实现之余,特意搜索了下,看了排名第一的视频后,感觉甚是“繁琐”。无奈,只能亲自动手了……

原理

吃豆人的动画效果并不是通过gif等方式实现,而是直接通过CSS动画实现吃豆的效果。

  1. 焦点状态:放大圆的直径。
  2. 吃豆动画:上下2个半圆分别逆、顺时针旋转45°。
  3. 轮播图切换:判断是否最后一张,是则索引为0,否则索引+1。
  4. 手动切换:直接设置索引,并判断索引位置,设置吃豆方向。
  5. 轮播图切换动画:CSS动画。

完整效果参见:爱浮云

实现