「アニメーションエクササイズ集」
グラフエディター練習
グラフエディター練習
「レベル」
レベル1「12原則を学ぶ段階」「3Dプログラムを学ぶ段階」
「概要」
「概要」
Translate(移動)編
簡単なオブジェクト(sphereや cube等)を使い
簡単なオブジェクト(sphereや cube等)を使い
ー直線
ー斜め
ー8の字
ー円
等の動きをつける。
そしてグラフがどうなるか理解する。
ー斜め
ー8の字
ー円
等の動きをつける。
そしてグラフがどうなるか理解する。
Rotate(回転)編
人間リグの腕等を使い上記と同じ事をRotation(回転)でやる。
「学べる内容・目的」
ーグラフエディターの使い方
ーどういうグラフと組み合わせがどういう動きをするのかの理解
------------------------------------------------------------------------------------------------
このエクササイズは2Dだとまったく必要ない奴なんですが。3Dでアニメーションをやる際、回転Rotationとか移動TranslateのXYZの数値とグラフエディタのグラフの関係をわかっていると3Dアニメーションをやるうえでとても役に立つのです。
ーどういうグラフと組み合わせがどういう動きをするのかの理解
------------------------------------------------------------------------------------------------
このエクササイズは2Dだとまったく必要ない奴なんですが。3Dでアニメーションをやる際、回転Rotationとか移動TranslateのXYZの数値とグラフエディタのグラフの関係をわかっていると3Dアニメーションをやるうえでとても役に立つのです。
まあ実際、数学とかいろいろあるのでしょうけど、
こういうグラフの形なら、こうなる!というのを理解するためにとても役立ちますし、一度自分でやってみると、感覚的にもつかめてよいです。
(赤い線に囲まれている部分が1サイクルになります。)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhSF8KLDAi3qyWE_hNbTLN88Et1EI0JkrXr_TG5pwPjkUpG8iNy5qzIAP-6w9UfhGGUdjtXDe9M1YPrqAM2o7NRWxCjDrKZ4Fn9m-q_4Qo_tY-iyeliNiZJwxu5geU4QvW8W3PLHZplm5/s320/01.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVoN0byKv2bE0hOnWxj2IHLzqSef8A6TQYwT_giu7fyV-KsayB4JzVBBVjo1FgPDuNJUxRYw97ps9dUBXWj6wWWrBBPhax90itvpNn9B5O0Z7Dd42qQKMfJIYtAiTsWBxo-P9sE3UkiJki/s320/Graph01.JPG)
例えば、このボールのサイクル。これは上下(TlasnlateY軸)で動いているので、こういうグラフの形になります。
これはまあ、とても単純だし簡単ですよね。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM-maSIf8XTZY-ZuONzj7OYH_i0N43he2wI7AKbrkR_bb1NAFbD9NQYzsQsZoAZqg5hBkIN3hUf4Kxc99PJkwpHPXS3MmLqQTh-7Jz_VfHjMgHE5ayze-uSAxBJzghjdBLuNg5iUiyw2N/s320/06.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwDAL33RV3ilKZQrbwYo0EhdRyinQ1ZPLklcbvoGG7WJU4SM-LNR2FOHP1nTS4s-40br7qBy_NI-mX3bWZZuhWAfMt05qe-kWIvoOWB9WctSaQuqmZwr4S77HuDWdLV_HVLGnHV4UGE4xU/s320/Graph06.JPG)
で、これは左右に動いてるやつ、これはTlanslateZ軸ですが、3D空間なので、手前と奥に動く場合はTlanslateX軸に同じグラフの形になりますね。
どちらの例も40フレームあります、で、グラフの形は(キャプチャーの仕方でちょっと違って見えますが、)全く同じです。
では上の二つのグラフを組み合わせたらどういう動きになるでしょう?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUQaEP7WIkWtTNqC5NDiJUVAM3wLPQOx47MyAkORhezGhWp4fi4ee0rHwKPSZqjng_aEsUtaRmKpTO2YHVgM7Wo2ydO1_7nm13SQqUona3rvNUtOYmkCT4mC00z3J3bkOv3ZQXlcZs3Ph/s320/07.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDSJkDc3dqBZB-mfnCiBpbZr8QJ7mgpNxoxGz0NjbLA73D5xyAMzbp-4d1YvZ68O17Yq4-L41YN1tnzAm2hnkTduVRZCD77dVkiv8cJWk8LRUL5rmiErenwn9PkldTOvl6qQ3hZA_0Lj-f/s320/Graph07.JPG)
こういう感じで斜めの動きになります。
じゃあ、Tlanslate Zを反転させたら?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_YVq_9oRaJBvpslQuFrwnGCG62pDwYbjFd6GSuFtStoKUOo7wgoeFNersL7vXujioKkPqgrEiVBNX28qhhE5afGs3bus4JZJ8e-0z-RkfXT5Bp7sazMKXh2HoFdQaJeJIk3FRkPQU9vl/s320/02.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSHM1cKSKj1slBi8tC3U1U5Ewo95tFSO4oQ0ezmdpFatxEKaQVUsgMGA5UyUDrgMtbaEhYqGDdfAHDJ-YQLkLHCs-jETfhzuj7RUTYPJYaJaW_NU3z6Fss_5xMhoSNUAbrmnfxx58cUK92/s320/Graph02.JPG)
逆側の斜めの動きになります。
じゃあ、同じ感じで、ボールに円を描かせたかったらどういうグラフになるんでしょう?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSbGf24A_wRLctaHnXXtq62TB390QW_8ZCvBsKsB0YDKEVvrKDNaSP0CL_SliJdKPjhcT1ERumZFJKnd2qWuE53Bvl7jX-81QxIEoUdoh0W0kgD4-tpjGg3NLzMUUEs6gVWvls_c0LhZg/s320/04.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivavuDQzLUVonUQCMAqHeRumBtFmQtcgXA1vV0bS1MxYUs7FBsjBUah-qEyDUu9_kd_k6uPHt1rIVGPLRLaWejYcRM2KNvvgHOPkAqR9aufjDTzFNM2vaceGsSnavNuohkWheIeeLNsSjx/s320/Graph04.JPG)
グラフの形はまったく同じです。ですが、ZとYのタイミングを半分ずらす。すると、きれいな円を描きます。
じゃあ、次は8の字です。どうなるでしょう?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjYq7F8OGATBlDYYUXz3GHbVo6cbhYtf7xjXiqHJMG-PQk_tYwjEHi1eUXgjmcOlq4m0D4Pk2LzRUgHDLDqMqfNuH96TB2_9mkYDlwRTO58n8bwWNiduBiSeSmPnOjCBhDWiETsDKZBtp/s320/05.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDlyMWaKoSxjuh3UOrEGEX9IrEp_eOEn32VyS72v2lvLnY7icIoBOgFaF4DPp39TdxQkxWYlU81RRsc-p_fgj1nw38eR5Y0Gi2JTFLESNvFq1aBEk0HxCH4CiR0ot3b19QTvoWFVxdA-2/s320/Graph05.JPG)
Zを二倍の速さにして、TZのタイミングを少しずらすと、このように八の字に。(またこれだとZを二倍にしていますが、Yを二倍の速さにすると∞みたいな横八の字になります。)
と、グラフのタイミング等をずらすだけで、こんなにいろいろとバリエーションができるのです。この各数値の組み合わせでどういう動きになるか?というのを少しでもわかっていると3Dアニメーションをやるうえでとても役に立ちます。。
この例ではMayaを使っているので、Yが上下軸になっていますが、どの軸がどの方向でも3Dプログラムは大体この3軸で場所を指定する、というものなので、どういう組み合わせがどういう動きを作る、というのさえ押さえておけば応用は聞くと思います。
で、このボールの例は移動軸ですが、回転軸でも似たことができます。
例えば人間リグだったら、FKの時の腕なんかで使えます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5zfqb_9KbQN7XXaCh6bFlplAvAS3aqPnUCDssZ9klkLElkGfmmCoWFEEmzSGemZouhqZPrtCRHaPABFsldJAyrfHJRjz8Ekn2vPcjcnNJsPvYJvkX2oE3wgqvJ-jYzkUIWacC-U4vEBe1/s320/A02.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn4eakNUvxEeostYKUJr6e3A_HAypqdpJrIhvXuvhoi7DsodcdL9V704TJfvlbIJiDrlkaH8IQXN10ptmy-n_Kbjy6pp0yyizCWGwoGWFe3F55C47gU2JinpdGMSmE4PYem7nynFzWERe2/s320/Arm02.JPG)
リグによっては軸の方向が違ったりするので、これはUltimateRigsというリグを使った場合ですね。
回転のYを、さっきのボールと同じ調子で動かすと、こう、左右に腕を振る動きができます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjft_MQv-2TTXMAO7xwPixExEozoQo8Rir40wh2n9zQGEUn17Qhc56YVoqLgS05JMPFIw_MTfXbuh333rfnnUmADCNQlwJ8WnXtWUJuJi3p59RDpaLgXSYCWa-1c0XATkO04UcFw9IqTDdt/s320/A03.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUFhAl3UDKh4caN-p4ES5hfeyKI55p80oMqR-ymnjyVLEB4kPxl_6TU5XMfZ1Kuxb0JZvoDA0ZAbFKsixN3W2oV8FJMBQiouVYRHF7CqzgaLuChbLY_DMW13IuS1HY1gD_wng1_hiTDtA8/s320/Arm03.JPG)
で、そこにYの二倍の速さのZの回転を加えると、こういう風に半円で腕ふりをするような動きになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-5xqmhTj2tCxFvaCJaWnrxImg9mIn9od_5RljWAeX0oAQxxy28tk7MCBLHakJN5ZbfVxDOIunXIaZk_IZwH-RASjBf0cKDLKVeI4B_VRA8BpNkJEzUh_-OE1-BYAW0lo-4wh77y3d9Hn/s320/A04.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmK8kMqKI0ynrll22DV9nqM3prU0xZUtpk1uFlYJcWvu9JltExyJs2yTvgCcignR1u5DOVwQ89Bp4ftnHFDySuZcj2qfZg98-QZr2o0-wCFvDaf4CA9jexnNuSSrWtasKgDl-uOBHxGjnr/s320/Arm04.JPG)
こちらは腕を一回転です。ボールと一緒で同じ形のグラフを半分ずらすとこの動きになりますね。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPni7zs0VUT6IcO3zxRoaQLihl1ud93KCoFTzkxfsDPWd-wrN8dnLnfg31w5clSZhQXoktRibY5Jb-oqU6pPS8GuP9fdpQXAvK7Mezct2TFq6YzT-zxVRQOAjefqwe7n0PJq1_RtjWqPZy/s320/A01.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPFZvZOPXqgJ35qdkpnUabBxCwXbo7akyC0O8z6iQEam8MowUC9d8Bm6hQ49-Wsek40Fn6jE2YP00czQaOVwBvdkQ0Kb5RUJy0jb2Ox8uixVb86Hunj-iqszO9l3TJh4VdN-iNFcX0JKd/s320/Arm01.JPG)
そして八の字、これは半円の動きのグラフ(Zが二倍)からZをちょっとずらすとこうなります。
ここに上げただけでなく、グラフを少しづつずらしたり、タイミングを変えたりして、腕やボールの動きがいったいどんな風になるか、グラフと照らし合わせつつ色々試してみましょう。
これをやるだけでかなりグラフに対しての動きの理解が深まります!
こういうグラフの形なら、こうなる!というのを理解するためにとても役立ちますし、一度自分でやってみると、感覚的にもつかめてよいです。
(赤い線に囲まれている部分が1サイクルになります。)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhSF8KLDAi3qyWE_hNbTLN88Et1EI0JkrXr_TG5pwPjkUpG8iNy5qzIAP-6w9UfhGGUdjtXDe9M1YPrqAM2o7NRWxCjDrKZ4Fn9m-q_4Qo_tY-iyeliNiZJwxu5geU4QvW8W3PLHZplm5/s320/01.gif)
例えば、このボールのサイクル。これは上下(TlasnlateY軸)で動いているので、こういうグラフの形になります。
これはまあ、とても単純だし簡単ですよね。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtM-maSIf8XTZY-ZuONzj7OYH_i0N43he2wI7AKbrkR_bb1NAFbD9NQYzsQsZoAZqg5hBkIN3hUf4Kxc99PJkwpHPXS3MmLqQTh-7Jz_VfHjMgHE5ayze-uSAxBJzghjdBLuNg5iUiyw2N/s320/06.gif)
で、これは左右に動いてるやつ、これはTlanslateZ軸ですが、3D空間なので、手前と奥に動く場合はTlanslateX軸に同じグラフの形になりますね。
どちらの例も40フレームあります、で、グラフの形は(キャプチャーの仕方でちょっと違って見えますが、)全く同じです。
では上の二つのグラフを組み合わせたらどういう動きになるでしょう?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPUQaEP7WIkWtTNqC5NDiJUVAM3wLPQOx47MyAkORhezGhWp4fi4ee0rHwKPSZqjng_aEsUtaRmKpTO2YHVgM7Wo2ydO1_7nm13SQqUona3rvNUtOYmkCT4mC00z3J3bkOv3ZQXlcZs3Ph/s320/07.gif)
こういう感じで斜めの動きになります。
じゃあ、Tlanslate Zを反転させたら?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_YVq_9oRaJBvpslQuFrwnGCG62pDwYbjFd6GSuFtStoKUOo7wgoeFNersL7vXujioKkPqgrEiVBNX28qhhE5afGs3bus4JZJ8e-0z-RkfXT5Bp7sazMKXh2HoFdQaJeJIk3FRkPQU9vl/s320/02.gif)
逆側の斜めの動きになります。
じゃあ、同じ感じで、ボールに円を描かせたかったらどういうグラフになるんでしょう?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSbGf24A_wRLctaHnXXtq62TB390QW_8ZCvBsKsB0YDKEVvrKDNaSP0CL_SliJdKPjhcT1ERumZFJKnd2qWuE53Bvl7jX-81QxIEoUdoh0W0kgD4-tpjGg3NLzMUUEs6gVWvls_c0LhZg/s320/04.gif)
グラフの形はまったく同じです。ですが、ZとYのタイミングを半分ずらす。すると、きれいな円を描きます。
じゃあ、次は8の字です。どうなるでしょう?
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjYq7F8OGATBlDYYUXz3GHbVo6cbhYtf7xjXiqHJMG-PQk_tYwjEHi1eUXgjmcOlq4m0D4Pk2LzRUgHDLDqMqfNuH96TB2_9mkYDlwRTO58n8bwWNiduBiSeSmPnOjCBhDWiETsDKZBtp/s320/05.gif)
Zを二倍の速さにして、TZのタイミングを少しずらすと、このように八の字に。(またこれだとZを二倍にしていますが、Yを二倍の速さにすると∞みたいな横八の字になります。)
と、グラフのタイミング等をずらすだけで、こんなにいろいろとバリエーションができるのです。この各数値の組み合わせでどういう動きになるか?というのを少しでもわかっていると3Dアニメーションをやるうえでとても役に立ちます。。
この例ではMayaを使っているので、Yが上下軸になっていますが、どの軸がどの方向でも3Dプログラムは大体この3軸で場所を指定する、というものなので、どういう組み合わせがどういう動きを作る、というのさえ押さえておけば応用は聞くと思います。
で、このボールの例は移動軸ですが、回転軸でも似たことができます。
例えば人間リグだったら、FKの時の腕なんかで使えます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5zfqb_9KbQN7XXaCh6bFlplAvAS3aqPnUCDssZ9klkLElkGfmmCoWFEEmzSGemZouhqZPrtCRHaPABFsldJAyrfHJRjz8Ekn2vPcjcnNJsPvYJvkX2oE3wgqvJ-jYzkUIWacC-U4vEBe1/s320/A02.gif)
リグによっては軸の方向が違ったりするので、これはUltimateRigsというリグを使った場合ですね。
回転のYを、さっきのボールと同じ調子で動かすと、こう、左右に腕を振る動きができます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjft_MQv-2TTXMAO7xwPixExEozoQo8Rir40wh2n9zQGEUn17Qhc56YVoqLgS05JMPFIw_MTfXbuh333rfnnUmADCNQlwJ8WnXtWUJuJi3p59RDpaLgXSYCWa-1c0XATkO04UcFw9IqTDdt/s320/A03.gif)
で、そこにYの二倍の速さのZの回転を加えると、こういう風に半円で腕ふりをするような動きになります。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-5xqmhTj2tCxFvaCJaWnrxImg9mIn9od_5RljWAeX0oAQxxy28tk7MCBLHakJN5ZbfVxDOIunXIaZk_IZwH-RASjBf0cKDLKVeI4B_VRA8BpNkJEzUh_-OE1-BYAW0lo-4wh77y3d9Hn/s320/A04.gif)
こちらは腕を一回転です。ボールと一緒で同じ形のグラフを半分ずらすとこの動きになりますね。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPni7zs0VUT6IcO3zxRoaQLihl1ud93KCoFTzkxfsDPWd-wrN8dnLnfg31w5clSZhQXoktRibY5Jb-oqU6pPS8GuP9fdpQXAvK7Mezct2TFq6YzT-zxVRQOAjefqwe7n0PJq1_RtjWqPZy/s320/A01.gif)
そして八の字、これは半円の動きのグラフ(Zが二倍)からZをちょっとずらすとこうなります。
ここに上げただけでなく、グラフを少しづつずらしたり、タイミングを変えたりして、腕やボールの動きがいったいどんな風になるか、グラフと照らし合わせつつ色々試してみましょう。
これをやるだけでかなりグラフに対しての動きの理解が深まります!