一个公告滚动播放功能引发的背后思考

546

今日鸡汤:当你技术眼界足够开拓时,才能以不变应万变!

老江:客户说首页需要做一个公告展示功能

作为一名从事了三年的前端练习生来说,简直不要太easy

小试牛刀

于是我一把vue梭哈,实现了简单的公告展示 image

老江摇头

结果老江看了直摇头,搭着我的肩膀和我说:作为一名几年的练习生,写出这样的代码是不够的!现在让我们来详细的说下公告的需求:

  • 公告需要将竖立滚动改成横向滚动
  • 滚动的动画速度要求是:先快速进入,后缓慢展示,接着快速离开
  • 当第一公告条滚动完后,就轮到下一条公告滚动,依次重复循环
  • 当鼠标移动到公告内容时,需要停止滚动,鼠标移开后,在重新开启滚动

我思考着:横向滚动也不难,问题是:既要横向滚动,还能切换到下一条公告,又要控制动画速度,这不是为难我胖虎吗?

image

灵光一现

突然第二个问题有思路了:假设我使用css的animate实现横向动画,设定动画时间为8s;此时我再开启一个定时器setInterval,每次计时8s后便去切换下一条公告,这不就好了?于是我再次一把vue梭哈

效果如有不准确,请重新点击运行查看效果

接着解决动画速度的问题,目前动画是匀速滚动的

animation: wordsLoop 8s linear infinite normal;

为了实现先快后慢再快的效果,使用cubic-bezier函数配置一下就行了

cubic-bezier可视化配置网站

将动画修改如下:

animation: wordsLoop 8s cubic-bezier(0.1, 0.7, 1, 0.1) infinite normal;

image 此时运动效果与公告切换效果都实现了,但是鼠标移入/移出的动画暂停/开启事件都没

我的想法是给样式添加一个hover选择器,当触发时给动画设置暂停

.content:hover {
  /* 设置动画是否暂停 paused暂停*/
  animation-play-state: paused;
}

此时移动上去时,动画即可实现暂停效果了

但是新的问题又来了,你会发现:虽然我的动画是停止了,可是定时器的事件还会继续执行,这就导致了后面的公告切换时机和每轮的动画匹配不上了

旁门左道

我又思考了一会:

  • 自定义一个计时变量announceTime,定时器10ms不断去执行计时,announceTime每次增幅为10,当计时变量announceTime累计到8000时,公告的下标进行累加
  • 在动画元素上添加移入移出事件,当鼠标移入时,添加一个停止计时标识,鼠标移开后再重新计时

嘿,这不就解决了?

于是,我又㕛叒叕修改了一版代码

效果如有不准确,请重新点击运行查看效果

这样似乎好像是解决了问题,但实际上存在很多隐藏的bug,例如每次动画切换公告时,总能看到上一条公告;最致命的是:当你频繁的移入移出元素时,你会发现还是存在动画未完成就切换下一条公告的问题

学以致用

在没接触过动画延迟这个概念之前,我一直没明白要如何去解决上面的问题,最近刚在某位老师的教程里面学会了动画延迟的教程,发现正好可以解决以上的问题

动画延迟教程地址

结语

真正实现一个公告滚动效果其实并不算难,但是如何更加人性化、个性化地去用前端技术来实现和展示,并不是所有开发者都会去思考的事。

如果是在我上一家公司,我的领导只会要求我实现这个需求就行,并不会要求我要实现某种特定的效果;但是很荣幸,我跳进了目前这家还算很不错的公司,这里的领导不会得过且过,他们会站在更符合用户使用体验的角度上,来对你提出需求优化

因此你不得不开拓更高的技术眼界,这样你才能以不变应万变

也仅有如此,你才能被鞭笞走得更远。目前前端开发者正在面对着前所未有的就职困难形势,我身边也有不少人和我苦诉过找了一个多月还没找到工作的,简历投了都毫无音讯。但我时常鼓励着他们,一定要保持着良好的心态,不断去充实自己,保持着终生学习的态度

最后贴一下自己的个人博客:howcode博客,有空了都会更新一下自己的学习技术路程,大家一起学习一起进步,咱们高处见!