JavaScript是如何工作的:CSS和JS动画底层原理及如何优化它们的性能

摘要: 对比CSS和JS动画

Fundebug经授权转载,版权归原作者所有。

这是专门探索 JavaScript 及其所构建的组件的系列文章的第 13 篇。

如果你错过了前面的章节,可以在这里找到它们:

概述

你肯定知道,动画在创建引人注目的 Web 应用程序中扮演着重要的角色。随着用户越来越多地将注意力转移到用户体验上,商户开始意识到完美、愉快的用户体验的重要性,结果 Web 应用程序变得越来越重,并具有更动态交互的 UI。这一切都需要更复杂的动画,以便用户在整个过程中更平稳地进行状态转换。今天,这甚至不被认为是什么特别的事情。用户正变得越来越挑剔,默认情况下,他们期望的是具有高响应性和交互性的用户界面。

然而,界面的动画化并不一定是简单的。什么是动画,什么时候该用动画,动画应该有什么样的视频效果,这些都是棘手的问题。

JavaScript 和 CSS 动画比较

创建 Web 动画的两种主要方法是使用JavaScript和 CSS。选择哪种没有对或错,这完全取决于你想要达到的效果。

CSS 动画

用CSS制作动画是让元素在屏幕上移动的最简单方法。

这里将从如何让元素在 X 和 Y 轴上移动 50px 简单示例开始,通过持续 1 秒的 CSS 过渡来移动元素。

.box {
-webkit-transform: translate(0, 0);
-webkit-transition: -webkit-transform 1000ms;

transform: translate(0, 0);
transition: transform 1000ms;
}

.box.move {
-webkit-transform: translate(50px, 50px);
transform: translate(50px, 50px);
}

当元素加上 move 类时,改变 transform 的值然后开发发生过渡效果。

除了转换持续时间外,还有 easing 属性,这实际上就是动画的运动速度方式,该参数会在之后详细介绍。

如果像上面的代码片段一样,创建单独的 CSS 类来实现动画,当然也可以使用 JavaScript 来切换每个动画。

如下元素:

<div class="box">
Sample content.
</div>

然后,使用 JavaScript 来切换每个动画。

var boxElements = document.getElementsByClassName('box'),
boxElementsLength = boxElements.length,
i;

for (i = 0; i < boxElementsLength; i++) {
boxElements[i].classList.add('move');
}

上面的代码片段是为所有包含 box 类的元素为其添加 move 类以触发动画。

这样做可以为你的应用提供良好的平衡。 你可以专注于使用 JavaScript 管理状态,只需在目标元素上设置适当的类,让浏览器处理动画。 如果沿着这条路线前进,你可以在元素上监听 transitionend 事件,但前提是放弃旧版 Internet Explorer 的支持:

监听 transitionend 触发的事件如下所示:

var boxElement = document.querySelector('.box');
boxElement.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
// Handle the transition finishing.
}

除了使用 CSS 过渡之外,你还可以使用 CSS 动画,CSS 动画可以让你更好地控制单独的动画关键帧,持续时间以及循环次数。

关键帧用于指示浏览器 CSS 属性在给定时间点上应有的 CSS 属性,然后填充空白。

来个简单的例子:

.box {
/* 动画的名字 */
animation-name: movingBox;

/* 动画的持续时间 */
animation-duration: 2300ms;

/* 动画的运行次数 */
animation-iteration-count: infinite;

/* 设置对象动画在循环中是否反向运动的方法 */
animation-direction: alternate;
}

@keyframes movingBox {
0% {
transform: translate(0, 0);
opacity: 0.4;
}

25% {
opacity: 0.9;
}

50% {
transform: translate(150px, 200px);
opacity: 0.2;
}

100% {
transform: translate(40px, 30px);
opacity: 0.8;
}
}

效果示例: https://sessionstack.github.i…

使用CSS动画,你可以独立于目标元素定义动画本身,并使用 animation-name 属性来选择所需的动画。

CSS 动画在某种程度仍然需要加浏览器前缀的,在 Safari、Safari Mobile 和 Android 中都使用了 -webkit。 Chrome、 Opera、Internet Explorer 和 Firefox 都不需要添加前缀。许多工具可以帮助你创建所需 CSS 的前缀,这样就不需要在源文件中带样式前缀。

JavaScript 动画

和 CSS 过渡或者 CSS 动画相比,使用 JavaScript 创建动画更加复杂,但它通常为开发人员提供了更强大的功能。

JavaScript 动画是作为代码的一部分内联编写的。你还可以将它们封装在其他对象中。以下为用 JavaScript 来实现最开始的 CSS 过渡的代码:

var boxElement = document.querySelector('.box');
var animation = boxElement.animate([
{transform: 'translate(0)'},
{transform: 'translate(150px, 200px)'}
])

animation.addEventListener('finish', function() {
boxElement.style.transform = 'translate(150px, 200px)';
})

默认情况下,Web 动画仅修改元素的展示效果。 如果要将对象停留在移动后的位置,则应在动画完成时修改其基础样式。 这就是为什么在上面的例子中监听 finish 事件,并将 box.style.transform 属性设置为 translate(150px, 200px),该属性值和 CSS 动画执行的第二个样式转换是一样的。

使用 JavaScript 动画,你可以在每一步完全控制元素的样式。 这意味着你可以放慢动画速度,暂停动画,停止它们,翻转它们,并根据需要操纵元素。 如果你正在构建复杂的面向对象的应用程序,这尤其有用,因为你可以正确地封装你想要的动画行为。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具Fundebug

Easing 定义

自然过渡效果会让你的用户对你的 Web 应用程序感觉更舒服,从而带来更好的用户体验。

当然,没有任何东西从一个点到另一个点线性移动。 实际上,当事物在我们周围的物理世界中移动时,事物往往会加速或减速,因为我们不是在真空中,并且有不同的因素会影响这一点。 人类的大脑会期望感受这样的移动,所以当为网络应用制作动画的时候,利用此类知识会对自己会有好处。

以下是一些术语需要了解一下:

  • ease-in — 相对于匀速,开始的时候慢,之后快
  • ease out — 相对于匀速,开始时快,结束时候间慢
  • ease-in-out — 相对于匀速,开始和结束都慢)两头慢

Easing 关键字

CSS 过渡和动画允许你选择要使用的 easing 类型。 不同的关键字会影响动画的 easing,你也可以完全自定义 easing 方法。

以下为可以选择用来控制 easing 的 CSS 关键字:

  • linear
  • ease-in
  • ease-out
  • ease-in-out

让我们深入来了解一下这几个兄弟,并看它们各自展示的效果是怎么样。

Linear 动画

easing 方法的的默认为 linear,以下为 linear 过渡效果的图示:

随着时间增加,值等比增加,使用 linear 动效,会让动画不自然,一般来说,避免使用 linear 动效。

以下是如何实现简单的线性动画: