Unityのアニメーションサンプル

ボヨーンっとしたアニメーション

ボタンを押したときにボヨーンっとなるアニメーションです。

• アニメーション

  FPS	Scale.x	Scale.y
  0	1.00	1.00
  1	1.35	0.85
  5	0.90	1.20
  7	0.85	1.25
  15	1.10	0.90
  22	1.00	1.00

• スクリプト(Prefab)
  http://yahoo.jp/box/ITO0jn
  ※Unityパッケージです。Assets->ImportPackage->CustomPackageで読み込んで下さい。
  ※Packageの中身および使い方についてはページ下部で説明

シンプルボタンアニメーション（拡縮するだけ）

汎用性の高い通常のボタンアニメーションです。

• アニメーション

  FPS	Scale.x	Scale.y
  0	0.80	0.80
  6	1.10	1.10
  11	1.00	1.00

• スクリプト(Prefab)
  http://yahoo.jp/box/Mk4LCS
  ※Unityパッケージです。Assets->ImportPackage->CustomPackageで読み込んで下さい。
  ※Packageの中身および使い方についてはページ下部で説明

感触の良いボタンアニメーション（ぷにっとする）

汎用性の高い通常のボタンアニメーションです。

• アニメーション

  FPS	Scale.x	Scale.y
  0	1.40	0.90
  6	0.80	1.20
  10	1.00	1.00

• スクリプト(Prefab)
  http://yahoo.jp/box/4DBTdL
  ※Unityパッケージです。Assets->ImportPackage->CustomPackageで読み込んで下さい。
  ※Packageの中身および使い方についてはページ下部で説明

フレームのポップアップアニメーション(説明ポップアップ)

画面上に現れるポップアップのアニメーションです。

• アニメーション

  FPS	Scale.x	Scale.y
  0	0.70	0.70
  10	1.10	1.10
  20	1.00	1.00

• スクリプト(Prefab)
  http://yahoo.jp/box/pC2FY4
  ※Unityパッケージです。Assets->ImportPackage->CustomPackageで読み込んで下さい。
  ※Packageの中身および使い方についてはページ下部で説明

フレームのポップアップアニメーションの逆

画面上に現れるポップアップを閉じる時のアニメーションです。

• アニメーション

  FPS	Scale.x	Scale.y
  0	1.00	1.00
  10	1.10	1.10
  20	0.70	0.70

• スクリプト(Prefab)
  http://yahoo.jp/box/eevi7W
  ※Unityパッケージです。Assets->ImportPackage->CustomPackageで読み込んで下さい。
  ※Packageの中身および使い方についてはページ下部で説明

アニメーションの逆再生

※Animatorを使ってアニメーションを行う場合のみ使用可能なテクニックです。

簡易使い方フロー

1. Assets->ImportPackage->CustomPackageでDLしたPackageを読み込む。
2. Project上に読み込まれたSampleObjectプレハブの名称を自分が分かりやすいような名前に変更する。
3. 2のオブジェクトをシーン上のCanvasオブジェクト下に配置する。
4. Image画像を差し替える。また、該当のアニメーションを再生するためのイベントを設定する。
   ※イベントについては、http://qiita.com/takesuke/items/e3b314aa7fd9111bc17f を参照
5. イベントの処理内容をScriptAnimation -> StartAnimationに設定する。

Package内容

PackageをインポートするとScriptとプレハブが1つずつ入っています。

• プレハブ
  アニメーションさせたいオブジェクトの本体。
  このプレハブに画像を付け、シーン上に配置するだけで気持ちのよいアニメーションを作ることができる。
  ※UIは必ずCanvasの子に配置しなければならない

• Script
  アニメーションを再生するためのScript。AnimatorやiTweenと違い軽快に動作する。
  scaleの拡縮をするだけのアニメーションであれば自由に作成することができる。
  ※あらかじめデフォルト値を入れてあるので、新しいものを作る時以外は変更しなくてよい
  EndTime:アニメーションの終了時間を指定する
  Scale CurveX:X軸のアニメーションカーブを秒単位で指定する
  Scale CurveY:Y軸のアニメーションカーブを秒単位で指定する
  Rect Transform：該当のアニメーションを行うオブジェクトを指定する

使用スクリプト

sample.cs

using UnityEngine;
using System.Collections;

public class ScriptAnimation : MonoBehaviour {

    /// <summary>
    /// コルーチン処理の終了時間。アニメーションの終了時刻に合わせる。
    /// </summary>
    [SerializeField]
    private float endTime = 0.15f;

    // AnimationCurve.Linearの引数:開始時間、初期値、終了時間、終了値
    [SerializeField]
    private AnimationCurve scaleCurveX = AnimationCurve.Linear(0, 1, 1, 1);

    [SerializeField]
    private AnimationCurve scaleCurveY = AnimationCurve.Linear(0, 1, 1, 1);

    /// <summary>
    /// アニメーションさせたいオブジェクトをアタッチさせる。
    /// </summary>
    [SerializeField]
    private RectTransform rectTransform;

    public void StartAnimation()
    {
        // コルーチンを開始する
        StartCoroutine(AnimationCoroutine());
    }

    IEnumerator AnimationCoroutine()
    {
        Vector3 initScale = new Vector3(0, 0, 1);
        float startTime = 0;
        float passTime = 0;
        float x;
        float y;

        while(passTime - startTime <= endTime)
        {
            x = scaleCurveX.Evaluate(passTime - startTime);
            y = scaleCurveY.Evaluate(passTime - startTime);
            rectTransform.localScale = initScale + new Vector3(x, y, 0);
            passTime += Time.deltaTime;
            yield return 0;
        }

        yield break;
    }   
}