どうも多摩川乱歩(@tamagawa2525)です。
オブジェクトに加減速をかけて、動画のモーションをオシャレに見せる『イージング』。
動画制作だけでなく、WebサイトのUIにも使われたりする手法です。
AviUtlでもスクリプトを導入することで、手軽にイージングを使用することができますが、なにせ種類がめっちゃ多い。
![イージングチートシート](https://aketama.work/wp-content/uploads/2018/09/easing-1024x792.png)
イージングチートシートを見ると全部で41種類あります。
![](https://aketama.work/wp-content/uploads/2018/01/2eeec77d04052958dd3ee2dfc8d3748c.png)
イージングを使い始めたけどグラフで一覧を見ても、どういう動きかわからねえ!!!
イージング番号それぞれの『動きの一覧』が見てえんだよ!!!
ってことでイージングの動き一覧表作りました。
【AviUtl】イージング一覧表
はじめに
使用するイージングスクリプト
AviUtlでイージングを扱えるスクリプトはいくつかありますが、今回は初心者でも導入しやすいUndoFish様の『「イージング(トラックバー版)」』スクリプトを使用します。
UndoFish様の『「イージング(トラックバー版)」』導入については以下の記事で詳しく紹介していますので、ダウンロードがお済でない方はこちらからどうぞ。
≫【Aviutl】はじめてのイージング !導入・使い方を解説【undofish版】
Undofish様の「イージング(トラックバー版)」は2020年10月にアップデートされています。
.zipファイル内の「easing.png」が以下の画像になっていれば最新版です。
![2020年版Undofish様イージングチートシート](https://aketama.work/wp-content/uploads/2018/09/easing-1.png)
忙しい人のためのイージング一覧動画
イージング一覧を一気通貫で確認できる動画を用意しました。
『とりあえずイージング全種類をザーーっと見たい』という方はご利用ください。
以下では、番号ごとのイージングについて.gif画像でモーション例を一覧紹介します。
イージング一覧表
それではイージング番号1~41までの全ての種類の動きを、使用例とともに一覧紹介していきます。
イージング番号1: Linear
![イージング1](https://aketama.work/wp-content/uploads/2020/05/1.gif)
いわゆるAviUtlデフォルトの「直線運動」と同義で加減速はなく、終始等速です。
ちなみに↑のような「直線移動」を含み、AviUtlではデフォルトで10種類の移動方法が用意されています。
移動方法についての基本的な使い方は以下の記事で詳しく解説しているので、あわせてチェックしてみてください。
イージング番号2: easeInSine
![イージング番号2](https://aketama.work/wp-content/uploads/2020/05/2.gif)
ゆるい加減速のSine系。Inなので動き出しが若干ゆるやかに。
イージング番号3: easeOutSine
![イージング番号3](https://aketama.work/wp-content/uploads/2020/05/3.gif)
終わり際で減速し、ゆるやかに止まります。
イージング番号4: easeInOutSine
![イージング番号4](https://aketama.work/wp-content/uploads/2020/05/4.gif)
動き出し・終わり際どちらも若干ゆるやか。Sine系は変化が薄く分かりにくいですかね。
イージング番号5: easeOutInSine
![イージング番号5](https://aketama.work/wp-content/uploads/2020/05/5.gif)
真ん中で減速し、一瞬止まるようなイージング。
イージング番号6: easeInQuad
![イージング番号6](https://aketama.work/wp-content/uploads/2020/05/6.gif)
出だしから段々加速。Sine系よりほんのり加減速が強め。
イージング番号7: easeOutQuad
![イージング番号7](https://aketama.work/wp-content/uploads/2020/05/7.gif)
速めに動いて終わり際に減速。よく使うイージング。
イージング番号8: easeInOutQuad
![イージング番号8](https://aketama.work/wp-content/uploads/2020/05/8.gif)
遅 → 速 → 遅。THEイージングっぽい動き。
イージング番号9: easeOutInQuad
![イージング番号9](https://aketama.work/wp-content/uploads/2020/05/9.gif)
Sine系よりキレのあるイージング。
イージング番号10: easeInCubic
![](https://aketama.work/wp-content/uploads/2020/05/10.gif)
CubicはQuadより加減速が強め。
イージング番号11: easeOutCubic
![](https://aketama.work/wp-content/uploads/2020/05/11.gif)
終わり際減速。Quad、Cubic辺りの減速が一番汎用性高そうな印象。
イージング番号12: easeInoutCubic
![イージング番号12](https://aketama.work/wp-content/uploads/2020/05/12.gif)
加減速が強まってきて「イージング」感が出てきている。
イージング番号13: easeOutInCubic
![](https://aketama.work/wp-content/uploads/2020/05/13.gif)
真ん中で一時停止。Quadに比べキュッと止まる。
イージング番号14: easeInQuart
![](https://aketama.work/wp-content/uploads/2020/05/14.gif)
Cubicより更にキツめのイージング。
イージング番号15: easeOutQuart
![](https://aketama.work/wp-content/uploads/2020/05/15.gif)
強めに減速してゆーーっくり終わる。
イージング番号16: easeInOutQuart
![](https://aketama.work/wp-content/uploads/2020/05/16.gif)
遠心力を感じる動き。割とよく使う。
イージング番号17: easeOutInQuart
![イージング番号17](https://aketama.work/wp-content/uploads/2020/05/17.gif)
真ん中の一時停止がだいぶ伸びてきた。
イージング番号18: easeInQuint
![イージング番号18](https://aketama.work/wp-content/uploads/2020/05/18.gif)
グラフ上はQuartより加減速キツめっぽいが、むしろ緩やかに見える(なんで?)
イージング番号19: easeOutQuint
![イージング番号19](https://aketama.work/wp-content/uploads/2020/05/19.gif)
フワ―っと着地する減速。
イージング番号20: easeInOutQuint
![イージング番号20](https://aketama.work/wp-content/uploads/2020/05/20.gif)
入りも抜きもゆるふわな加減速。
イージング番号21: easeOutInQuint
![イージング番号21](https://aketama.work/wp-content/uploads/2020/05/21.gif)
スッスッっとイージング。
イージング番号22: easeInExpo
![イージング番号22](https://aketama.work/wp-content/uploads/2020/05/22.gif)
動きがダイナミックなExpo系。派手めにイージング見せたい時はこれ。
イージング番号23: easeOutExpo
![](https://aketama.work/wp-content/uploads/2020/05/23.gif)
グンと進んで、ゆっくり終了。キレのある加減速。
イージング番号24: easeInOutExpo
![イージング番号24](https://aketama.work/wp-content/uploads/2020/05/24.gif)
個人的に一番使うイージング。Expo系はスピード感がカッコいい。
イージング番号25: easeOutInExpo
![イージング番号25](https://aketama.work/wp-content/uploads/2020/05/25.gif)
真ん中の一時停止がジェットコースター感だしてくれるイージング。
イージング番号26: easeInCirc
![イージング番号26](https://aketama.work/wp-content/uploads/2020/05/26.gif)
滑りだすみたいに加速するイージング。26以降は結構特殊な動き多めです。
イージング番号27: easeOutCirc
![イージング番号27](https://aketama.work/wp-content/uploads/2020/05/27.gif)
摩擦で徐々に減速するスライディングみたいなイージング。
イージング番号28: easeInOutCirc
![イージング番号28](https://aketama.work/wp-content/uploads/2020/05/28.gif)
真ん中でグンと加速する。24番ExpoのキレをMAXにしたような動き。
イージング番号29: easeOutInCirc
![イージング番号29](https://aketama.work/wp-content/uploads/2020/05/29.gif)
Circ系は「力が働いているのは一瞬で、後は惰性で動いている」感ある。
イージング番号30: easeInElastic
![イージング番号30](https://aketama.work/wp-content/uploads/2020/05/30.gif)
かなり個性出してきたElasticシリーズ。ゴムの伸縮イメージ。
イージング番号31: easeOutElastic
![](https://aketama.work/wp-content/uploads/2020/05/31.gif)
指定した位置よりを「超えて戻ってくる」イージングなので、フレームに留意。
イージング番号32: easeInOutElastic
![イージング番号32](https://aketama.work/wp-content/uploads/2020/05/32.gif)
びよーんと伸びたグラフとかの動きに使えそう。
イージング番号33: easeOutInElastic
![イージング番号33](https://aketama.work/wp-content/uploads/2020/05/33.gif)
ビョン!みたいな強めのゴム伸縮モーション。
イージング番号34: easeInBack
![イージング番号34](https://aketama.work/wp-content/uploads/2020/05/34.gif)
一回引いてからスーッと進む。チョロQと一緒。
イージング番号35: easeOutBack
![イージング番号35](https://aketama.work/wp-content/uploads/2020/05/35.gif)
「やべ、行き過ぎた」…「スッ(修正)」
イージング番号36: easeInOutBack
![イージング番号36](https://aketama.work/wp-content/uploads/2020/05/36.gif)
マイナス→プラス→指定位置へ。振り幅大きく見せられるモーション。
イージング番号37: easeOutInBack
![イージング番号37](https://aketama.work/wp-content/uploads/2020/05/37.gif)
戻って行って戻って行って戻るイージング。
イージング番号38: easeInBounce
![イージング番号38](https://aketama.work/wp-content/uploads/2020/05/38.gif)
人気のBounce系。ボールが弾むみたいなバウンドモーション。
イージング番号39: easeOutBounce
![イージング番号39](https://aketama.work/wp-content/uploads/2020/05/39.gif)
バウンドがだんだん小さくなり止まる。手技でやるのは結構面倒。
イージング番号40: easeInOutBounce
![イージング番号40](https://aketama.work/wp-content/uploads/2020/05/40.gif)
バウンドで加速し、バウンドで減速。ゆったり時間をとらないとガタガタして見えるかも。
イージング番号41: easeOutInBounce
![イージング番号41](https://aketama.work/wp-content/uploads/2020/05/41.gif)
ラスト41番目。真ん中でバウンド一時停止→再開。
【AviUtl】イージング一覧表 まとめ
![イージング一覧まとめ](https://aketama.work/wp-content/uploads/2020/05/Image-2020-05-24-15.47.30-1024x576.jpg)
ということでAviUtlイージングスクリプト、UndoFish様の「イージング(トラックバー版)」全種類一覧紹介でした。
イージング番号1~25
→ 扱いやすい汎用的な加減速。パラメータの差で微妙にニュアンスが違う。
イージング番号26~41
→ 特殊な加減速。動きにクセがあり、取り入れられると面白い。
という感じですね。
今回は円、拡大率、移動の3つを例にサンプル作成してみましたが、もちろんデフォルトの移動方法と同様に、シーンチェンジやアニメーション効果のパラメータ変更など幅広く利用することができます。
イージングをかけるだけで、動画の印象が一気にオシャレになりプロっぽい感じになるので、ワンランク上の動画編集を目指す方は必修です。
気にいったイージングがあれば、ぜひご自身の動画で取り入れてみてください。わかりやすい使い方を以下の記事で詳しく解説しています。
≫【Aviutl】はじめてのイージング !導入・使い方を解説【undofish版】
また「イージングをサクッと使いこなせるようになりたい!」という方向けにプロジェクトファイルの配布なども行っているのでぜひチェックしてみてください。
≫【PF配布】イージング解説のデモ動画を配布します【AviUtl】
当ブログでは他にもAviUtlの便利な使い方や、動画編集未経験から一気にステップアップできるオススメ書籍を紹介しています。
TwitterやYouTubeでも動画制作やゲーム実況に関する発信をしています。
当ブログは個人にて運営を行っており、読者の皆様のご協力で継続できております。大変厚かましいお願いではございますが、
- 当ブログの情報が少しでも参考になった
- 問題解決の役に立った
- あけたまの活動を応援してやっても良い
とお考えになりましたら、お力添えを頂けますと幸いです。
今回はここまで!
次回もよろしく!
こんにちは、はじめまして!
いつも勝手ながらお世話になっております。
質問なのですが、https://youtu.be/QI69H1MCyqI
こちらの動画のような、
「緩い振り子のような画像の移動から急に加速して画面外に消える」
という表現はイージングなのでしょうか?
ご意見お聞かせいただけると助かります。
アニマ様
コメントありがとうございます!
>「緩い振り子のような画像の移動から急に加速して画面外に消える」
>という表現はイージングなのでしょうか?
イージングで表現可能かと存じます!
ただ、中間点などの組み合わせが必要かなと思います。
当ブログで紹介しているUndoFish版イージングだと中間点を扱えなかったはずで、対応がやや手間かもしれません。
(オブジェクト分割してゴリゴリ作れば実現はできると思いますが、もっとスマートな方法ありそう)
他サイトで恐縮ですが、以下のように中間点を扱えるイージングスクリプトを使用するのが一つお手軽な方法かもです。ご参考までに
https://seguimiii.com/aviutl-tech/easingtra2020