求助, cancelAnimationFrame 不起作用。

2018-01-25 11:10:08 +08:00
 pru
刚学 JS 一个星期,写了一个简单的播放器做练习。其中一个动效是音乐封面在音乐播放的时候转动,而且停止的时候有一个缓入缓出效果。这个动效是用 requestAnimationFrame 实现的。播放器地址在此:dokuro.in
暂停音乐或者音乐结束之后,封面要停止转动,这个效果是用 cancelanimationframe 实现的。
实际运行起来效果看起来是没有问题的,但是查看控制台的时候,发现在暂停音乐时,cancelAnimationFrame 并没有生效...但是此时如果在控制台执行 cancelAnimationFrame,requestAnimationFrame 就停下来了......
具体情况很难直接说明清楚,我在 JS 文件里面添加了中文注释,还希望能够把实际情况描述得明白。
3354 次点击
所在节点    JavaScript
5 条回复
pru
2018-01-25 11:22:26 +08:00
对了,还有一个奇怪的 bug。音乐播放结束时,如果没有停留在当前页面,那么无论过了多久,再次进入播放器页面时,封面都会进行一次的缓出停止转动的动效。按理说应该一直保持停止状态的啊......(:3 」∠)_
xubeiyan
2018-01-25 14:35:30 +08:00
xubeiyan
2018-01-25 15:06:54 +08:00
另外,这个功能完全可以用 CSS3 来实现
https://icewing.cc/post/css3-rotate-cdcover.html
pru
2018-01-25 16:58:43 +08:00
@xubeiyan 非常感谢! JS 代码之所以这么复杂,是因为要实现封面转动的缓入缓出效果。仔细看其实可以发现,封面开始转动时,是从静止开始缓慢加速,速度达到一个稳定值后再保持匀速转动。封面停止转动的时候,也是缓慢地减速,然后停止。
setTimeout 语句我之前也尝试过,如果对封面进行快速的点击的话,会出现一些小问题。
我的代码可读性确实不太好,不过还是非常感谢了!
xubeiyan
2018-01-25 17:08:20 +08:00
@pru CSS3 是可以设置 transition 的,http://www.w3school.com.cn/cssref/pr_transition.asp ,你想实现那种效果可以实现的

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/425798

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX