FEB.15.2018
SOCIAL NETWORK SHARE :

Web Animations APIの触り I Tried Web Animations API

こんにちは、ディベロッパーの後藤です。

最近Web Animations APIの記事をちらほら見る機会が増えてきましたので、少し触ってみた感想などを書いてみようと思います。

Web Animations APIとは

ブラウザ上でアニメーション表現を実現する方法は複数あり、それぞれにメリット、デメリットがあり、それぞれの書き方を学ぶ必要がありました。

  • CSSTransition
  • CSSAnimations
  • JavaScriptによるDOM操作
  • JavaScriptからの制御を容易にしてくれるライブラリの使用(TweenMaxやVelocity)

Web Animation APIとは各仕様のメリットを吸収・統一し、ブラウザ上でアニメーションを実現するための知識を下げてくれる、現在策定中の便利なAPIになります。

※2018年2月1日現在のWeb Animations API対応状況は下記参照です。

https://caniuse.com/#feat=web-animation

実装方法

//対象となるDOMを取得
let element = document.querySelector('.element');

//第一引数にはアニメーションさせたい状態を配列として渡します
//第二引数にはoptionの指定です。省略するdurationを渡します。
let animationObject = element.animate([
  { opacity: 0, offset: 0},
  { opacity: 0.5, offset: 0.3},
  { opacity: 1 offset: 1}
], 3000);

offsetはCSSの@keyframesでいう%の記述になります。 CSSに書き換えて見ると下記のようになります。

@keyframes Animation {
    0% {opacity: 0;}
    30% {opacity: 0.5;}
    100% {opacity: 1;}
}

optionsで指定できる値。

let options = {
  iterations: Infinity,
  iterationStart: 0,
  delay: 0,
  endDelay: 0,
  direction: 'alternate',
  duration: 700,
  fill: 'forwards',
  easing: 'ease-out'
}

細かなoptionの内容や仕様は下記リンク先などを読んでみてください。

W3C Web Animations
https://www.w3.org/TR/web-animations-1/

さすがにW3Cは長いという方には、こちらなどが簡潔にまとめられています。

CSSAnimations vs Web Animations API
https://css-tricks.com/css-animations-vs-web-animations-api/

タイムラインによる制御

CSSAnimationsのキーフレーム(@keyframes)やfromToでは出来なかった、タイムラインの制御(再生、停止、逆再生)をすることができます。

DevToolでアニメーションしている要素を見てみると、styleの上書きなどは行っていないことがわかります。

所感

少し触ってみた段階ですが、

  • ブラウザ標準のためライブラリの使用はしなくて良い(現在はポリフィルが必要)
  • CSSAnimationではできないタイムラインによる制御が出来る
  • SVGに対応している

普段アニメーションを実現する際はCSS、 requestAnimationFrame、TweenMaxなどを併用して実装しており、ブラウザが対応し始めたら必ず要件や表現によって使い分けができるのかなといった印象でした。
スクロールやリサイズを行うobservableAPIなどもそうですが、ブラウザ自体がよりリッチなAPIが増えてきているので、便利なものは上手く利用していきたいと思います。

以上がWeb Animations APIの触りについてのまとめでした。

それでは。

Hello everyone, I am Goto, the developer of UNIEL.

I have been coming across with articles about Web Animations API these days, so I decided to write about my review on it here as well.

What Is Web Animations API?

There are several ways to implement animation on browser. Each of them have their pros and cons, so we needed to learn how to write structures with each methods.

  • CSSTransition
  • CSSAnimations
  • JavaScript DOM
  • JavaScript Library (eg. TweenMax and Velocity)

Although it is still at its experimental stage, Web Animation API is a new, easy way to describe animation and is a combination of the advantages of the conventional ways mentioned above.

※You can check the browser compatibility in the link below (last updated on 1 Feb, 2018.)

https://caniuse.com/#feat=web-animation

How To Use It

//Select the target DOM
let element = document.querySelector('.element');

//Specify how you want to move animation in 1st argument.
//Specify options in 2nd argument.You set the duration to offset here.
let animationObject = v([
  { opacity: 0, offset: 0},
  { opacity: 0.5, offset: 0.3},
  { opacity: 1 offset: 1}
], 3000);

offset is % for @keyframes CSS. Here is an equivalent CSS Keyframe animation for comparison’s sake.

@keyframes Animation {
    0% {opacity: 0;}
    30% {opacity: 0.5;}
    100% {opacity: 1;}
}

Then choose the value with option function

let options = {
  iterations: Infinity,
  iterationStart: 0,
  delay: 0,
  endDelay: 0,
  direction: 'alternate',
  duration: 700,
  fill: 'forwards',
  easing: 'ease-out'
}

For more detailed examples, you can check out the website below;

W3C Web Animations
https://www.w3.org/TR/web-animations-1/

Too long to read everything on there? There is a short version available here;

CSSAnimations vs Web Animations API
https://css-tricks.com/css-animations-vs-web-animations-api/

Control Timeline

You are able to control timeline (play, pause, reverse) which you can not do with @keyframes and fromTo with Web Animations API.

I checked the elements for the animation with DevTool. You can see how the style remains unchanged.

Summary

I’ve only had a few experiments with this tool so far, but these are the advantages that I’ve found;

  • No need to use library as it works well with the default features of the browser (Although polyfill is still needed at this stage.)
  • Capable of controlling timeline which CSSAnimation cannot do
  • Supports SVG

It might be useful to use along with other methods such as CSS, requestAnimationFrame and TweenMax (if they have the browser support.)

Like Web Animations API and observableAPI (API to control scroll and resize) for examples, there are many APIs coming to browsers. Using some of them would surely be helpful.

So yeah, this is my overall impression on Web Animations API.

Bye!

 FEB.15.2018
SOCIAL NETWORK SHARE :
CLOSE