javascript - 使用纯 javascript 创建动画或效果的正确方法是什么?

标签 javascript jquery animation

我想知道在 javaScript 中使用 setTimeOutsetInterval 制作动画的正确方法是什么(我的意思是动画的循环部分,在特定的之后循环时间)?

如果这是正确且唯一的方法,那么绿 socks (Gsap) 和其他 JS 动画库使用 setTimeOutsetInterval 来做特定时间的动画? jQuery 中的 animate 方法怎么样?

更新

我正在使用 GreenSock Animation Platform (Gsap)对于动画,它提供了非常快速和流畅的动画。我只是问这个问题,想弄清楚他们如何非常流畅和快速地处理动画?

正如我在问题中提到的,有一些函数,如 setTimeOutsetInterval 用于处理动画,还有另一个函数名称是 requestAnimationFrame() 与 timeOut 和 Interval 函数不同,用于制作没有间隙的动画。

那么根据这些定义,像 green sock 和 velocity.js 这样的快速动画库是如何处理它们的动画的呢?

谢谢。

最佳答案

我创建了一个移动设备,其中包含一些用于 Light and Sound Mind Machine 的动画。

我使用了 setTimeout,但效果不佳。您必须处理延迟才能使其流畅。

相反,我使用了 requestAnimationFrame() 并在我的 JavaScript 中处理了 FPS(每秒帧数)并执行了动画。您可以依靠 requestAnimationFrame 为您提供所需的性能,其中 settimeout 或 interval 会有一些差距。

https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

不要为动画使用 jQuery(除非它非常简单),它很慢,而且在 Android 上无法使用。

相反...使用Velocity.js 来处理其他一些动画。它像丝绸一样光滑。

Velocity 是一个动画引擎具有与 jQuery 的 $.animate() 相同的 API无论是否使用 jQuery,它都适用。它速度极快,并且具有彩色动画、变换、循环、缓动、SVG 支持和滚动功能。它是 jQuery 和 CSS 转换的最佳组合。

http://velocityjs.org/

关于javascript - 使用纯 javascript 创建动画或效果的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42331747/

相关文章:

javascript - 如何使用动态生成的文件名数组在 Grunt 中运行任务?

javascript - 使用源映射还原 JavaScript 缩小

javascript - 如何修复具有特殊字符的 JSON 字符串中的验证错误

javascript - Jquery div 正确打开/关闭隐藏的 div

javascript - 加载 ajax 加载的 div 的 innerHtml

angularjs - 阻止 Angular 动画在 ng-show/ng-hide 上发生

导航回该 View 时 Swift 动画不会重置

javascript - PLupload 过滤器 - 未触发 FilesAdded 事件

从中心水平翻转(旋转)SVG 的 CSS 仅适用于图像

php - 使用 Ajax 创建的复选框