アリスがうさぎの穴からオチてワンダーランドに導かれる様子を示した CSS で書かれている転がり落ちるアニメーションです。(完全な Codepen のコード を参照してください)
+アリスがうさぎの穴から落ちてワンダーランドに導かれる様子を示した CSS で書かれている転がり落ちるアニメーションです。(完全な Codepen のコード を参照してください)
Web Animation API を使用して CSS アニメーションを作成することが可能ですが、API が本当に役立つ時はアニメーションの再生を制御するときです。Web Animation API は、再生を制御するための便利ないくつかのメソッドを提供しています。アリスが拡大/縮小するゲームでのアニメーションの一時停止と再生を見てみましょう( Codepen の完全なコードをご覧ください。)
このゲームでは、アリスはちさなボトルから大きなボトルに移動するアニメーションを使用しており、ボトルとカップケーキを使い制御します。どちらにも独自のアニメーションがあります。
+このゲームでは、アリスは小さなボトルから大きなボトルに移動するアニメーションを使用しており、ボトルとカップケーキを使い制御します。どちらにも独自のアニメーションがあります。
最初に playbackRate を見てみましょう。負数の playbackRate はアニメーションを逆に実行させます。アリスがボトルから飲むと彼女は地位sかうなります。これは、ボトルが彼女のアニメーションの playbackRate を 1 から -1 に変更するためです。
最初に playbackRate を見てみましょう。負数の playbackRate はアニメーションを逆に実行させます。アリスがボトルから飲むと彼女は小さくうなります。これは、ボトルが彼女のアニメーションの playbackRate を 1 から -1 に変更するためです。
var shrinkAlice = function() {
aliceChange.playbackRate = -1;
@@ -224,7 +224,7 @@ bottle.addEventListener("touchstart", shrinkAlice, false);
document.addEventListener("click", goFaster);
document.addEventListener("touchstart", goFaster);
-また、背景要素にはクリックまたｈタップしたときに影響を受けるplaybackRate を設定しています。アリスとレッドクイーンを 2 倍早く走らせたらどうなると思いますか？速度を落とすとどうなると思いますか？
また、背景要素にはクリックまたはタップしたときに影響を受けるplaybackRate を設定しています。アリスとレッドクイーンを 2 倍早く走らせたらどうなると思いますか？速度を落とすとどうなると思いますか？