Motion Design Fesitval Week1に参加した
前からCocodaのサービスで勉強しているが、今回モーショングラフィックスに特化した教材ができたということで、モーションデザインをみんなで作って出していくお祭りに参加することにした。
会場はSlackで、自己紹介したり、作品を上げたりと自由な感じになっている
リアクションが来たり、コメントを寄せてくれてきてくれたりと結構嬉しい。
作ったもの
課題1
DailyMotion #001 いいねボタンのアニメーション
制作するうえで意識したこと
モーショングラフィックスをあまり取り組んだことがなかったので、
お手本から緩急の付け方、跳ねさせ方を観察して作った習作
Cocoda!作品置場
感想
何も考えずにつくると、これ↓だったが、流石にしょぼいなと思ったので
お手本をしっかり観察して緩急の付け方、跳ねさせ方を真似したら進化した。やはりプロの力はすごい。観察大事。
課題2
ローディングアニメーション
Cocoda!のurl
制作する上で意識したこと
文字でロード中であること、そしてそれは進行中でいつか終わるということを明示した動きにしたかった。サイバーな雰囲気がでた。
Slackのスタンプにもしてもらえた!
今週の動画に入っていた!トップバッターだった
課題3
DailyMotion #003 スイッチのオン・オフ
Cocoda!のurl
取り組んだこと
iOSのスイッチアニメーションをモーショントレースして観察した
一番上が、画面録画したもの
二番目が、トレースしたもの
三番目が、モーションがわかりやすいように線のみにしたもの
気づいたこと
ONのほうが、スイッチの移動速度が遅い。OFFになるときのほうが、加速度が早い。(トレースするとそんな気がする)
切り替わったときに、ぶつかってちょっと弾んでいることに気づいた。
実は、中の白丸は、縁に黒線がついている。
課題4 お祝いのアニメーション
自分の好きなサービスのnoteがすごく褒めてくれるので、その時のアニメーションをなんとなく思い出しながら作った。
クラッカーの動きとクラッカーの中身が飛び出るタイミングをちょっとずらしています。
最後動きを止めることで、ユーザーに何が起きたか、おめでたいことが起きているということが伝わればいいなと思っています。
課題5
DailyMotion #007 グラフアニメーション
cocoda!のリンク
制作するうえで意識したこと
これはだいぶ前に作ったものだけど、気に入っていたので投稿した。
D3.jsを使って1920年の都道府県ごとの人口グラフ&地図を作った。
地図にマウスオーバーすると、グラフに色をつけるようにした。
さわれるグラフを作ることを意識した。
はじめのグラフアニメーションは動きの気持ちよさを意識した。
実際に触れるページはこちら
データセットについて
出典:政府統計の総合窓口(e-Stat)
男女別人口-全国,都道府県(大正9年~平成27年)を加工して作成
参加してみた感想
Week2 ,Week3と続くのだか、他の人の作品を見れるのが面白い。こんなことを考えるんだ・・・どうしたらきれいな動きになるんだろうなど、学びが多い。一つの課題に対していろんな解法があるんだなと認識する。
詳しくはこちらを見てほしい↓