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

2020年3月6日金曜日

Animations

t f B! P L

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

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

このブログを検索

自己紹介

自分の写真
インターネットの仕事をしながら日本の教育のことを考えたりしています。 テクノロジーで教育がより良くなることを信じています。 私自身のGoogle for Educationトレーニング体験を通じて学生、並びに教職員の方のお役に立てれば幸いです。

QooQ