序文

前回の記事では、JS ネイティブアニメーションとベジェ曲線について詳しく理解しました。タイマーやアニメーションフレームに基づいて、要素のアニメーションの遅延を実現できます。この記事では、ブラウザーでの機能を共有します。強力なアニメーション API 、興味のあるお友達は、ぜひ読んでください。

導入

Web アニメーション API (略して WAAPI) は 2016 年に Web 標準の一部となり、その機能は前述のアニメーションよりもはるかに豊富であり、その中心的な概念はタイムラインとアニメーション効果です。アニメーション効果を定義、操作、管理するための強力なメソッドとプロパティのセットを提供します。

タイムライン (Timeline) は、WAAPI の中核となる概念の 1 つです。これは、実行中のすべてのアニメーションを管理および調整するグローバル時計のように機能します。開発者はタイムラインを通じて、アニメーションの再生、一時停止、リセットなどの操作を制御できます。

アニメーション効果とは、アニメーションターゲットに適用されるトランジションまたは変更を指します。WAAPI は、移動、拡大縮小、回転など、さまざまなタイプのアニメーション効果を提供します。開発者はこれらの効果を使用して、さまざまなアニメーション効果を作成できます。

基本的な使い方

キーフレーム

先ほどのCSS キーフレームを覚えていますか? from to またはパーセントを使用してアニメーションステージの効果を定義し、JS の KeyframeEffect クラスを使用してキーフレームアニメーションを作成します

const box = document.querySelector(".box")
const keyframes = [
    { left: 0 },
    { left: '100px' }
];
const keyframe = new KeyframeEffect(box, keyframes, 1000);

上記のコードでは、KeyframeEffect クラスは 3 つのパラメーターを受け取ります。1 つ目はターゲットラベル、2 つ目はキーフレーム、3 つ目はアニメーション時間です。

3種類のKeyframeEffectの宣言

KeyframeEffect(keyframeEffect): キーフレーム設定をコピーします
KeyframeEffect(element, keyframes,duration): ラベル要素に新しいアニメーションを生成します。キーフレームはキーフレームで、持続時間はミリ秒です。
KeyframeEffect(element, keyframes, options): ラベル要素に新しいアニメーションを生成します。キーフレームはキーフレームであり、アニメーション構成オプションです。

キーフレーム

キーフレームの書き方には、配列を記述する方法とスタイルオブジェクトを記述する方法の 2 つがあります。

配列

const keyframes = [
    { left: 0, top: "50px" },
    { left: '100px', top: "100px" },
    { top: "150px" }
];

物体

const keyframes = {
    left: [0, '100px', '100px'], top: ["50px", "100px", "150px"]
}

オプション

KeyframeEffect の 3 番目のパラメータータイプは数値またはオプション構成項目です。数値はアニメーションの継続時間を表し、オプションには次のプロパティがあります。

遅延: アニメーションが開始するまでの遅延 (ミリ秒単位)、デフォルト値は 0 です。CSSのアニメーション遅延に対応
方向: アニメーションの再生方向。「normal」(通常の再生)、「reverse」(逆再生)、「alternate」(交互再生)、または「alternate-reverse」(交互逆再生)のいずれかです。デフォルト値は「通常」です。CSSのアニメーション方向に対応
継続時間: アニメーションの継続時間 (ミリ秒単位)、デフォルト値は 0 です。cssのアニメーション期間に対応
イージング: アニメーションのイージング関数。「linear」、「ease」、「ease-in」などの CSS イージング関数、またはカスタムイージング関数を使用できます。デフォルト値は「リニア」です。CSSのアニメーションタイミング機能に対応
endDelay: アニメーション終了後の遅延時間 (ミリ秒単位)、デフォルト値は 0 です。
fill: 非アクティブ期間中のアニメーションの動作。なし (デフォルトでは、アニメーションの終了後に効果は保持されません)、順方向 (アニメーションの終了後に最後のフレームの効果が保持されます)、または逆方向 (アニメーションが開始される前に最初のフレームの効果が適用されます)。両方にすることもできます。これは、前方と後方の効果が同時に適用されることを意味します。CSSに対応したアニメーションフィルモード
iterationStart: アニメーションの反復開始位置。10 進数で表されます (たとえば、0.5 はアニメーションの中央から反復することを意味します)。デフォルト値は 0 です。
iterations: アニメーションの反復数。正の整数または Infinity (無限ループ) を指定できます。デフォルト値は 1 です。CSSのanimation-iteration-countに相当
keyframes: アニメーションのキーフレーム。キーフレームルールオブジェクトまたはキーフレームの配列にすることができます。
playbackRate: アニメーションの再生速度を制御するために使用されるプロパティ。アニメーションの再生速度を速くしたり遅くしたりするために使用できます。
複合 (CompositeOperation): アニメーションの複合動作。交換や追加も可能です。デフォルトは置換です。replace はアニメーションがターゲットプロパティの現在の値を上書きすることを意味し、add はアニメーションがターゲットプロパティの現在の値と重ねられることを意味します。
iterationComposite(IterationCompositeOperation): アニメーション反復間の値合成動作。交換または蓄積できます。デフォルトは置換です。replace は、反復ごとにアニメーションの値がターゲットプロパティの現在の値を置き換えることを意味し、accumulate は、アニメーションの値が反復ごとにターゲットプロパティの現在の値に累積されることを意味します。
pseudoElement: アニメーションが適用される疑似要素。前または後など、疑似要素の名前を示す文字列を指定することも、疑似要素ではなくメイン要素に適用するために null にすることもできます。

