以前公開した 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 についても同じ事が言えます。