今年、より広範な Web Animations 仕様の一部として、Chrome 36 に element.activate メソッドが追加されました。これにより、命令型のネイティブ アニメーションを効率的に作成できるようになります。デベロッパーは、自身に最も適したアプローチでアニメーションと遷移を作成できます。
簡単におさらいするために、画面全体で雲をアニメーション化し、完了時にコールバックを指定する方法を紹介します。
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 でも利用可能になりました。