[一言進捗]/[講座]格好良いアニメーションの極意

一言進捗

もう、ずーーーーーーーっとメニューの調整作業。
たぶん、今月もずっと。

https://twitter.com/thiropGames/status/1223584051669241856

メニューウィンドウ設計するって大変ですね・・・（遠い目

せめて今月のプレツクデーにはメニューの花形(?)といえばやっぱり合成屋！
・・・あたりのメニュー進捗を出したいですね。

いつか講座になるかもしれない何か

しばらくはダイスプラグインのサンプルで使っているテクニックを紹介する予定です。

いちおう、コモンイベントにはコメントをつけているのですが、補足や考え方なども少しずつ紹介していきたいなと思います！

いい感じのピクチャアニメーションを作る！

上の進捗動画内にもありますが、

「交渉成功！」

「交渉失敗…」

といったちょっとした情報を表示するのに、
ひと手間かけてフォトショップなどで画像化してから
ピクチャで動かすことで、演出のインパクトが大幅に上がります！

今回はピクチャをアニメーションさせる際に格好良くみせるコツみたいなものを紹介しようと思います！

ダイスプラグインのちんちろりんサンプルで使っている２つのピクチャ演出↓

この２つの共通点こそが、私が思うアニメーションの極意です！！
（見比べて考えてみてくださいね）

その共通点は……

1. ものすごく勢いのあるインモーション
2. 完全には止まらず、じわじわと動く継続モーション
3 勢いのあるアウトモーション

という、３つのモーションから成り立っていることです。

これはもう鉄板です！

アニメーションで変化させるのはだいたい下の４つ。

• 位置
• 大きさ・形状（拡大率）
• 不透明度
• 角度

最初に上げたモーションがそれぞれどんな要素でできてるか検証してみます。

スライドモーション

インモーション

始めは勢いよく右から中央にスライドしてきますね。

ただ、よく見ると移動と同時に透明な状態か不透明な状態に変化しています。

また、形状をみると横に潰れた状態(高さ0)から通常の状態に戻っています。

このように複数の要素のアニメーションを組み合わせるとより複雑で飽きないアニメーションが出来上がりやすいです。

少なくとも、不透明な状態のピクチャがドーンといきなり出てこないように、
始めは不透明にするか、高さか幅を0%にするなど意識すると良いでしょう。

また、インモーションはこれでもかと早く＆大げさに演出すると、勢いがついた心地よいアニメーションになると思います。

継続モーション

中央（より若干右）にスライドしてきたテキストは、
その場で止まらずに少しずつ左に移動を続けます。

このちょっとした動きがあるだけでモーションがリッチに見えます。

勢いよくインしたあとにも微妙に動かし続けましょう。

２つ目の例でも、勢いよく縮小しつつインしたあとも、
ジリジリとゆっくり縮小をつづけています。

アウトモーション

インモーションと対応させて

• 左へ移動
• 形状を横に潰す(縦0%、横130%)
• 徐々に透明に

といった３つの要素をアニメーションさせています。

インモーションより多少アニメーションフレームに余裕をもたせて
余韻をもたせるようにしています。
（といっても遅くしすぎたらテンポが悪くなるので注意！）

本当にこの３つを守るだけでそれっぽいアニメーションになると思いますので
みなさんもぜひピクチャ演出を活用してみましょう！

（ピクチャ演出はイージング系のプラグインを使うのも緩急が簡単につけれてオススメですが、↑の動画のように３つのモーションをしっかり設定すればイージング無しでも意外となんとかなります・・・というより、３つのモーションの設計の方が大事かと思います！）

ちなみに、ダイスプラグインのサンプルではピクチャ表示で画像を指定してから
演出用のコモンイベントを呼ぶだけで上で挙げた演出を行ってくれます！！

ご購入されてる方は雑にピクチャ演出に活用したり、コモンイベントの中身を書換えてアニメーションを改造してみたりしてくださいね！

こんな感じでしばらくはダイスプラグインの宣伝がてら、
サンプルで使っているテクニックを少しずつ紹介してこうと思います。

宣伝うざいかもだけど、ダイスを振るだけじゃないダイスプラグインをヨロシクネ！！
ダイス・サイコロプラグイン『TRP_Dice』