【翻译】CSS Animations VS the Web Animations API：案例学习

原文地址：CSS Animations vs the Web Animations API: A Case Study

---

May 03, 2017 css, javascript

上周我写了我如何使用CSS来制作bitsofcode logo动画。之后，有人建议我应该对CSS动画与Web Animations API做个对比，所以，这篇文章就是。

Web Animations API介绍

和上周一样，在开始之前我先对Web Animations API做下介绍。Web Animations API向开发者提供了通过JavaScript直接操作浏览器的动画引擎的方法。

创建动画

为了使用Web Animations API创建动画，我们需通过Element.animate()函数，该函数接受两个参数：keyframes和options。

element.animate(keyframes, options);

关键帧 keyframes

关键帧对象相当于动画中事件的时间轴，这里有两种方式来创建关键帧对象。为了列举这两种方式，这里以grow动画为例，该动画将会将元素的尺寸放大两倍。如下是通过CSS的@keyframes来声明：

@keyframes grow {
    0% {
        transform: none;
    }
    100% {
        transform: scale(2);
    }
}

第一种方式

写关键帧的第一种方式是单个对象形式。对象的每个key代表了我们想要动画的CSS属性。每一个key的值都是一个由动画过程中的CSS值组成的数组。数组中的每个值表示动画时间轴中的一个点。

const growKeyframes = {
    transform: ['none', 'scale(2)']
}

第二种方式

写关键帧的第二种方式是写一个数组。数组中的每一个项表示动画时间轴中的一个点，在这个点上我们可以定义应用在该点上的每一条CSS属性与值。

const growKeyframes = [
    { transform: 'none' },
    { transform: 'scale(2)' }
]

默认情况下，时间轴上的每个点之间的空间是相等的。例如，如果在时间轴上我有5个点，则每个点之间的动画过渡时间都会是20%。

如果我们想自己改变过渡时间，可以使用上述中的第二种定义方式中的offset属性。该属性接受一个数字：0-1之间，表示该点动画应该在什么时候开始，例如，下面的CSS动画：

@keyframes alteredGrow {
    0% { transform: none; }
    10% { transform: scale(1.5) }
    30% { transform: scale(1.9) }
    100% { transform: scale(2) }
}

为了说明时间轴上的不相等的空间，我可以通过下面的方式书写：

const alteredGrowKeyframes = [
    { transform: 'none' },
    { transform: 'scale(1.5)', offset: 0.1 }
    { transform: 'scale(1.9)', offset: 0.3 }
    { transform: 'scale(2)' }
]

选项 options

传递给animate()函数的第二个参数是一个带有动画选项信息的对象。如果我们使用CSS动画，这个对象允许我们指定应用于CSS动画的所有的属性。这里可以定义九个选项。

选项	描述
id	动画的唯一索引
delay	定义动画开始前的延迟时间。和CSS属性animation-delay一致
duration	定义动画一个周期需要的时间。和CSS属性animation-duration一致
iterations	定义动画重复的次数。和CSS属性animation-iteration-count一致
direction	定义动画在时间轴的哪个方向运行。和CSS属性animation-direction一致
easing	定义动画每一步之间如何过渡。和CSS属性animation-timing-function一致
fill	定义动画在播放前或后，动画效果是否可见。和CSS属性animation-fill-mode一致
endDelay	当一个动画结束后，到下一个动画开始，中间停留的时间，毫秒
iterationStart	定义动画的循环从哪里开始，可以是0~1，0.5表示动画从中间开始运行

举个例子，让我们开始另一个grow动画。利用CSS动画，我们可以让动画持续3秒、无限循环、改变运行方向并且等待2秒后执行，如下是声明代码：

.animated-element {
    animation-name: alteredGrow;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-delay: 2s;
}

使用Web Animations API，我们可以通过如下选项来达到相同的效果。

const alteredGrowOptions = {
    duration: 3000,
    iterations: Infinity,
    direction: 'alternate',
    delay: 2000
}

使用动画

通过元素的调用的animate()函数可以将动画应用到该元素上，并且将关键帧（keyframes）和选项（options）作为参数。

const element = document.querySelector('.animated-element');
element.animate(alteredGrowKeyframes, alteredGrowOptions);

一旦函数被调用，动画就会自动的开始运行。然而，我们可以通过play()与pause()方法来开始与暂停动画。

const element = document.querySelector('.animated-element');
const myAnimation = element.animate(alteredGrowKeyframes, alteredGrowOptions);

myAnimation.pause();
myAnimation.play();

兼容性

动画bitsofcode Logo

