V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
pru
V2EX  ›  JavaScript

求助, cancelAnimationFrame 不起作用。

  •  
  •   pru · 2018-01-25 11:10:08 +08:00 · 3268 次点击
    这是一个创建于 2280 天前的主题,其中的信息可能已经有所发展或是发生改变。
    刚学 JS 一个星期,写了一个简单的播放器做练习。其中一个动效是音乐封面在音乐播放的时候转动,而且停止的时候有一个缓入缓出效果。这个动效是用 requestAnimationFrame 实现的。播放器地址在此:dokuro.in
    暂停音乐或者音乐结束之后,封面要停止转动,这个效果是用 cancelanimationframe 实现的。
    实际运行起来效果看起来是没有问题的,但是查看控制台的时候,发现在暂停音乐时,cancelAnimationFrame 并没有生效...但是此时如果在控制台执行 cancelAnimationFrame,requestAnimationFrame 就停下来了......
    具体情况很难直接说明清楚,我在 JS 文件里面添加了中文注释,还希望能够把实际情况描述得明白。
    5 条回复    2018-01-25 17:08:21 +08:00
    pru
        1
    pru  
    OP
       2018-01-25 11:22:26 +08:00
    对了,还有一个奇怪的 bug。音乐播放结束时,如果没有停留在当前页面,那么无论过了多久,再次进入播放器页面时,封面都会进行一次的缓出停止转动的动效。按理说应该一直保持停止状态的啊......(:3 」∠)_
    xubeiyan
        2
    xubeiyan  
       2018-01-25 14:35:30 +08:00
    xubeiyan
        3
    xubeiyan  
       2018-01-25 15:06:54 +08:00
    另外,这个功能完全可以用 CSS3 来实现
    https://icewing.cc/post/css3-rotate-cdcover.html
    pru
        4
    pru  
    OP
       2018-01-25 16:58:43 +08:00
    @xubeiyan 非常感谢! JS 代码之所以这么复杂,是因为要实现封面转动的缓入缓出效果。仔细看其实可以发现,封面开始转动时,是从静止开始缓慢加速,速度达到一个稳定值后再保持匀速转动。封面停止转动的时候,也是缓慢地减速,然后停止。
    setTimeout 语句我之前也尝试过,如果对封面进行快速的点击的话,会出现一些小问题。
    我的代码可读性确实不太好,不过还是非常感谢了!
    xubeiyan
        5
    xubeiyan  
       2018-01-25 17:08:20 +08:00
    @pru CSS3 是可以设置 transition 的,http://www.w3school.com.cn/cssref/pr_transition.asp ,你想实现那种效果可以实现的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1126 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 22:45 · PVG 06:45 · LAX 15:45 · JFK 18:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.