アニメーションを作ってみたいけど、どう絵を描いていくのか、まずなにから設定するのかわかりませんよね。ライトが点いたり消えたりするアニメーションで説明していきます。
Procreateでのアニメーション作成の流れは、ざっくりと「アニメーションアシストをONにする」
「フレームを追加する」「絵を描く」といった感じです。
ProcreateとはiPad専用の有料イラスト制作アプリです。ブラシの種類が豊富で、Apple Pencilを使えば力の入れ方次第で線に強弱をつけることもできます。アニメーション機能にも対応しています。まだApple Pencilをお持ちでないかたで、ペンで絵を描いてみたい！そんな方におすすめのタッチペンです。私は絵を描き続けるのかわからなかったので、こちらのペンでデビューしました。
このペンでも十分でしたが「線の太さ」や「色の濃さ」をペンに加える力によって表現することはできませんでした。
メモアプリなどにも問題なく書けたので満足した商品でした！
アニメーションってたくさん絵を描かなきゃいけないよね？
簡単なものなら２枚の絵からアニメーションにできるよ！
目次
アニメーションアシストをONにしてフレームを追加する
画面右上の🔧アクションツールからキャンバスを選択して上から２番目の「アニメーションアシスト」をONにします。
画面右下の「フレームを追加」をタップしてフレームを追加します。
フレームが追加されました。レイヤーパネルを開いてみてみるとレイヤー１の上に「フレーム２」とあります。
レイヤーパネルからもフレームを追加することができます。
+ボタンをタップするとレイヤーが増え、画面下にもフレームが増えたのが確認できます。
レイヤーパネルから追加すると「レイヤー」と表記されて
画面したのフレームを追加から追加すると「フレーム」って表記されるんだね！
青い線が３枚目のフレームの下にあります。
この青い線があるフレームに絵が描かれます。
１枚目のフレームに絵を描いていきたいので１枚目のフレームをタップで選択します。
絵を描いて動かす
１枚目の絵にこのような絵を描きました。
２枚目の絵には同じ絵で色を付けてみます。
画面下から「再生」してみます。
ちょっと早いですが２枚の絵でライトが点いたり、消えたりするアニメーションが作れました。
設定
再生の種類
【ループ】
アニメーションを繰り返します。最初から最後、最初から最後･･･。
【ピンポン】
最初から最後、最後から最初、最初から最後と往復して再生されます。
【ワンショット】
最初から最後の1度だけの再生です。
フレームレート
フレームレートとは（FPS）アニメーションの滑らかさを決めるものです。アニメーション動画が１秒間に何枚の絵（静止画）で作られているかを表しています。Procreateでは最大60枚のフレーム/秒で設定できます。
フレーム数が多いほど滑らかな動きになります。
2フレームだけのアニメーションをゆっくり動かすにはフレーム数を下げます（保存するときに設定することもできます）。
オニオンスキンの不透明度
一つ前のフレームの絵を表示させる不透明度のことです。前の絵が見えることで次に描く絵が楽になります。
前のフレームだけではなく、後ろのフレームに描かれている絵も表示されます。
絵を描くときに前後の絵がハッキリ見えない方がいい場合は不透明度を下げます。
1つの背景写真を全てのフレームに割り当てる
フレームの先頭に背景にしたい写真を挿入します。挿入した写真のフレームをタップします。
「フレームオプション」が出てくるので「背景」をONにします。
するとすべてのフレームにその背景が配置されます。
写真の挿入だけでなく、レイヤーに描いた絵や文字も背景として設定できます。
GIFアニメーションを背景にすることはできません。
背景に設定されたフレームは移動できないよ！
前景も設定できる
１つの画像を背景にすることができますが、同時に前景も設定ができます。すべてのフレームの前に画像や文字、イラストを配置したいことがあると思います。
前景に設定したい画像・文字・イラストを一番後ろに配置します。フレームをタップし、「前景」をONにするとすべてのフレームの前に配置されます。
背景と前景が同時に設定できるのがいいね！
保持する時間
レイヤーをタップすると表示される「フレームオプション」にある「長押しする時間」（保持する時間）とは特定のレイヤー（フレーム）の表示時間を長くすることができます。
バーを右にスライドして、フレームの数だけ表示時間を長くすることができます。
一時停止しているみたいだね！
バージョン5.2.5では「長押しする時間」から「保持する時間」に変更されたよ！
保存するファイル形式
アニメーションを保存するには、画面右上の🔧アクションツールから「共有」を選択して
「アニメーションGIF」「アニメーションPNG」「アニメーションMP4」からファイル形式を選択します。
【アニメーションGIF】
ファイルサイズが小さく、同じフレームを再利用できるので2枚のフレームで作成されたアニメーションでもずっと動き続けてくれます。
サイトに表示するのにおすすめな形式です。
【アニメーションPNG】
アニメーションGIFより見た目の劣化がなくきれいです。
ただ、サポートされていないブラウザーではアニメーションを再生することができません。最初のフレームが静止画として表示されます。
【アニメーションMP４】
ファイルサイズが小さいながらも高画質な動画ファイルですが、GIFアニメーションのように繰り返しフレームが再生されないので、同じ動作を繰り返すアニメーションでも多くのフレームが必要になります。
アニメーションを保存するには「アニメーションGIF」がおすすめかな！
その他書き出しファイル形式についてはこちらの記事をご覧ください。
サイトなどで載せる場合「Web対応」にする
GIFアニメーションをウェブサイトなどに載せる場合は、「ウェブ対応」を選択してください。
ファイル容量が軽くなるのと、ウェブ対応で書き出しをしないとサイトに載せた時にアニメーションが動いてくれませんでした。
まだほかに機能はありますが、ここまでできれば大体のアニメーションは作れます！
描いたイラストが動くと楽しいですよね！是非アニメーションを作成してみて下さい。
作成したアニメーションを「web対応でファイル形式をgif」にして保存し、自分のウェブサイトでURLを付けてバナーのような役割をさせることもできるよ！
