この記事はAdventCalender2日目の記事です。

こんにちは、運動不足で不調のkimです。
去年はAfterEffectsのノイズエフェクトのお話をしましたが、今年もAfterEffectsのお話です。

Q.皆さんはアニメーションと聞いて何を思い浮かべますか？

「あ～アレでしょ？夜に閉店したお店のガラス壁を鏡代わりにしてクネクネしてr…」
それは”アニメーションダンス”。
身近なもので言えばパラパラマンガもアニメーションの1つですね。しかし、多くの人はテレビ等で放送されているテレビアニメを思い浮かべるのではないのでしょうか。それでは皆さん、

Q.アニメってどうやって作られているか知っていますか？

昔は手で一枚一枚アニメーターさんが手書きで書いていました。現代のアニメはデジタルアニメがほとんどです。現代までセル画を使うスタイルを貫いてきた『サザエさん』でさえ、2013年にデジタル制作に移行しています。(アニメーションの話は昨年のSYSKEN Advent Calendar 2015のアルセニー先輩の記事もあるのでこちらもどうぞ)

それはさておき、今回私がお話しするのは、今年SYSKEN Hackathonで作成した『にちじょうぐらし』の動画をほんのちょっとだけ手を加えて弥生祭で展示したので、そのほんのちょっとだけの作業のことについて話します。

はい。タイトルロゴ作ってのっけただけです。でもこの2秒足らずのアニメーションを作る(トレス作業込)のに一晩以上にかかってます。~~こいつ仕事おっせーな。~~どうしてこうなったのか話していこうと思います。

見ての通り今回のフォントはトレスしたものです。実は最初はフリーフォントのラノベPOP使って簡単に作ろうかなって思ってたんですが、弥生祭を直前にした状況で私は何を思ったかそこで妥協しませんでした。（ただのドM）また、トレスはillustratorを使ってパスを引いて作りました。今回はトレスの話がメインではないのでトレスの話はまた別の機会にしたいと思います。

動きをつけよう！

素材が完成したら配置してキーフレームを打って動きをつけていきます。私のおすすめのやり方なんですが、最初に動きの終わりのタイミングで位置・スケール・回転・不透明度の4つをまとめてキーフレームを打っておきます。これでどのように動かしても最終的にこの位置に戻ってくるようになります。
srfgas
終点を決めたら後は好きなように動きをつけます。このとき位置とスケールをイジる場合キーフレームにイージーイーズを適応するのをおすすめします。イージーイーズはキーフレームを選択して右クリック→キーフレーム補助→イージーイーズで適応することができます。
sfdfga
イージーイーズを適応するとどうなるのか。例ににちじょうぐらしの「う」に適応したものを見てみます。(「う」の動きは下の画面外から上に出てくる動きです)上の2枚の写真を見てください。下がイージーイーズを適応したものです。(赤い線がx方向、緑の線がy方向の変化)数学が得意ならこの2つの違いが動きにどう影響するかわかると思います。つまりイージーイーズを適応すると「ぎゅぅぅぅぅいぃぃぃぃん」という感じに動きます。(語彙力)

にちじょうぐらしロゴの文字は全て位置・スケール・回転・不透明度をいじって作っていますが、サブタイトル(?)はそれらに加えてマスクという技術を使ってます。マスクというのは選択した範囲のみを表示させたり隠したりするもので、マスクの作り方は去年のAdventCarendarで紹介したのでそちらを見てください。このマスクという機能を使うことで、何もないところから「シュッ」っと突然現れて出てくるようなアニメーションを表現できます。
masuku

実は使ってる技術はこれだけでアニメーション作っています。あと必要なのはセンスです。これだけはどうしようもないのでたくさん作品を作ったり人の作品を見るなりして磨きましょう。人の動画を見てどういう構成でできているか自分なりに考えてみるのも良いかもしれません。

最後に

ここで冒頭のアニメーションの話を思い出してみてください。アニメーションは何枚もの静止画でできています。今回私が作ったアニメーションは合計49フレーム、その中でも「う」のアニメーションは全部で15フレームです。これを昔の手法で一枚一枚手書きで描こうと思うと…私だと一晩どころか何週間もかかりそうです。アニメのデジタル化は、このような時間のかかる作業を簡単にし、尚且つ滑らかできれいなアニメーションを作ることができます。つまり何が言いたいか・・・