--- title: 良ージング入門 tags: #aftereffects author: [crashRT](https://www.docswell.com/user/crashRT) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/KJ4W48RV71.jpg?width=480 description: 開催時期：2022 年 12 月 KMC の例会講座でイージングについて解説しました。 ※GIFを多用していますがPDF化によりアニメーションは無効化されています...... published: April 13, 26 canonical: https://www.docswell.com/s/crashRT/K4NVWJ-easing --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/KJ4W48RV71.jpg) 良ージング入門 crashRT # Page. 2 ![Page Image](https://bcdn.docswell.com/page/LE1Y42Q47G.jpg) モーションって200種類あんねん # Page. 3 ![Page Image](https://bcdn.docswell.com/page/GEWGXRMZJ2.jpg) # Page. 4 ![Page Image](https://bcdn.docswell.com/page/47ZL6RQLJ3.jpg) もくじ的な何か 1. イージングって何？ 2. 値グラフの使い方 3. 人気のイージング3選と例 4. おまけ：気持ちいいモーションのための小技 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/YJ6W2R6MJV.jpg) 1. イージングって何？ # Page. 6 ![Page Image](https://bcdn.docswell.com/page/GJ5M286QJ4.jpg) イージング ● 動きに緩急をつけること。 ● モーショングラフィックスの「モーション」の部分 ● デフォルトだと等速度運動になっていることが多いけど、 加速度を調整してより良い動きに調整していく。 ● 映像制作に限らず、UIとか何かを画面上で動かすなら必要になると思う ● 映像とか見る時に気にしてみると面白いかも # Page. 7 ![Page Image](https://bcdn.docswell.com/page/9E294KMW7R.jpg) イージングをかける理由 ● 自然界がそうなっているから と言われることが多い。 ○ ● ● よく使われる例：自動車 自然界の動きはみんな見慣れている ○ 違和感を感じづらい ○ その結果、気持ちいい動き、と思ってもらいやすい。 完全に従う必要はない。あくまで参考にする程度 ○ 加速度をかなり大きくする人が多いかも # Page. 8 ![Page Image](https://bcdn.docswell.com/page/D7Y4MNX9EM.jpg) 良いイージング、略して良ージング ● 良いイージングのことを 良ージング と呼ぶことがたまにある ○ 一般的に知られてるかは微妙かも... ○ Twitter とかに生息している僕と同世代の映像制作者には伝わると思う... ● なめらかだったり、気持ちいい動きだったりすると呼ばれたりする ● 良ージングの例：ヒカレルサテライト（百舌谷さん） # Page. 9 ![Page Image](https://bcdn.docswell.com/page/VENYWX1DJ8.jpg) 2. 値グラフについて # Page. 10 ![Page Image](https://bcdn.docswell.com/page/Y79PX858E3.jpg) 値グラフとは？ こんなやつ。（After Effects の画面） 左の画面はカメラの ● X座標 ● Y座標 ● Z座標 ● Z軸回転 のグラフ ※Z軸は奥行き方向 # Page. 11 ![Page Image](https://bcdn.docswell.com/page/G78D28YZ7D.jpg) 動かすとこんな感じ https://crashrt.work/works/detail/33/ # Page. 12 ![Page Image](https://bcdn.docswell.com/page/L7LM2R41JR.jpg) 値グラフ ● 横軸が時間、縦軸が値になっているグラフ ○ 縦軸にはいろんなものの値が入る （例：座標、オイラー角、サイズ、エフェクトの強度、... ● このグラフを編集して各時刻における値を決定する ● キーフレーム と呼ばれる頂点をいくつか決める ○ ● グラフはすべてのキーフレームを通る キーフレームの間の形はベジェ曲線を用いて編集するものが多い # Page. 13 ![Page Image](https://bcdn.docswell.com/page/4EMY8RK5EW.jpg) 値グラフとベジェ曲線 ● キーフレームとハンドル → ● ベジェ曲線の詳しい話は割愛 ○ ● キーフレーム https://youtu.be/aVwxzDHniEw 見てね 大事なポイントは： ○ ハンドルはグラフの接線になる ○ 頂点の左右で折れ曲がっても良い ○ ハンドルが長いほど、 グラフはハンドルに近づく （ベジェ曲線の） ハンドル # Page. 14 ![Page Image](https://bcdn.docswell.com/page/PER95RXZJ9.jpg) ベジェ曲線 ● ● 右の画面みたいなもので編集することも ○ 2つの頂点とその間だけを取り出している ○ 2つの頂点が (0, 0), (1, 1) になるように変形 イージングのパターンなどは こういう画面上での形で語られることが多い ※ちなみにこの画面は After Effects の Flow というプラグインの画面 # Page. 15 ![Page Image](https://bcdn.docswell.com/page/P7XQKR61EX.jpg) さっきのGIF # Page. 16 ![Page Image](https://bcdn.docswell.com/page/37K95R1M7D.jpg) さっきのGIF # Page. 17 ![Page Image](https://bcdn.docswell.com/page/LJ3WK8Q2J5.jpg) 3. 人気のイージング3選 # Page. 18 ![Page Image](https://bcdn.docswell.com/page/8JDK3M96EG.jpg) Exponential (Expo) 名前のとおり、指数関数が元になっているイージング 例えばexpoIn は大体こんな式 (t ∈ [0, 1]) → 数式が簡単なので、プリセットとして用意されがち プリセットの中では一番緩急が強いので、それなりによく使われる # Page. 19 ![Page Image](https://bcdn.docswell.com/page/VEPK4R9Z78.jpg) 過激なイージング expoよりも端の加速度がよりきついやつたち 狭義には左の2つだけど、きつすぎるので少し弱めた右2つのようなのも使われる 端での傾きが0か∞だから、他のものとつなげやすいので人気 （少し工夫することが多いけど、それは後で） 緩急がはっきりしているのも人気な理由の一つかも # Page. 20 ![Page Image](https://bcdn.docswell.com/page/27VVXRMM7Q.jpg) 過激なイージング 傾きがほぼ∞のときはめっちゃ早いので、多少強引なことをしてもばれない 突然文字を変えるとか # Page. 21 ![Page Image](https://bcdn.docswell.com/page/5JGLVMGX7L.jpg) tan っぽい形 t=0, 1 での傾きがほぼ∞の状態 1個前の過激なイージングに近い モーションの始まりと終わりで高速になっているので いくつかを繋げるときとかに便利 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/47QY6RX5EP.jpg) tan っぽい形 カメラとかに使うと 面白い https://crashrt.work/works/detail/28/ # Page. 23 ![Page Image](https://bcdn.docswell.com/page/KE4W486VJ1.jpg) 過激なイージング 例 速度でごまかして 色々登場・退場させたやつ 速度出しておけば大抵の ことはごまかせる...！ https://twitter.com/crashRT_doyo/status/1149618368028106762 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/L71Y42V4JG.jpg) tan っぽいイージング 例2 曲はbuさんのぐるぐる超特急 シーン変わる前後でカメラを 早く動かしている （最初だけライトリークを使ってるけど...） 過激なイージングで早く動しておけば 大きな変化でも結構なんとかなる 僕の映像は大体似たことやってます https://crashrt.work/works/detail/30/ # Page. 25 ![Page Image](https://bcdn.docswell.com/page/G7WGXRLZE2.jpg) おまけ：気持ちいいモーションのために # Page. 26 ![Page Image](https://bcdn.docswell.com/page/4JZL6RMLE3.jpg) 1. 予備動作をつける “「来るぞ…」→ 「来たあああ」を狙い続ける” yama_koさん 「現代音同期論」 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/YE6W2RNMEV.jpg) 1. 予備動作をつける 過激なイージングで突然動くとびっくりするので、 先に動きそうな感じを出しておく ● びっくりさせずに済むし ● 動きを予想 → 期待通りの動き となって気持ちいい # Page. 28 ![Page Image](https://bcdn.docswell.com/page/GE5M285QE4.jpg) 1. 予備動作をつける 予備動作をつける方法はいくつかある ● ● 少し逆の動きをする、など ○ 物理法則で自然な形なら大体OK ○ 少し縮むとか（右のGIFは縮みながら逆移動） 補助線をつける ○ これは映像特有かも # Page. 29 ![Page Image](https://bcdn.docswell.com/page/97294KNWJR.jpg) 少し逆の動きをする さっきの画面では移動だったので、拡大縮小で使ったときの例 三角形のサイズを変える前に 少し膨らませたり凹ませたりしてます https://twitter.com/crashRT_doyo/status/1198919062681616384 # Page. 30 ![Page Image](https://bcdn.docswell.com/page/DJY4MNP97M.jpg) 補助線をつける 次の動きを先取りするような細い線を使うのがときどき使われる 移動→移動方向 回転→円形に 拡大縮小→放射状 に使われがち 後から足しやすいので結構便利 https://twitter.com/crashRT_doyo/status/1488832317175050245 # Page. 31 ![Page Image](https://bcdn.docswell.com/page/V7NYWX5DE8.jpg) 2. 動きを止めない このGIFの2つの円 下側に表示される円の方がなんかなめらかに動いてる感じがしませんか？ （＆逆に上側はなんかひっかかりませんか？） # Page. 32 ![Page Image](https://bcdn.docswell.com/page/YJ9PX8Y873.jpg) 2. 動きを止めない Expo系とか過激なイージングを組み合わせて tan みたいな形にした場合 つなぎ目は接線の角度が0になり一瞬だけ止まる これがひっかかりの原因になってしまう →接線を少し傾けて、常に動き続けるようにする 上側の円と下側の円のグラフ # Page. 33 ![Page Image](https://bcdn.docswell.com/page/GJ8D286ZJD.jpg) 3. 音同期 ● いわゆる「音ハメ」のことです ● イージングが音に合っているとより気持ちいい ● yama_koさんの現代音同期論がすべてなのでこれを見て下さい ○ BPM使おう ○ 予備動作をつけよう ○ 同期させる音の要素は一つにしよう ○ ずれるなら映像が早くなるようにしよう # Page. 34 ![Page Image](https://bcdn.docswell.com/page/LJLM2R91ER.jpg) おわり # Page. 35 ![Page Image](https://bcdn.docswell.com/page/47MY8RZ57W.jpg) まとめ ● 動きに緩急つけるのがイージング ● 動きは値グラフとかで操作 ● 過激なイージングが人気 ● 良い動きにするためのコツ ○ 予備動作 ○ 速度＝0にしない ○ 音同期も大事 ありがとうございました！