javascript - javascript/jquery 网站动画的良好实践

标签 javascript jquery animation

我正在尝试构建一个包含很多移动元素的主页。我检查过其他具有相同移动动画并采用相同技术的网站,例如在 setInterval()移动内容。但不知道是否可以,在我的电脑上运行顺利。但我不知道这是否会对其他用户特别是速度慢的计算机造成任何损害。我这么说是因为当我在手机上打开该网站时,它很快就变热了。

我做了一个fiddle您可以在其中看到正在发生的简单 Action 以及功能执行的速度。 fiddle 仅显示 4 个元素,但主页有大约 10 个以上的元素在移动。

那么,在实现此类网站动画时,应该遵循哪些良好做法呢?

最佳答案

如果您的目标是旧浏览器,

setInterval 就可以了,但它不适用于动画。 Some browsers cap it to 4ms. Some won't slow down when the window is not focused ,因此它会消耗 CPU 周期,因此功耗 - 当您使用移动设备时效果不佳。

requestAnimationFrame ,一个针对动画优化的计时器。当窗口未聚焦时,动画会减慢或停止,其目标是以 60fps 进行绘制。

对于次要的非行为动画(风格,而不是行为),您可以执行 CSS animations instead 。 CSS 动画的一个好处是其中一些动画,尤其是 the ones that deal with 3D, are GPU accelerated ,使它们比您临时制作的 JS 动画更快、更流畅。

关于javascript - javascript/jquery 网站动画的良好实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20850309/

相关文章:

javascript - BufferGeometry 创建粒子 z 索引

ios - SceneKit 中的连续变形动画

javascript - : $(this. el).html 和 this.$el.html 有什么区别

javascript - PHP session 变量不通过 AJAX 调用持久化

internet-explorer - SVG 动画 : Isolating IE10 from other modern browsers with CSS3 media queries

Jquery "hide"无动画

javascript - React typescript ref 在条件渲染中返回 null

javascript - 如何仅记录多维数组中二级数组的元素

javascript - 在元素属性中使用用户输入是否安全?

javascript - 如何进行 Ajax update_attributes?