このページは Cloud Translation API によって翻訳されました。

ウェブアニメーションの再生コントロール（Chrome 39）

Sam Thorogood

今年の初めに、Chrome 36 で element.animate メソッドが導入されました。これは、より広範なウェブアニメーション仕様の一部です。これにより、命令型で記述された効率的なネイティブアニメーションが可能になり、デベロッパーは、最も適したアプローチでアニメーションと遷移を構築できるようになりました。

以下に、画面全体に雲をアニメーション化して、完了時にコールバックを実行する方法を示します。

var player = cloud.animate([
    {transform: 'translateX(' + start + 'px)'},
    {transform: 'translateX(' + end + 'px)'}
], 5000);
player.onfinish = function() {
    console.info('Cloud moved across the screen!');
    startRaining(cloud);
};

この方法は非常に簡単で、アニメーションや遷移を強制的に作成する際にツールボックスの一部として検討する価値があります。ただし、Chrome 39 では、element.animate から返される AnimationPlayer オブジェクトに再生コントロール機能が追加されました。これまでは、アニメーションを作成した後は、cancel() を呼び出すか、finish イベントをリッスンすることしかできませんでした。

こうした再生機能の追加により、Web アニメーションでできることの可能性が広がります。アニメーションを遷移の規範的なものにするのではなく、汎用的なツールに変えることができます。「固定」または事前定義のアニメーションを使用します。

一時停止、巻き戻し、再生速度の変更

まず、上記の例を更新して、雲をクリックするとアニメーションを一時停止するようにします。

cloud.addEventListener('mousedown', function() {
    player.pause();
});

playbackRate プロパティを変更することもできます。

function changeWindSpeed() {
    player.playbackRate *= (Math.random() * 2.0);
}

また、reverse() メソッドを呼び出すこともできます。このメソッドは、通常、現在の playbackRate を反転する（-1 を乗算する）ことと同じです。ただし、次のような特殊なケースがあります。

reverse() メソッドによる変更によって実行中のアニメーションが事実上終了する場合、currentTime も反転します。たとえば、まったく新しいアニメーションを逆にすると、アニメーション全体が逆再生されます。
プレーヤーが一時停止している場合は、アニメーションの再生が開始されます。

プレーヤーのスクラブ

AnimationPlayer で、アニメーションの実行中に currentTime を変更できるようになりました。通常、この値は時間の経過とともに増加します（playbackRate が負の値の場合は減少します）。これにより、アニメーションの位置を外部から制御できるようになります（ユーザー操作など）。これは一般に「スクラブ」と呼ばれます。

たとえば、HTML ページが空を表していて、ドラッグ操作で現在再生中の雲の位置を変更したい場合、ドキュメントにハンドラを追加できます。

var startEvent, startEventTime;
document.addEventListener('touchstart', function(event) {
    startEvent = event;
    startEventTime = players.currentTime;
    player.pause();
});
document.addEventListener('touchmove', function(event) {
    if (!startEvent) return;
    var delta = startEvent.touches[0].screenX -
        event.changedTouches[0].screenX;
    player.currentTime = startEventTime + delta;
});

ドキュメントの上にドラッグすると、元のイベントからの距離を反映するように currentTime が変更されます。操作が終了したときにアニメーションの再生を再開することもできます。

document.addEventListener('touchend', function(event) {
    startEvent = null;
    player.play();
});

ページからマウスを離した場所に応じて、この動作をリバース動作と組み合わせることもできます（組み合わせたデモ）。

ユーザー操作に応じて AnimationPlayer をスクラブする代わりに、その currentTime を使用して進行状況やステータス（ダウンロードのステータスなど）を表示することもできます。

ここでのユーティリティは、AnimationPlayer で値を設定でき、基盤となるネイティブ実装が進捗状況の可視化を処理することです。ダウンロードの場合、アニメーションの長さを合計ダウンロードサイズに設定し、currentTime を現在ダウンロードされているサイズ（デモ）に設定できます。

UI の遷移とジェスチャー

モバイルプラットフォームは以前から、ドラッグ、スライド、フリングなどの一般的なジェスチャーの分野となってきました。これらのジェスチャーには、リストビューの「プルして更新」や画面の左側から引き出されるサイドバーなど、ドラッグ可能な UI コンポーネントという共通のテーマがあります。

ウェブアニメーションを使用すると、パソコンでもモバイルでも、ウェブ上で同様の効果を簡単に再現できます。たとえば、currentTime を制御する操作が完了すると、次のようになります。

var steps = [ /* animation steps */ ];
var duration = 1000;
var player = target.animate(steps, duration);
player.pause();
configureStartMoveListeners(player);

var setpoints = [0, 500, 1000];
document.addEventListener('touchend', function(event) {
    var srcTime = player.currentTime;
    var dstTime = findNearest(setpoints, srcTime);
    var driftDuration = dstTime - srcTime;

    if (!driftDuration) {
    runCallback(dstTime);
    return;
    }

    var driftPlayer = target.animate(steps, {
    duration: duration,
    iterationStart: Math.min(srcTime, dstTime) / duration,
    iterations: Math.abs(driftDuration) / duration,
    playbackRate: Math.sign(driftDuration)
    });
    driftPlayer.onfinish = function() { runCallback(dstTime); };
    player.currentTime = dstTime;
});

これにより、ドリフトを実行する追加のアニメーションが作成されます。これは、ジェスチャーが完了した場所から、既知の正常なターゲットまで再生されます。

これは、アニメーションが作成順序に基づいて優先度が決まるためです。この場合、driftPlayer は player よりも優先されます。driftPlayer が完了すると、その効果は表示されなくなります。ただし、最終時刻は基盤となるプレーヤーの currentTime と一致するため、UI は一貫しています。

最後に、子猫が好きな方のために、これらのジェスチャーを試すことができるデモウェブアプリケーションも用意されています。モバイルフレンドリーで、下位互換性を確保するためにポリフィルを使用しています。お使いのモバイルデバイスに読み込んでみてください。

アニメーション化して elements.activate

element.animate メソッドは、シンプルなアニメーションに使用する場合でも、返された AnimationPlayer を他の方法で活用する場合でも、今すぐ試す価値があります。

これら 2 つの機能は、他の最新ブラウザでも軽量のポリフィルにより完全にサポートされています。このポリフィルは機能検出も行うため、ブラウザベンダーが仕様を実装するにつれて、この機能は時間の経過とともに向上し、改善されていきます。

Web Animations の仕様も引き続き進化します。今後追加される機能をいろいろ試してみたい場合は、さらに詳細なポリフィル: web-Animations-next も用意されています。

ウェブ アニメーションの再生コントロール（Chrome 39）

一時停止、巻き戻し、再生速度の変更

プレーヤーのスクラブ

UI の遷移とジェスチャー

アニメーション化して elements.activate

ウェブアニメーションの再生コントロール（Chrome 39）