Web Animations APIのシンプルな使い方。

const options = {
    duration:1000,「「３//所要時間」」
    iterations:"Infinity"「「３//繰り返し」」
};

const keyframes = [
    {property:"値"},
    {property:"値"}
];

element.animate(keyframes,options);

JavaScript制御のアニメーション。

こんにちは、「ふ」です。

Web Animations APIとは、CSSやSVGのアニメーションをJavaScriptを使って操作する仕組みです。その１番のメリットは、キーフレームやタイミングに関する内容は配列やオブジェクトリテラルによって記述しているため、外部から自由に制御ができるという点です。

「ふ」はこれまでSVGやCSSを使ったアニメーションの実装について紹介してきました。が、CSSやSVG単体ではその制御が満足にできない場合が何度かありました。

〜そのときに助けとなったのが、今回紹介するWeb Animations APIです。

シンプルにいきます。

しかしながら..Web Animations APIは複雑なオブジェクトの組み合わせで形成されており、記述方法も何種類か用意されています。
そのすべてをお話しするとなると膨大な量となってしまうため「サクッと使ってみたい」と思っている方にとっては、うんざりさせてしまうかもしれません💧

そこで。当記事では1番お手軽..CSSアニメーションに似ている定義方法をつかって、シンプルにWeb Animations APIを実装する方法について紹介していきます。

WAAPIの構成。

さっそくですが、Web Animations APIを使って⬇︎の長方形(#sikaku)をアニメーションさせています。

コードを見てみましょう。

「「３//要素を取得」」
const sikaku = document.getElementById("sikaku");

「「３//タイミングオプション」」「「１　..@1@」」
const options = {
    duration:2000,　「「３//所要時間」」
    iterations:"Infinity"　「「３//繰り返し」」
};

「「３//キーフレーム」」「「１　..@2@」」
const keyframes = [
    {transform:"translateX(0%)"},
    {transform:"translateX(800%)"}
];

「「３//アニメーション実行」」「「１　..@3@」」
sikaku.animate(keyframes,options);

Web Animation APIの実装は、以下の３つで構成されています。

　@1@ タイミングオプション（アニメーションの所要時間などを指定）

　@2@ キーフレーム（ある地点における要素の状態）

　@3@ animateメソッド（アニメーションを発火）

@1@@2@でタイミングに関する内容とキーフレームを用意しておき、@3@のanimate( )メソッドの引数で呼び出してアニメーションを実行しています。

ちなみにCSSアニメーションで同じ実装をすると、⬇︎のように。

#sikaku {
    animation:sikaku 2s infinite;
}

@keyframes sikaku {
    from {
        transform:translateX(0%);
    }
    to {
        transform:translateX(800%);
    }
}

CSSアニメーションでは、キーフレームとanimationプロパティを指定すると即座にアニメーションは実行されてしまいます。

「「３//WAAPIでのアニメーション実行」」
sikaku.animate(keyframes,options);

一方でWeb Animations APIはアニメーション実行のメソッドが独立しているため、発火のタイミングを自由に制御することができます。

CSSアニメーションで発火をコントロールするとなると、classList.add( )やclassList.remove( )を駆使して作り込む必要がありました💦

Web Animations APIであればanimate( )メソッド１行の記述で済むので、とても簡単です ♪


それでは、Web Animations APIの構成要素となる@1@~@3@の基本的な内容・記述方法についてみていきましょう。

タイミングオプション。

let options = {};

タイミングオプションは、アニメーションの時間や繰り返しに関する内容を指定する場所です。
変数/定数名は任意です。内容の記述はオブジェクトリテラル形式となっているため、

let options = {
    duration:500,
    easing:"ease-in"
};

⬆︎のように「プロパティ名:値」のペアをカンマ「 , 」で区切って表記していきます。
プロパティ名については文字列をそのまま記述することができますが、値が文字列の場合はクオテーション「 " 」or「 ' 」で囲む必要があります。



基本的なプロパティについて、初期値と値を紹介しておきます。

duration(アニメーションの所要時間)

duration:2000

１回のアニメーションあたりの所要時間を指定します。 初期値は「0」なので、この値を具体的に指定しないとアニメーションが動きません。最低限必要なプロパティです。

