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