NEWS TOPIC
PROJECT

L O A D I N G

SNS

MENU

CLOSE

C O N T A C T

1
EN

HELLO!

JP

CONTACT

お問い合わせ内容を入力し、プライバシーポリシーをご確認の上、NEXT STEPSUBMITボタンより確認画面へ進んでください。

  • ✳︎マークは必須項目となります。
  • お問い合わせの内容に合わせ、詳細をご連絡ください。
  • 営業日、三日以内に担当者より返信させていただきます。
  • 営業目的や人材紹介目的の場合、返信を控えさせていただきます。

B A C K

✳︎
お問い合わせ内容を選択してください
お仕事のご依頼
ステイフルライフストアへのお問い合わせ
✳︎
項目を選択してください
ブランディング依頼
ウェブ制作依頼
グラフィックデザイン依頼
その他スポットでのご依頼
この項目は入力できません
✳︎
✳︎
✳︎
✳︎
プライバシーポリシーに同意しました。
  • STEP01
  • STEP02
  • STEP03

C L O S E

B A C K

S U B M I T

N E X T S T E P

CONTACT COMPLETE

お問い合わせありがとうございます。
お問い合わせ内容を確認させていただき次第、担当者より返信させていただきます。

THANK YOU
CLOSE

NEWS

BLOG Feb.15.2018

Web Animations APIの触り

by Staff

SHARE

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

Web Animations APIとは

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

  1. CSSTransition
  2. CSSAnimations
  3. JavaScriptによるDOM操作
  4. 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;}
}

次に、オプション機能で値を選択します。

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の触りについてのまとめでした。

それでは。

by Staff

SHARE

OTHER ARTICLES

TOPIC
Jul.17.2020

カタログができました

by UNIEL

TOPIC
Aug.10.2018

夏期休暇のお知らせ

by Mami Ohtani

TOPIC
Jan.04.2018

あけましておめでとうございます。

by Staff

SCROLL TO
CLICK TO
N E W S   A L L
TAP TO NEWS ALL