CSSアニメーションの場合と違い、値はms単位での指定です。
⬆︎では「duration:2000」としているので、２秒ということですね。

iterations（繰り返し）

iterations:5

iterationsは、アニメーションの繰り返し回数です。初期値は「1」となっています。
決まった回数だけ繰り返したい場合には、数値で指定しましょう。

iterations:"Infinity"

また無制限に繰り返したい場合には「Infinity」の文字列で指定します。頭文字の「I」が大文字になっている点に注意してください。

direction(再生方向)

direction:"normal"「「２/」」"reverse"「「２/」」"alternate"「「２/」」"alternate-reverse"

directionは、アニメーションの再生方向。
CSSアニメーションのanimation-directionプロパティに該当します。

初期値は「normal」で、フツーに順方向に再生されます。「reverse」に指定すると、逆再生。キーフレームを逆から再生させます。

３つ目と４つ目の値、はアニメーションを繰り返し行うときに使用する指定です。

let options = {
    duration:1000,
    iterations:"Infinity",
    direction:"「「１alternate」」"
}；

⬆︎は「alternate」を指定したもの。実際にplayボタンを押して観察してみてください。

「alternate」を指定すると、順方向→逆方向の再生を交互に繰り返します。「alternate-reverse」は、逆方向→順方向再生を交互に行います。

fill（開始前/終了時の状態）

fill = "none"「「２/」」"forwards"「「２/」」"backwards"「「２/」」"both"

fillはアニメーション終了時の状態や、開始前の状態を指定するプロパティで、CSSアニメーションのanimation-fill-modeに該当します。初期値は「none」となっています。

はじめの２つは、終了時の状態を指定します。

・none(初期値)
アニメーション終了後、規定値の状態に戻る

・forwards
アニメーション終了後、終了時の状態を保持

後半の「backwards」と「both」は、アニメーションにdelayが掛かっているときの「開始前の状態」をどのように保つか、を指定します。
詳しくはanimation-fill-modeについての記事⬇︎を参考にしてください。

CSSアニメーション09、animation-fill-mode。

〽️ アニメーション終了時の状態を維持したり。

easing（タイミング関数）

easing:"linear"「「２/」」"ease-in"「「２/」」〜その他いろいろ

easingはアニメーションの進捗度合いを指定するもので、CSSアニメーションのanimation-timing-funcitionに該当します。
初期値は「linear（平均的に進捗する）」となっており、ここがCSSアニメーションとは違う点です（CSSの初期値は「ease」）。

指定できる値ですが、「ease」「ease-out」などの予め用意されている関数のほか、steps（段階的変化）やcubic-bezier（ペジェ曲線の制御点を指定することでカーブを表現する）ものがあります。

くわしくはCSSアニメーション、timing-functionについての記事⬇︎を参考にしてください。

CSSアニメーション05、animation-timing-function。

〽️ 初期値は一定にあらず。

CSSアニメーション06、cubic-bezier。

〽️ 進捗を任意にコントロール。

CSSアニメーション07、steps( )でコマ送り動画。

〽️ timing-functionの隠し玉。

他にも色々と。

上記で紹介した５つのプロパティを使えば、簡単なアニメーションの実装には事足りるでしょう。長くなるので詳しい説明は省略しますが、ほかにも以下のようなプロパティが用意されています。

・delay
アニメーション開始を遅らせたいとき、その長さをms単位で指定。

CSSアニメーション04、animation-delay。

〽️ １つのキーフレームで時間差攻撃。

・endDelay
アニメーション完了後に次の操作を遅らせたい際、delayをms単位で指定。

・iterationStart
アニメーションを繰り返す場合、通常だとキーフレームの最初から繰り返されるのですが、このプロパティは「キーフレームのどの部分から繰り返しを行うか」を指定することができます。

・composite
アニメーションを複数施した場合、その効果をどのように合成するかを指定。

・iterationComposite
アニメーションを繰り返す場合、変化の値を蓄積するかどうかを選択できます。

・preudoElement
擬似要素にアニメーション効果を施したい場合に使用。

CSSアニメーションを使っている限りでは目にすることのないプロパティもたくさん存在しています。
今後これらのプロパティについても、具体的な使い方を紹介していく予定です。

