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

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

Sam Thorogood

今年、Chrome 36 では、より広範なウェブアニメーション仕様の一部として element.annotate メソッドを提供しました。これにより、ネイティブアニメーションを命令的に記述することが可能になり、デベロッパーは自分にとって最適なアプローチでアニメーションや遷移を作成することができるようになります。

簡単におさらいするために、画面全体で雲をアニメーション化し、完了時にコールバックを行う方法を示します。

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 がプレーヤーよりも優先されます。driftPlayer が完了すると、その効果は表示されなくなります。ただし、最終時刻は基盤となるプレーヤーの currentTime と一致するため、UI は一貫しています。

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

アニメーション化する

element.animate メソッドは今非常に大きな効果を発揮します。シンプルなアニメーションに使用する場合でも、返された AnimationPlayer を別の方法で使用する場合でも、

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

ウェブアニメーションの仕様も進化し続けています。今後追加される機能をいろいろ試してみたい場合は、より詳細なポリフィル: web-Animations-next でも利用可能になりました。

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

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

プレーヤーをスクラブする

UI の遷移と操作

アニメーション化する

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