深入研究一些使动画流畅的方法
如果不是更快的话，基于动画怎么可能与 CSS 过渡隐式相同呢？ Adobe 和不断发布的富媒体移动网站如何能够与本机应用程序的性能相媲美？
本文将介绍基于 DOM 的动画库（例如 .js 和 GSAP），以了解它们如何比 CSS 动画具有更高的性能。
让我们从基础开始：混淆与错误。 动画速度很快。 放慢速度。 为什么？ 因为——尽管它很强大——成为一个强大的动画引擎从来都不是一个设计目标：
需要注意的是，布局抖动在动画开始时是生涩的，垃圾收集是动画期间生涩的罪魁祸首，不使用 RAF 会导致低帧率。
实施示例
避免导致布局抖动的 DOM 查询和更新组合：
var currentTop, currentLeft; currentTop = element.style.top; element.style.top = currentTop + 1; currentLeft = element.style.left; element.style.left = currentLeft + 1; currentTop = element.style.top; currentLeft = element.style.left; element.style.top = currentTop + 1; element.style.left = currentLeft + 1;
更新后发生的查询会强制浏览器重新计算页面的计算数据（同时考虑新的更新效果）。 这会给动画带来很大的开销，动画只会在 16 毫秒的微小间隔内运行超时。
同样，实施 RAF 不必对现有代码库进行重大修改。 让我们将它与 RAF 的基本实现进行比较：
var startingTop = 0;
setInterval(function() {
element.style.top = (startingTop += 1/60);
}, 16);
function tick () {
element.style.top = (startingTop += 1/60);
}
window.requestAnimationframe(tick);
只需对代码进行一次更改，RAF 即可最大程度地提高动画性能。
CSS 过渡
CSS 转换通过将动画逻辑卸载到浏览器本身来实现超越，这可以有效地 (1) 优化 DOM 交互和内存消耗以避免卡顿（抖动），(2) 利用引擎的 RAF 原理，(3) 强制硬件加速（利用 GPU 的功能来提高动画性能）。
然而，现实情况是这些优化也可以直接在 . GSAP 多年来一直在这样做。 .js 是一种新的动画引擎，不仅利用了相同的技术，而且向前迈出了几步——我们很快就会探讨这些。
让我们面对现实吧，动画可以与 CSS 过渡竞争只是我们恢复计划的第一步。 第二步是认识到“动画实际上可以比 CSS 转换更快”。
现在我们来谈谈CSS变换的弱点：
相反，根据动画库可以确定相应的硬件来打开。 它们原生支持所有版本的IE浏览器，并且特别适合批量动画优化。
我的建议是，仅当您专门针对移动设备进行开发并且仅实现简单的动画时，才使用原生 CSS 转换。 在这种情况下，它是一个原生且有效的解决方案，允许您在样式表中实现所有动画逻辑，而无需添加额外的库，从而避免您的页面变得臃肿。 但是，当您设计复杂的 UI 或开发具有不同状态的 UI 的应用程序时，您应该使用动画库来保持动画流畅并使工作流程易于管理。 是一个在管理 CSS 转换方面做得特别好的库。
动画片
嗯，这在性能方面占据了上风。 但具体快多少呢？ 嗯 - 首先 - 足够快来构建可靠的 3D 动画示例，通常您只会看到 WebGL 的使用。 构建一个小型多媒体动画就足够了，通常你只会看到用Flash或After构建的它。 构建一个虚拟世界就足够了，通常你只会看到它的构建。
要与领先的动画库（当然包括（使用 CSS 渐变效果））进行直接比较，请返回 的文档。
问题仍然是：这种高水平的性能究竟是如何实现的？ 以下是基于可以执行动画的目标的优化的简短列表：
回想一下我们之前学到的关于布局抖动的知识，.js 利用这些最佳实践来缓存动画结束值，以便重用为后续动画起始值，从而避免重新查询 DOM 来获取元素的起始值：
$element
.velocity({ opacity: 1, top: "50%" })
.velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });
在上面的示例中，第二个调用知道它应该自动从 1 开始并在 50% 处达到顶部。
浏览器本身最终将能够执行许多相同的优化，但这样做将显着减少开发人员编码动画的方式数量。 因此，出于同样的原因，如果不使用 RAF（如上所述），浏览器不会强制对其进行优化，即使有很小的机会违反规范或偏离预期行为。
最后，我们对两个动画库（.js 和 GSAP）进行比较。
GSAP 是第一个展示 DOM 令人印象深刻的动画性能的动画库。 确实如此，但有一些缺点：
我的建议是当您需要精确控制时间（例如重画、暂停/恢复）和运动（例如贝塞尔曲线路径）时使用 GSAP。 这些功能在游戏开发和一些特殊应用程序中至关重要，但通常不需要在Web应用程序的UI中使用。
.js
引用GSAP的丰富功能并不意味着它在功能方面是轻量级的。 相反，压缩后仅 7kb，它不仅复制了 $.() 的所有功能，而且还将动画颜色、过渡、循环、效果、类动画和滚动都封装了进去。
简而言之，是的，UI和CSS渐变效果的最佳组合。
另外，从方便的角度来看，$.queue()方法在幕后使用（覆盖，大致意思是公共接口），这样$.()、$.fade()和$.delay是一样的() 函数无缝互操作。 另外，由于 $.() 的语法与 $.() 相同，因此您无需更改页面上的任何代码。
让我们快速浏览一下 .js。 在基本层面上，其行为类似于 $.()：
$element
.delay(1000)
.velocity({ top: "50%" }, 2000)
.fadeOut(1000);
在最高级的水平上，可以使用 3D 动画创建复杂的滚动场景，几乎只需两行简单的代码：
$element
.velocity("scroll", 1000)
.velocity({ rotateY: "360deg" }, 1000);
«
»
