V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
pru

求助, cancelAnimationFrame 不起作用。

  •  
  •   pru · Jan 25, 2018 · 3706 views
    This topic created in 3025 days ago, the information mentioned may be changed or developed.
    刚学 JS 一个星期,写了一个简单的播放器做练习。其中一个动效是音乐封面在音乐播放的时候转动,而且停止的时候有一个缓入缓出效果。这个动效是用 requestAnimationFrame 实现的。播放器地址在此:dokuro.in
    暂停音乐或者音乐结束之后,封面要停止转动,这个效果是用 cancelanimationframe 实现的。
    实际运行起来效果看起来是没有问题的,但是查看控制台的时候,发现在暂停音乐时,cancelAnimationFrame 并没有生效...但是此时如果在控制台执行 cancelAnimationFrame,requestAnimationFrame 就停下来了......
    具体情况很难直接说明清楚,我在 JS 文件里面添加了中文注释,还希望能够把实际情况描述得明白。
    5 replies    2018-01-25 17:08:21 +08:00
    pru
        1
    pru  
    OP
       Jan 25, 2018
    对了,还有一个奇怪的 bug。音乐播放结束时,如果没有停留在当前页面,那么无论过了多久,再次进入播放器页面时,封面都会进行一次的缓出停止转动的动效。按理说应该一直保持停止状态的啊......(:3 」∠)_
    xubeiyan
        2
    xubeiyan  
       Jan 25, 2018
    xubeiyan
        3
    xubeiyan  
       Jan 25, 2018
    另外,这个功能完全可以用 CSS3 来实现
    https://icewing.cc/post/css3-rotate-cdcover.html
    pru
        4
    pru  
    OP
       Jan 25, 2018
    @xubeiyan 非常感谢! JS 代码之所以这么复杂,是因为要实现封面转动的缓入缓出效果。仔细看其实可以发现,封面开始转动时,是从静止开始缓慢加速,速度达到一个稳定值后再保持匀速转动。封面停止转动的时候,也是缓慢地减速,然后停止。
    setTimeout 语句我之前也尝试过,如果对封面进行快速的点击的话,会出现一些小问题。
    我的代码可读性确实不太好,不过还是非常感谢了!
    xubeiyan
        5
    xubeiyan  
       Jan 25, 2018
    @pru CSS3 是可以设置 transition 的,http://www.w3school.com.cn/cssref/pr_transition.asp ,你想实现那种效果可以实现的
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   4105 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 04:17 · PVG 12:17 · LAX 21:17 · JFK 00:17
    ♥ Do have faith in what you're doing.