何気なくCodePenを見ていたら、トップページにこんなのがありました。
これはjavascript無し、CSSアニメーションだけで動かされたロボットですが、少し気になる部分があったので、Forkして遊んでみることにしました。
※端末により、アニメーションに見えない方もいるかもしれませんがご了承ください。
何が気になるか
私がパッと見で気になったのは、以下の点です。
- 腕と肩の位置がズレている
- 胴体と脚の付け根の位置がズレる
というわけで、つまり胴体とその他周辺部位のズレが気になったんですね。
これはこれで機械っぽくてカワイイのですが、せっかくなので気になった部分を簡単に修正してみました。
変更後
変更したものがこちら。
周囲のパーツは胴体部分と一緒に動くよう、親タグの中に入れ子にしました。
肩周りの動きについては、元のものよりはだいぶなめらかになった感じがします。
ただ、脚の傾きを胴体に合わせた状態だと、どうしても足踏みの動作に違和感が出てしまうため、その場で腰をくねくねさせているイメージになってしまいました。
あと首については、元の動きのほうが「ロボットっぽさ」があり、愛着が湧いてくる気がしますね。
全体的に見て、元の動きはロボットが「歩いている感じ」で、私の修正したものは「踊っている感じ」となりました。
結論
何かを求めると、何かを失うことになるようです。
Photo via Visual Hunt