例

<!DOCTYPE html>
<html lang="CH">

<head>
    <meta charset="UTF-8" />
    <title>webAnimationsAPI</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            top: 50px;
            position: absolute;
            background: lightblue;
        }

        .box::after {
            width: 100px;
            height: 100px;
            content: "";
            left: 50px;
            position: absolute;
            background: lightcoral;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button onclick="playHandler()">开始</button>
    <script>
        const box = document.querySelector(".box")
        const keyframes = [
            { transform: "rotate(0)" },
            { transform: "rotate(180deg)" },
            { transform: "rotate(360deg)" },
        ];
        const options = {
            delay: 500,// 延迟500毫秒开始动画
            duration: 1000,// 持续时间为1000毫秒
            easing: 'ease-in-out',// 缓动函数为ease-in-out
            iterations: Infinity,// 迭代3次
            direction: 'alternate',// 交替播放
            endDelay: 1000,// 延迟1000毫秒开始动画
            fill: "forwards",// 结束后保持最后一帧的效果
            iterationStart: .2,// 从动画的20%位置开始迭代
            composite: 'add',//使用add合成行为
            keyframes: keyframes,//指定关键帧
            playbackRate: 2.0,//播放速率为2倍
            iterationComposite: 'accumulate',//使用accumulate合成行为
            pseudoElement: '::after'//应用于after伪元素
        }
        const keyframe = new KeyframeEffect(box, keyframes, options);
        function playHandler() {
            const animation = new Animation(keyframe, document.timeline);
            animation.play();
        }
    </script>
</body>

</html>

効果

アニメーションオブジェクト

グローバルアニメーションクラス

アニメーションのキーフレームを作成した後、グローバルアニメーションクラスを使用して、上記のキーフレームの形式でアニメーションを作成できます。

const box = document.querySelector(".box")
const keyframes = [
    { left: 0, top: "50px" },
    { left: '100px', top: "100px" },
    { top: "150px" }
];
const keyframe = new KeyframeEffect(box, keyframes, 1000);
function playPauseHandler() {
    const animation = new Animation(keyframe);
    animation.play();
}

新しいアニメーション(キーフレーム)を使用して新しいアニメーションを作成し、再生機能を使用してアニメーションをアクティブにします。

効果は以下の通りです

アニメーションコンストラクターのパラメーターには、キーフレームオブジェクトのAnimationEffect とタイムラインのAnimationTimeline の 2 つがあり、前者は前述の KeyframeEffect です。AnimationTimeline は一般的に document.timeline で記述できます。

const animation = new Animation(keyframe, document.timeline);

アニメーションオブジェクトには多くのプロパティとメソッドがあります

属性

id: アニメーションの一意の識別子を返します。
startTime: アニメーションが開始されたときのタイムスタンプ。
currentTime: 現在のアニメーションの時間 (ミリ秒単位)。
playbackRate: アニメーションの再生レート。デフォルト値は 1 です。
効果: アニメーションの効果、KeyframeEffect オブジェクト。
timeline: アニメーションによって使用されるタイムライン、AnimationTimeline オブジェクト。
playState: アニメーションの現在の再生状態。可能な値は「idle」、「pending」、「running」、「paused」、「finished」です。
pending: アニメーションの待機状態、つまりアニメーションが保留状態であるかどうか。

方法

play(): アニメーションを再生します。
stop(): アニメーションを一時停止します。
cancel(): アニメーションをキャンセルします。
finish(): アニメーションを終了します。
reverse(): アニメーションの再生方向を逆にします。
updatePlaybackRate(playbackRate): アニメーションの再生レートを更新します。
addEventListener(type,listener): アニメーションにイベントリスナーを追加します。例：終了（完了）、キャンセル（キャンセル）、一時停止（一時停止）など。
RemoveEventListener(type,listener): アニメーションからイベントリスナーを削除します。
oncancel: アニメーションがキャンセルされたときに実行されるイベントハンドラー。
onfinish: アニメーションが完了したときに実行されるイベントハンドラー。

使用例

<!DOCTYPE html>
<html lang="CH">

<head>
    <meta charset="UTF-8" />
    <title>webAnimationsAPI</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            top: 50px;
            position: absolute;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button onclick="playHandler()">开始</button>
    <button onclick="pauseHandler()">暂停</button>
    <button onclick="cancelHandler()">取消、重置</button>
    <button onclick="reverseHandler()">反向运行</button>
    <button onclick="finishHandler()">完成动画</button>
    <button onclick="playbackRateHandler()">更新动画速率</button>
    <button onclick="playStateHandler()">获取状态</button>
    <button onclick="currentTimeHandler()">获取时间轴位置</button>
    <script>
        const box = document.querySelector(".box")
        const keyframes = [
            { left: 0 },
            { left: '300px' },
        ];
        const keyframe = new KeyframeEffect(box, keyframes, {
            duration: 1000,
            iterations: Infinity,
            direction: 'alternate',
            fill: "forwards",
        });
        const animation = new Animation(keyframe, document.timeline);
        animation.addEventListener("finish", console.info)
        animation.addEventListener("cancel", console.info)
        animation.addEventListener("remove", console.info)
        function playHandler() {
            animation.play();
        }
        function pauseHandler() {
            animation.pause();
        }
        function cancelHandler() {
            animation.cancel();
        }
        function reverseHandler() {
            animation.reverse();
        }
        function finishHandler() {
            animation.finish();// 当iterations等于infinity时无法触发完成
        }

        function playStateHandler() {
            console.log(animation.playState);
        }
        function playbackRateHandler() {
            animation.updatePlaybackRate(2)
        }
        function currentTimeHandler() {
            console.log(animation.currentTime);
        }
    </script>
</body>

</html>

効果は以下の通りです

ラベル内のアニメーション関数

グローバル Element タグオブジェクトは Animatable インターフェイスから継承します

このインターフェイスでは 2 つのメソッドについて説明します。animate は現在のラベルにアニメーションを追加し、getAnimations は現在のラベルのすべてのアニメーションを取得します。

interface Animatable {
    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
    getAnimations(options?: GetAnimationsOptions): Animation[];
}

使い方はKeyframeEffect+Animationと似ています。

<!DOCTYPE html>
<html lang="CH">

<head>
    <meta charset="UTF-8" />
    <title>webAnimationsAPI</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .box {
            width: 200px;
            height: 200px;
            top: 50px;
            position: absolute;
            background: lightblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button onclick="playHandler()">开始</button>
    <button onclick="pauseHandler()">暂停</button>
    <script>
        const box = document.querySelector(".box")
        const keyframes = [
            { left: 0 },
            { left: '300px' },
        ];
        const opts = {
            duration: 1000,
            iterations: Infinity,
            direction: 'alternate',
            fill: "forwards",
        }
        const animation = box.animate(keyframes, opts)
        function playHandler() {
            animation.play();
        }
        function pauseHandler() {
            animation.pause();
        }
    </script>
</body>

</html>

要約する

この記事では、2016 年に新たにリリースされた JS ネイティブアニメーション WAAPI について紹介します。このようにして作成されたアニメーションオブジェクトは非常に強力です。その中でも、KeyframeEffect を使用して、ラベルのキーフレームのスタイルを設定し、ラベルのアニメーションを実行できます。アニメーションオブジェクトを介してラベルを付けます。アニメーションに関する前の 2 つの記事と比較すると、WAAPI は強力ですが、使用する場合は互換性の問題を考慮する必要があります。

さて、以上が記事の全内容です。記事の内容があなたのお役に立てれば幸いです。この記事が良いと思っていただけましたら、ブロガーを3回サポートしていただければ幸いです。ありがとうございます～

プラグインだけじゃダメ、フロントエンドのアニメーション技術も集めてみる - JavaScript (後編)

序文

導入

基本的な使い方

キーフレーム

3種類のKeyframeEffectの宣言

キーフレーム

オプション

アニメーションオブジェクト

グローバルアニメーションクラス

ラベル内のアニメーション関数

要約する

関連するコード:

おすすめ