キーフレーム。

キーフレームはアニメーション進捗中、各地点でのプロパティの状態を指定します。これについてはCSSアニメーションを使っている方ならお馴染みですね。
キーフレームの記述は、もちろん順序が厳密でなくてはいけません。なのでWeb Animations APIにおいては配列形式で記述します。

let keyframe = [
    {プロパティ:値},
    {プロパティ:値}
];

配列なので角括弧で全体を囲んで記述します。そして内部要素の１つ１つが、その時点での状態を示しています。
「プロパティ：値」のオブジェクトリテラル形式で指定しましょう。

複数のプロパティを変化させる。

let keyframe = [
    {プロパティ:値,プロパティ:値},
    {プロパティ:値,プロパティ:値}
];

もちろん２種類以上のプロパティを変化させることもできます。
その際はカンマ「,」で区切って記述するようにしましょう。

キーフレームの自動割り付け。

キーフレームのサンプルを見てみましょう。
タイミングオプションで、duration（所要時間）は２秒としています。

let keyframes = [
    {transform:"translateX(0%)"},
    {transform:"translateX(250%)"},
    {transform:"translateX(500%)"}
];

コードをみて気付いたかもしれません。


CSSアニメーションのときと違い、Web Animations APIのキーフレームは「0%」「100%」のように変化のブレークポイントを記述しなくても動作します。これは、ブラウザがキーフレーム要素の数に応じて自動的にブレークポイントを割り付けてくれる仕組みになっているからです。

いま、キーフレームの要素を３つ記述しました。そうすると、

　１つ目：0%の状態
　２つ目：50%の状態
　３つ目：100%の状態

というように、自動割り付けが行われます。
もしキーフレームの要素が２つだった場合には、それぞれ「0%」「100%」と判断されます。

実際のアニメーションの様子⬆︎（見やすいよう、繰り返しさせています）。
キーフレームが0%→50%→100%と均等に振り分けられているのが観察できます。

offsetプロパティ。

もしキーフレームを自動割り付けではなく、独自のものにカスタマイズしたい場合。
そのときはoffsetプロパティを使いましょう。

let keyframes = [
    {transform:"translateX(0%)"},
    {transform:"translateX(250%)",「「１offset:0.8」」},
    {transform:"translateX(500%)"}
];

offsetプロパティは⬆︎のように、各地点での状態を表すオブジェクトの中に続けて記述します。

offsetプロパティは、０〜１の範囲で指定します。
ここでは２つ目のオブジェクトに「offset：0.8」としました。すると１つ目と３つ目のキーフレームは自動割り付けで「0%」「100%」と判断され、２つ目のキーフレームは「80%地点での状態」という扱いになります。

このキーフレームでアニメーションさせたのが⬆︎です。
先ほどは均等に移動していたものが、80%の地点から急激に加速するようになりました。

アニメーション発火。

「「３const options = {....}
const keyframes = [....]」」
elm.animate(keyframes,options);

アニメーションを実行させるには、animateメソッド１行でOK。引数でキーフレームとタイミングオプションを参照させます。

キーフレームやタイミングオブジェクトは巻き上げが行われないため、animateメソッドの前に記述している必要があります。

let ani = elm.animate(keyframes,options);

⬆︎のように変数や定数に格納する形でも、アニメーションが実行されます。
この場合変数/定数にはanimationオブジェクトが渡されるため、一時停止などの制御のほか、さまざまなメソッドが使えるようになります。

どんどん紹介していきます。

今回はWeb Animations APIのごくシンプルな実装方法を紹介してきました。最後までお読みくださり、ありがとうございます。

ここでお話しした内容は「基本形」に過ぎません。CSSやSVGのアニメーションをJavaScriptで扱うことの最大のメリットは「制御の自由度」です。キーフレームやタイミングオプションは配列・オブジェクトに格納されているので、動的に編集することができます。またアニメーションオブジェクトを使うことにより、さまざまなメソッドを利用することができるようになります。

今後もWeb Animations APIについての記事を追加、このページにリンクを貼っていきますので、くわしく知りたい方はぜひ参考にしてみてください。
ではまた〜 ♪