【Code with Google】Grasshopper - Animations #4 - INTERACTIVE ANIMATION

#CodewithGoogle#JavaScript#プログラミング

INTERACTIVE ANIMATION

Syzygy
transitionメソッドを使用して、同じサイズに変化するすべての円をアニメーション化します
・.transition()
　D3トランジションは、.attr（）によって行われた変更をアニメーション化します。 変更を即座に適用する代わりに、シェイプは新しい属性に合わせてアニメーション化します。

Makahiya
D3ライブラリのselectAllメソッドを使用して複数の長方形を1つの変数に保存し、各長方形の属性を1つのコマンドで変更できるようにします

Rainbow Treasure
selectメソッドを使用して、画面上の最初の円を変数に保存します
黒い円をタップして、金色に変えます
・.select()
　プログラムに追加された特定のタイプの最初のSVG形状を選択します。

How to Move?
blockを動かすコードはどれかを求めます

To Get to the Other Side
durationメソッドを使用して、トランジションアニメーションをより速くまたは遅く移動します
・.duration()
　遷移の定義にかかる時間（ミリ秒）を設定します。

Strange Gravity
easeメソッドを使用して、さまざまなタイミングで遷移の速度を上げたり下げたりします
・.ease()
　.transition（）の引数値で設定されたアニメーションの各部分の速度を変更するために使用されます。

How to Fall Down?
ボールが落下しているように見えるコードを求めます

Burst Your Bubble
interruptメソッドを使用して、トランジションの途中でアニメーションを停止します
.interrupt()
　SVGシェイプをアニメーション化するトランジションを停止します。 属性をすぐに更新できます。

Broken Button Blues
イベントハンドラーを使用して、青いボタンでボールをクリーンアップします

How to Change Twice?
サイズを変更する前に、どのコードが図形の色をゆっくりと変更するかを求めます

Rainbow Hopper
drawSquare関数をアップグレードして複数のボックスを描画し、バッタをジャンプさせます

Bowl a Strike
アニメーションを完成させ、イベントハンドラーを追加してストライクを打ちます

---
SUBSCRIBE to get higher rankings and more traffic!