详解CSS和JS动画底层原理及如何优化它们的性能-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

javascript栏目介绍CSS和JS动画底层原理

相关免费学习推荐：javascript（视频）

概述

你肯定知道，动画在创建引人注目的 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 来切换每个动画。

如下元素：

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

然后，使用 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;
  }
}