創建更加順滑的 JavaScript 動效

[ZhaoMiing]

http://www.prototypo.me/create-silky-smooth-js-animation/
週末沒事乾，翻譯處女作。

[djyde]

真他妈怀念我以前写JavaScript的时光，现在搞Android写java，蛋疼不已

[ZhaoMiing]

@djyde 欢迎回坑

[lotem]

「沒事幹」

[kokdemo]

那个logo上滚动的小红条好赞！

[ZhaoMiing]

@lotem 谢谢大神指正，Mac只带的输入法果然不靠谱。。。

[ZhaoMiing]

@kokdemo 谢谢

[ChanneW]

域名是个错别字

[ZhaoMiing]

@ChanneW prototype被注册了，所以就typo了

[Mutoo]

时间差那里有个小问题，如果浏览器暂停了绘制，很久后切回来，会出现一个非常大的 delta time ，这时候有必要对 dt 设定一个上限，以防止一些信赖时间差的物理模拟产生穿透。

[akfish]

1. requestAnimationFrame并不保证帧率固定在60Hz（或者其它常数），依赖于浏览器实现，有的机器上Chrome上帧率会比FF高，所以为了一致性，需要总是控制帧率。
2. 计时应该使用window.performance.now()
3. requestAnimationFrame套setTimeout的做法不推荐，requestAnimationFrame存在的原因就是setTimeout/setInterval不能提供可靠计时

[0x9397]

为什么再看about页面的时候，那个箭头指向的是post。。。改变窗口大小还是指着post。。。

[ChanneW]

@ZhaoMiing typo挺好的

[kookxiang]

我的 HTML5 播放器是用 setInterval 计算歌词滚动位置，然后 requestAnimationFrame 负责让歌词平滑滚动过去

[ZhaoMiing]

@Mutoo 感谢提示，看了下github上面的例子确实是要有一个delay时间判断的。
@akfish 这里的setTimeout应该不是用来重绘动画的，而是用来执行重复的逻辑的。不过这样也确实不能提供可靠计时，估计作者使用setTimeout嵌套也只是一种权宜之计。

[ZhaoMiing]

@0x9397 那个三角形不是指当前页面。
@kookxiang 这样很好啊。

[0x9397]

@ZhaoMiing 我知道不是指的当前页面。。。只是觉得既然有指向性。。。就强迫症的认为应该有点指向意义。。。

[tamamaxox]

@djyde metoo