2018年6月12日

デザイン

SketchのAnimatemateでGifアニメを作ろう

Animatemate GIF アニメーション

はじめに&今回つくるデモ
Animatemateとは
チュートリアル1: アニメーションの要素を作る
チュートリアル2: 要素にアニメーションを追加
チュートリアル3: GIFやPNGに書き出す
チュートリアル4: 数値で修正する
Animatemateで出来ないこと
参考動画とその他のアニメーションプラグイン
まとめ

はじめに&今回つくるデモ

今回はSketchのプラグイン「Animatemate」を使って、簡単なGIFアニメーションを作成します。作るデモはこちらです！

demo_1

Animatemateとは

キーフレームを使ったアニメーションが簡単にできるSketchのプラグインです。
GIFアニメーションと１枚ずつのPNGファイルに書き出すことが可能です。

以下の公式サイトから様々なデモを見たりダウンロードしたりできます。
http://animatemate.com/

チュートリアル1

アニメーションの要素を作る

上記の公式サイトからAnimatemateをダウンロードし、Sketchを起動します。
上部にあるメニューの「Plugins」にプラグインが追加されているのを確認できればOKです。

menu_plugin

ではまず、アートボードを用意します。
どのサイズでも良いですが、今回は500px × 500pxにしました。

次に以下の画像のように4つの丸と文字を配置します。
（円のショートカット：「O」・テキストのショートカット「T」）

tutorial_1

そして定規を表示して（Ctrl + R、またはメニューの「View」<「Canvas」<「Show Rulers」）、アニメーションの動きがわかりやすいようにします。

ここまでの下準備が完了したら、次は円にアニメーションを追加していきます。

チュートリアル2

要素にアニメーションを追加

まずは4つの丸のレイヤーを複数選択して、メニューの「Plugins」<「Animatemate」<「Create Animation」をクリックします。

tutorial_2

すると別ウィンドウが立ち上がるので、「Keyframe Number」の数値を０、「Easing Type」を「easeInOutQuad」にします。イージング(easing)とは加速や減速の効果のことです。
そしてOKボタンを押します。

tutorial_3

見た目に何も変化はないですが、これでアニメーション初期値の時に今の4つの丸の位置が記録されています。

その作業が終わったら、次は10フレーム後の4つの丸の位置を設定しましょう。
先ほどと同じようにまた4つの丸のレイヤーを選択し、「Create Animation」で別ウィンドウを立ち上げます（この時にレイヤーが選ばれていない場合はエラー表示が出ます）。

tutorial_4

上の添付画像のように丸の位置を移動させた状態で「Keyframe Number」を10に変更します。
移動させるときは「Shiftキー」を押しながら移動させると垂直、または平行移動ができます。
（キーフレームの数値はお好みで構いませんが、数が少なすぎると動きが早く、多すぎると緩慢なスピードの動きになります）

同じ方法で、全ての丸がタイミングをずらしながら上下する動きを作っていきます。
フレームを10ずつ数値をあげ、下の添付画像を参考に移動させてみてください。

全ての円が０フレームと同じ位置に戻るまで、全部で60フレームになりました。

tutorial_5

チュートリアル3

GIFやPNGに書き出す

アートボードを選択して、メニュー内のPlugins, Animatemateの「Export Animation」を選択すると以下の別ウィンドウが出現します。

tutorial_6

ここで以下の設定を行うことができます。

「Export Settings」: GIFまたはPNGで書き出す
「Export Base Name」: 書き出したファイル名
「Start Frame」~「End Frame」: どこからどこまでのキーフレームを書き出すか
「Scale」: 書き出す際のアートボードサイズ

また、ウィンドウの下部にある「Selection Info」で
– 「All layers selecter」(全レイヤー選択)
– 「Animation」 Length」でフレーム数
– 「Animated Layers」でアニメーションを設定したレイヤー数

を確認しましょう。

以上でよければOKボタンを押します。

tutorial_7

Macのパソコンをお使いの場合、書き出したGIFファイルをダブルクリックしてプレビューで確認しても、一枚ずつの画像になっている可能性があります。

そこでファイルを右クリックして「”ファイル名”をクイックルック」のボタンを押すとアニメーションしているGIFが確認できると思います。

【↓書き出したGIFファイル】
demo_1

チュートリアル4

数値で修正する

もしこの時点で「あ、フレーム数を間違えていた！」ということがあれば、そのレイヤーを1つだけ選択して、Animatemateの「Edit Animation」を押します。
(編集は一括ではなく1つ1つのレイヤーを選択しなければいけません)

tutorial_8

別ウィンドウが開くので、カッコ内{ } の数値を変更することができます。
[“number”:0,]はフレーム数が０、[“x”:62, “y”:279,]は縦横の位置を表しています。また、サイズや傾き、透明度もここで設定し直すことができます。

先ほどの10フレームずつのアニメーションだと動きがカクカクしていると思ったため、”number”の数値を5フレームずつに変更してみました。

すると、以下のように円の移動するスピードが上がったことが確認できます。

Animatemateで出来なかったこと

2018/06/11時点ですが、以下２点を試してみましたがまだ再現できないようですのでご注意ください。
– 色を変化させるアニメーション
– 透明度を変化させるアニメーション

参考動画とその他のアニメーションプラグイン

Animatemateの使い方を解説している動画や、その他プラグインを参考までに挙げておきます。
自分に合ったアニメーション制作ツールを試してみてください。

参考動画

「Animatemate」のチュートリアル動画(英語)
https://www.youtube.com/watch?v=bDm_c4wPBkc

その他のアニメーションプラグイン

「Haiku 」
「Sketchファイルからアニメーションが作れるHaiku」 https://bagelee.com/design/sketch/create_animation_from_sketch_using_haiku/ 
「Timeline for Animation Sketch」
 Sketch上でタイムライン・キーフレーム上でアニメーションが作れるプラグイン

まとめ

Animatemateでは短時間で簡単なアニメーションを作成することができました。
ただ、複雑な動きやAfter Effectのようなタイムリマップを使用した本格的なアニメーション作りには少々難しいと感じましたので、アニメーション制作の一つの選択肢として用途別に使えるようになるとより便利になると思いました。