創建更加順滑的 JavaScript 動效

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3731 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

JavaScript

更加

乾

17 条回复 • 2014-09-02 11:22:23 +08:00

djyde

2014-08-30 13:48:52 +08:00

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

ZhaoMiing

2014-08-30 13:50:46 +08:00

@djyde 欢迎回坑

lotem

2014-08-30 14:16:00 +08:00

「沒事幹」

kokdemo

2014-08-30 14:17:16 +08:00

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

ZhaoMiing

2014-08-30 14:30:27 +08:00

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

ZhaoMiing

2014-08-30 14:30:35 +08:00

@kokdemo 谢谢

ChanneW

2014-08-30 14:31:42 +08:00

域名是个错别字

ZhaoMiing

2014-08-30 14:33:16 +08:00

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

Mutoo

2014-08-30 14:39:26 +08:00

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

akfish

2014-08-30 15:01:00 +08:00

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

0x9397

2014-08-30 15:15:35 +08:00

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

ChanneW

2014-08-30 15:24:32 +08:00

@ZhaoMiing typo挺好的

kookxiang

2014-08-30 19:31:08 +08:00

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

ZhaoMiing

2014-09-01 00:27:56 +08:00

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

ZhaoMiing

2014-09-01 00:28:52 +08:00

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

0x9397

2014-09-01 12:03:51 +08:00

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

tamamaxox

2014-09-02 11:22:23 +08:00

@djyde metoo