koke portfolio

Key Animation

keyanimationの画像です。
制作期間
3日間
使用技術
HTML CSS JavaScript

flow

作品概要

JavaScripのライブラリであるAnime.jsを使った、アニメーション作品になります。キーボードの数字を押すとそれぞれに設定したアニメーションが再生されます。

制作の過程・思考

Anime.jsを使っているのと自分自身の技術的にも複雑なアニメーションは作れないこともあったので簡単な動きで、いかに気持ちの良いアニメーションにするかを考えながら制作していきました。ただ回転させるだけじゃなくて回転のスピードに緩急をつけたり、ただ落ちていくだけでなくバウンドして落ちていったり、物凄いアニメーションじゃなくてもちょっとした工夫で、楽しいアニメーションになるようにしました。細かいアニメーションにせず、画面いっぱいに大きく動くアニメーションを多くし、パッと見た時にしっかりわかるようにもしました。また同時にキーボードを押すことが結構あると思ったので、アニメーションが同時に再生された時にどう見えるのかも考えながら制作していきました。同時に再生された時に、同じような動きだったり、色合いが似ていると見ていて面白くないと思いました。なので、カラーは統一せずにカラフルにし、動きも同じにならないよう意識しました。