描いたイラストを動かしてアニメーションさせたい……。
イラストを簡単に動かせるアプリケーションはないかな？
今回は、アニメーションが簡単に作れるアプリ、「AnimeEffects」をご紹介します。
この記事の目次
AnimeEffectsの基本的な使い方
AnimeEffectsはどんなアプリ？
AnimeEffectsは、オープンソースのアニメーションアプリです。
2Dイラストを読み込み、パーツごとに動きを設定することで、簡単にアニメーションが作れます。
Windows・Mac・Linux用に公開されており、PCのデバイスにインストールして使用できます。
①AnimeEffectsをインストールする
公式サイトのダウンロードページを開く
AnimeEffectsの公式サイトを開き、アプリのダウンロードページに遷移します。
アプリをダウンロードする
ダウンロードページの下の方に、アプリのファイルが表示されています。
お使いのPCに応じてファイルをダウンロードして、アプリをインストールします。
AnimeEffectsを実行する
インストール後、AnimeEffectsが使えるようになります。
②プロジェクトの作成／設定
プロジェクトの新規作成
AnimeEffectsにイラストを読み込み、絵を動かしてみましょう。
メニューバーから[ファイル]→[プロジェクトの新規作成]を選択します。
プロジェクトの設定
続いて、プロジェクトの設定を行います。
初期リソース
アニメーションさせたい画像を、リソースとして読み込みます。
jpgやpng、gifの他にも、psdファイルを読み込めます。
AnimeEffectsは、レイヤー構造や合成モードにも対応しています。
パーツごとにレイヤー分けをしているpsdファイルを読み込むと、作業がしやすいです。
最大フレーム
アニメーションの全体の長さを設定します。
フレーム毎秒
1秒間に表示されるフレームの数を指定します。
フレームとは何か？
アニメーションでは、複数枚の異なる絵を連続的に切り替えて、動いているように見せています。
アニメーションを構成する1枚の絵のことを、「フレーム」と呼びます。
「フレーム毎秒」はFPSとも呼ばれています。
フレーム毎秒が「8」であれば、1秒間に8枚の静止画（フレーム）を使います。
フレーム毎秒が「24」であれば、1秒間に24枚の静止画（フレーム）を使い、動きも滑らかに見えます。
最大フレーム数 = フレーム毎秒 × アニメーションの秒数
フレーム毎秒を8に設定して、5秒間のアニメーションを作りたい……。
この場合は、「8」に「5」を乗算して、最大フレーム数に「40」を入力すると、全体の長さが5秒になります。
フレーム毎秒を24に設定して、2.5秒間のアニメーションを作りたい……。
この場合は、「24」に「2.5」を乗算して、最大フレーム数に「60」を入力すると、全体の長さが2.5秒になります。
読み込むリソース
今回は、ペイントソフトのクリスタで作成した絵を読み込みます。
絵をレイヤーごとに分けて描いた後は、psd形式で出力して、AnimeEffectsのリソース欄から読み込みます。
③画面の解説
AnimeEffectsでは、読み込んだリソース（画像）に移動や変形などの処理を加えて、アニメーションを作っていきます。
AnimeEffectsの編集画面を見ていきましょう。
ツールドック
画面の左上には「ツールドック」があります。
変形やボーンなど、各種ツールを選択できます。
プロパティドック
画面の右側には「プロパティドック」があります。
位置・角度・拡大率などが数値で表示されおり、値を編集できます。
変形などの操作はキャンバス上からも可能ですが、プロパティドックでは、より細かい調整ができます。
不透明度や深度（手前・奥の表示設定）も、プロパティドックで調整できます。
リソースウィンドウ
「リソースウィンドウ」には、リソースが一覧で表示されます。
アニメーションに必要な画像や素材は、リソースウィンドウから読み込みます。
アニメーションドック
画面の左下には、「アニメーションドック」があります。
リソースウィンドウで読み込んだリソースは、アニメーションドックから選択して、キャンバス上に表示できます。
リソースをキャンバスに表示したいときは、アニメーションドックの上部を右クリック→[レイヤーを作成]→リソースを選択します。
タイムライン
アニメーションドックの右には「タイムライン」があります。
タイムライン上では、キーフレームと呼ばれるポインタを追加することで、絵の動きを作ることができます。
④絵を移動する
最初のボールの位置をキーフレームに追加する
どのようにアニメーションを作っていくのか、流れを見ていきましょう。
ボールをアニメーションさせたいので、左下のアニメーションドックから「ボール」レイヤーを選択します。
続いて、[変形]ツールを選択してボールをドラッグして、ボールの位置を移動させます。
ボールを移動させると、画面下のタイムラインにキーフレームが自動的に追加されます。
このキーフレームには、上方にあるボールの位置が記録されています。
落下点のボールの位置をキーフレームに追加する
タイムラインの上部にある水色のポインタを動かして、フレームを移動します。
フレームを移動した後は、[変形]ツールでボールをドラッグして、ボールを下の方に移動させます。
先ほどと同じように、ボールを移動させるとキーフレームが自動的に追加されます。
このフレームでは、下方にあるボールの位置が記録されています。
これで、ボールが落下する動きの完成です。
キーフレームとキーフレームの間は自動的に補間され、最初のフレームから現在のフレームまで、ボールが落下している動きになります。
ボールの動きのタイミングを決める
このままではボールの動きが等速なので、少し不自然に見えてしまいます。
動きにメリハリをつけるため、キーイージングの設定を行います。
タイムラインからキーフレームを選択して、右クリックをします。
[キーイージングを～]→[指数]に設定します。
ボールが落下する中間地点での動きが大きくなり、メリハリが出ます。
ボールの動きをループさせる
このままでは、ボールが床に落ちたままです。
バウンドするようなアニメーションにしたいので、ループの設定を行います。
メニューバーから[プロジェクト]→[ループ設定]を選択して、[アニメーションをループさせる]の項目にチェックマークを入れます。
[アニメーションをループさせる]がONになっていると、最後のキーフレームから最初のキーフレームへと、繋がるようになります。
落下したボールは最初の位置に戻るために上部へ動き、バウンドしているように見えます。
⑤絵を変形する
最初のボールの形をキーフレームに追加する
ボールが落下する際に、ボールが伸縮する動きを加えます。
まずは、ボールの最初の形をキーフレームに登録します。
タイムラインの水色のポインタを最初のフレームに移動させます。
続いて、画面右のプロパティドックの[拡縮]を押します。
ボールの拡大率の情報を記録したキーフレームが、タイムラインの二段目に追加されます。
（[変形]ツールで青色のガイドラインをドラッグして拡大操作をしても、キーフレームを追加できます）。
落下点のボールの形をキーフレームに追加する
タイムラインの水色のポインタを、ボールが床に着くフレームに持っていきます。
[変形]ツール内にある[重心を移動させる]ボタンを選択します。
ボール上に表示されている重心を、ドラッグ操作で下の方に移動させます。
重心を下に持ってくることで、拡大縮小の基準位置も下部に寄ります。
次に、左にある[変形]に切り替えて、ボールを横に伸ばします。
⑥絵の不透明度を変更する
最初の影をキーフレームに追加する
続いて、影の動きを作ります。
左下のアニメーションドックから、「影」レイヤーを選択します。
タイムラインの水色のポインタを最初のフレームに移動します。
影は、大きさと不透明度の動きを作ります。
プロパティドックから「拡縮」と「不透明度」のボタンを押して、二つのキーフレームを追加します。
最初のフレームでは、ボールが床から離れているので、「不透明度」の割合を下げて影を薄くしておきます。
落下点の影をキーフレームに追加する
タイムラインの水色のポインタを、ボールが床に着くフレームに持っていきます。
[変形]ツールで、影の形を横に伸ばします。
ボールが床から近い位置にあるので、プロパティドックの「不透明度」の割合を上げて影を濃くします。
影の動きのタイミングを調整する
ボールの動きと同じように、影の動きのタイミングを調整します。
キーイージングを「指数」に設定して、メリハリをつけます。
キーレンジは「イン」・「アウト」・「オール」の3種類が選択でき、動きの始まりと終わりのどちらに適用するのかを選べます。
キーイージングの設定は、タイムラインの他にも、プロパティドックから変更することもできます。
ボールのアニメーション
ボールの位置と形、影の形と不透明度に動きをつけて、ボールがバウンドするアニメーションを作っています。
⑦アニメーションの出力
ファイルを出力する
完成した後は、[ファイル]→[（レガシー）エクスポート・プロジェクト～]を選択して、ファイルに出力します。
動画形式の出力には「FFmpeg」が必要
AnimeEffectsのデフォルト設定では、jpg・pngの連番出力にしか対応していません。
gifやmp4などの動画形式で出力したい場合は、「FFmpeg」のコーデックをダウンロードする必要があります。
FFmpegは、AnimeEffectsの出力時の変換処理に必要なフレームワークです。
FFmpegのダウンロードページを開く
FFmpegは、下記の配布サイトよりダウンロードできます。
WindowsのPCをお使いの方は、Windowsのアイコンを選択して、「Windows builds from gyan.dev」のページに遷移します。
FFmpegをダウンロードする
「ffmpeg-git-full.7z」のファイルをダウンロードします。
FFmpegのファイルを展開する
ファイルを展開すると、「bin」フォルダの中に「ffmpeg.exe」のファイルがあります。
「ffmpeg.exe」を、AnimeEffectsフォルダ内の「tools」フォルダ内に移動させる
「ffmpeg.exe」を、AnimeEffectsをインストールしたフォルダ内にある「tools」フォルダの中に移動させます。
「tools」フォルダがない場合は、「tools」フォルダを新規作成してください。
AnimeEffectsをインストールしたフォルダが見つからない場合は、AnimeEffectsのショートカットを右クリック→[プロパティ]→[ファイルの場所を開く]を選択すると、AnimeEffectsのフォルダを開けます。
AnimeEffectsで動画を出力する
「ffmpeg.exe」が正常に認識されると、AnimeEffectsで動画をエクスポートできるようになります。
AnimeEffectsのその他の機能
外観の変更
[オプション]→[一般設定]→[一般]→[テーマ]の項目から、アプリのインターフェースの外観を変更できます。
見えづらいボタンなどがある場合は、外観を変更してみてください。
画像を切り替える
特定のフレーム間だけ別の絵を表示したい……。
そんなときは、プロパティドックにある「リソース」の項目から、読み込むリソースを変更してみてください。
自由変形で形を変える
[自由な形状に変形させる]ツールを使うと、絵を膨らませたりすぼめたりできます。
柔らかいものを変形させたいときに適しているツールです。
ボーンで形を変える
ボーンを追加する
ボーンを使うと、関節が動いているようなアニメーションが作れます。
[ボーンを追加する]ボタンを押して、「ボーン構築」の欄の中にある「＋」ボタンを選択します。
動かしたい箇所をクリックしていき、ボーンを追加します。
影響力をペイントする
[影響力をペイントする]を選択して、ボーンの上をなぞります。
なぞった部分には、半透明の赤い領域が追加されます。
ボーンを動かす際には、赤い領域内の絵が追従して動きます。
動かしたいものを全て囲うように、赤い領域を作ります。
ボーンを動かす
[ボーンをマニピュレート]を選択して、キャンバス上のボーンをドラッグして動かします。
すると、ボーンの動きに合わせて、絵が追従して動きます。
キャラクターの体の動きや髪のなびきを作りたいときは、ボーンを活用してみてください。
まとめ
アニメーションが簡単に作れるアプリ、AnimeEffectsの紹介でした。
AnimeEffectsはレイヤーごとに動きを設定でき、キャラクターなど様々なものを動かせます。
簡単にアニメーションを作りたい方は、AnimeEffectsをぜひ使ってみてください。