和我的CSS动画一样，我从创建好的完整的动画中截取了一小段。下面是三个版本的对比：

创建时间轴

概括来说，如下是logo左侧部分的动画步骤（字母“bitso”中的o是开的，类似(）。

• 向左移动
• 回到中间
• 停留在中间（等待右边部分向右移动）
• 向左移动
• 旋转
• 慢慢增加旋转
• 回到没有旋转的位置
• 回到中间

基于上述步骤，这是我制作的左边部分的时间轴

下面是基于该时间轴利用Web Animation API创建的关键帧对象，具有时间轴上的每一步的样式规则。

const logoSectionLeftKeyframes = [
  { transform: 'none' },
  { offset: 0.125, transform: 'translateX(-15px)' },
  { offset: 0.25, transform: 'none' },
  { offset: 0.5, transform: 'none' },
  { offset: 0.625, transform: 'translateX(-15px)' },
  { offset: 0.67, transform: 'translateX(-15px) rotate(-10deg)' },
  { offset: 0.72, transform: 'translateX(-15px) rotate(-10deg)' },
  { offset: 0.82, transform: 'translateX(-15px) rotate(-15deg)' },
  { offset: 0.875, transform: 'translateX(-15px)' },
  { transform: 'none' }
];

因为用到了offset属性，所以这里我决定使用数组形式的keyframes。

设置参数

每一部分的参数都很简单，每个循环周期时长3秒，并且无限循环。

const logoSectionOptions = {
  duration: 3000,
  iterations: Infinity
};

应用动画

使用Web Animation API来应用动画要比CSS动画有些繁琐。这是因为我只想当动画被hover或者focus的时候来运行。正如我所说的，默认情况下，Web Animation会在创建完之后立即运行。

为了解决这个问题，我不得不创建完动画后立即暂停，然后增加事件监听器，当事件触发，动画就可以播放或者暂停。另外，因为我要应用动画到每个字符上，那就必须要同时处理几个动画，下面是执行过程：

// 存储所有动画的数组
const animations = [];

function playLogoAnimation() {
  animations.map((animation) => animation.play())
}

function pauseLogoAnimation() {
  animations.map((animation) => {
      animation.pause();
      animation.currentTime = 0; // 重置动画为初始状态
  })
}

function createLogoAnimation() {
  const logoSectionLeftEls = Array.from( document.querySelectorAll('.logo-section-left') );
  logoSectionLeftEls.forEach((el) => animations.push(el.animate(logoSectionLeftKeyframes, logoSectionTiming)))

  // Animation for middle and right sections here …

  // 一旦创建完动画就立即停止
  pauseLogoAnimation();
}

createLogoAnimation();

// 时间监听器来开始或暂停动画
const siteTitleLink = document.querySelector('.site__title a');
siteTitleLink.addEventListener('mouseover', playLogoAnimation);
siteTitleLink.addEventListener('mouseout', pauseLogoAnimation);
siteTitleLink.addEventListener('keyup', (e) => {
  if ( e.keyCode === 9 ) playLogoAnimation();
});
siteTitleLink.addEventListener('keydown', (e) => {
  if ( e.keyCode === 9 ) pauseLogoAnimation();
});

下面是全部动画演示：

CSS Animations VS the Web Animation API

和其他一切一样，无论使用CSS还是JavaScript动画，取决于动画的细节。作为基本规则，CSS动画应该用在小型、和UI相关的动画，比如提示框（tooltip）。Web Animation API应该用作需要微调的更高级的效果。这就是我对这两种动画方式的比价。

性能

CSS vs JavaScript动画的性能会根据我们正在动画的属性而有很大的不同。通常，建议只对transform或者opacity属性进行动画，因为这些动画会在与浏览器主线程不同的线程上执行。

改变transform并不会触发任何几何形状的改变或渲染，性能会很好。这意味着操作可能在GPU的帮助下由合成器线程执行。

-- CSS Triggers

由于我的动画只用了transform属性，所以我不能看到这两种方案之间明显的性能差异。通过火狐的开发者工具，我测量了两个动画的帧率，获得了两个相同的帧率：60FPS，即使Main Thread Animation enabled为Off。

我无法找到更多的方式去测量两种方案的性能。如果你知道其他更好的方法，可以在下面留下评论。

开发者经验

在这个例子中，我个人发现CSS动画要比Web Animation API操作简单，更容易使用，主要是因为使用后者来播放暂停动画需要额外的工作。如果我是在做一个更复杂的动画比如一个游戏，Web Animation API会是一个一定要走的路。但是在这个例子中，我认为使用CSS动画更容易实现。