[unity]お手軽 UI アニメーション

以前公開した Simple UI Transition の発展形、Simple UI Ease です。

動画のようなアニメーションを、インスペクタで簡単に設定することができます。

機能

  • 透明度の変更、縦横の移動、縦横サイズの変更、回転について任意のアニメーションをつけることができます(色付き部分が Transition から進化)
  • 20 種類以上のアニメーションカーブパターン
  • Value スライダを移動させる事で、実行する事なくアニメーションを目視確認可能
  • アニメーションの開始・終了のタイムラグを設定可能
  • SimpleUIEase をアタッチした GameObject 以下の子オブジェクトにも効果が適用されます

ダウンロード&確認

SampleScene.unity を開きます
Game ウィンドウは 2160 x 1080 が適切なサイズです(Free Aspect だと見切れる)

最も簡単な使い方(横移動しながらフェードイン)

前準備

  • 表示させる UI/Image を配置
  • SimpleUIEase を Image にアタッチ

Plugins/uindies/SimpleUIEase/SimpleUIEase

SimpleUIEase の設定

  • Total Time(アニメーション時間)をゲームイメージに合わせて設定

0.2~1 くらいが適当な値です

  • Effects を 0 -> 2 に増やす
  • Element0 の Used にチェックをつける

フェードイン・アウトはこれだけでOK

  • Element1 の Type を MoveX、Ratio を 2 にする

Ratio が 2 の場合、イメージの大きさを 1 として、イメージ2つ分移動します
左から右に移動させたい場合は Ratio を -2 にします

  • Value スライダを 0~1 に移動させると、設定されたアニメーションが確認できる

お好みで…

  • MoveX の Ease を Circular Out にすればなめらかに減速アニメーション、Back Out にすれば少し弾むような移動アニメーションになります
  • 複数の SimpleUIEase にバラバラな Delay Time を設定すると、同時に Show() を行っても Delay Time 分の時間を待ってから、バラバラな順番でアニメーションします

Image ~ Image(3) の細かい設定時間によって、4つのキャラが少しずつずれたタイミングで次々に出現・消失しているのがわかります。

メソッドの解説

Show()
Hide()
表示を開始します
非表示を開始します
SetValue(float value)Value を直接設定します。0 か 1 を設定して一気に(非)表示する事ができます
OnFadein
OnFadeout
フェードインが完了した際にコールされるイベントです
フェードアウトが完了した際にコールされるイベントです

注意事項

  • 一度 SimpleUIEase を設定した GameObject の表示位置を変えたい場合、Transform の XY 値ではなく、MoveX の Pos、MoveY の Pos を変更してください

MoveX(Y) のアニメーションを設定していない場合は Transform で問題ありません。
Scale や Rotation についても同じ事が言えます。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA