(ドット絵)アニメーションのメリハリ

もくじ

1.アニメーションと「動き」
2.Tweenとは
3.基本的な
イージングの種類
4.イージングを組み合わせる
5.イージングの応用

【この記事を読むのにおすすめの方】
・ドット絵を描いていて、アニメーションにもっとキレを出したい方
・ゲーム開発者を始めたてで、UIを気持ちよく動かしたい方
・Tween(トゥイーン)または
Easing(イージング)を知らない方(重要)
 ⇒どちらかご存じであればこの記事は購読不要かとおもいます。

今日フォーカスするアニメーションはこのロゴのような、"アニメーションのメリハリのつけ方"です。


1.アニメーションと「動き」

 「万物流転」という言葉は、ヘラクレイトスによって提唱された哲学の概念です。この概念は、時間が経てばどんなモノでも変化してしまうことを指しているようです。
時間によってモノが流転することを「動き」と呼ぶとして、「動き」を表現する方法はいくつかあります、あなたが選んだその一つの表現手法が、アニメーションだったのではないでしょうか。

すみません、ちょっと壮大な前置きをしてみました。
実際に、アニメーションで表現できる(表現しなければならない)"動き"はいろいろ思い浮かびます。シンプルに考えると…
・モノの移動:物体がある位置からある位置まで動く
・モノの回転:物体がある角度からある角度に回転する
・モノの変形:なんらかの力が加わって変化していく
・色の変化 :発光したり、反射したり、明るくなったり、暗くなったり

などでしょうか。
ボールを投げたり、雨が降って雨粒が落ちたり、部屋の明かりがついたり、あの人が歩いたり…。何をするにもこの「動き」が含まれています。(他にも、雷や炎などの現象特有の「動き」もありますが、今回紹介する技法とはあまり関係ないので、また別の機会に…。)

そんな、「動き」の中には「時間によってどれだけ動くか」、すなわち変化量が存在します。この変化量をうまく観察できていないと、絵が上手に模写できていたとしても、上手に「動き」を表現できません。
逆を言えば、絵が完璧でなくても「動き」が良ければ十分説得力があるアニメーションが作れます。
というわけで、今回は絵を描くコツではなく、動きの変化量だけでいかに上手にアニメーションを良くできる、というところに着目しましょう。そこで紹介する技法がTweenです。

2.Tweenとは

Tweenとは、モノを表現する最初のフレームと、最後のフレームが決まっていたとして、途中のフレームを補完する技法のことです。難しい説明はさておき、下記のアニメーションの文字の出現するカンジを見ていただきたいです。(ズ0

ズ0:Tweenを使ったロゴの出現

今は何となくこんな感じです、としか言えませんが、Tweenはメリハリのあるアニメーションには必須な技法、とだけ覚えておいてください。

それでは、このアニメーション技法の神髄である緩急のつけ方について、具体的に紹介していきます。

この続きをみるには

この続き:3,708文字/画像4枚

(ドット絵)アニメーションのメリハリ

hako 生活

150円

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

22

hako 生活

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
4つのマガジンに含まれています

コメント2件

楽しく読ませていただきました。noteで記事を販売する場合、2のTweenの中間か、3のEasingの中間ぐらいまでチラ見せパートにしてしまうと、より販売しやすいかもしれませんです。
深津さん、ご購読&アドバイスありがとうございます。どんな内容かつかんでもらうことが大事なんですね。試してみます!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。