Help us understand the problem. What is going on with this article?

[Unity]DoTweenのEaseいろいろあってよくわかんない…な人へ[DoTween]

More than 3 years have passed since last update.

はじめに

前の記事(テキストアニメーションしてみた!)の最後にも触れてみたのですが、Easeingっていろいろあってよくわからなくなりがちなので、まとめて自分の備忘録としても使おうかなと。

Easeingとは?

アニメーションを「自然に見せるため」に使われるものです。
例えば、何かものが倒れる時は、徐々に加速して倒れていきますよね?

CSSなど、アニメーションを取り入れる時にはいろいろなところで使われているものです。

一般的なEaseの種類。

とてもわかりやすいサイトがありました

Easing function

DoTweenでのEasing

中身を見てみると。

public enum Ease
{
    Unset,
    Linear,
    InSine,
    OutSine,
    InOutSine,
    InQuad,
    OutQuad,
    InOutQuad,
    InCubic,
    OutCubic,
    InOutCubic,
    InQuart,
    OutQuart,
    InOutQuart,
    InQuint,
    OutQuint,
    InOutQuint,
    InExpo,
    OutExpo,
    InOutExpo,
    InCirc,
    OutCirc,
    InOutCirc,
    InElastic,
    OutElastic,
    InOutElastic,
    InBack,
    OutBack,
    InOutBack,
    InBounce,
    OutBounce,
    InOutBounce,
    Flash,
    InFlash,
    OutFlash,
    InOutFlash,
    INTERNAL_Zero,
    INTERNAL_Custom
}

さすが、全部揃えてありますね!

数が多すぎる…?

まずは、InとOut。これはIn(始点側)、Out(終点側)のどちら側で、指定のEasingをするかというものなので、
わかっていなければいけないのは、そのEasingの種類だけです!

Unset,
Linear,
InSine,
InQuad,
InCubic,
InQuart,
InQuint,
InExpo,
InCirc,
InElastic,
InBack,
InBounce,
Flash,
INTERNAL_Zero,

この14個であり、UnsetはEasingを指定しない、INTERNAL_Zeroは一瞬で移動(アニメーションしてない)ということを考えると、12個について理解すれば良いわけです!

実際に動いている様子。

  • Linear,InSine,InQuad

ani1.gif

  • InCubic,InQuart,InExpo

ani2.gif

  • InQuint,InCirc,InElastic

ani3.gif

  • InBack,InBounce,Flash

ani4.gif

おわりに

まとめてみることで、それぞれのEasingの種類、頭に残りますね!

忘れた時に備えて、備忘録とするということで、おわりにしようかなと。

ではではー

追記

記事にしてみると、gifが連続して貼られてると見にくいかもですね…こうすると見やすくなるかもという意見あったらぜひコメントお願いします!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away