アニメーションを作成するためのCSSやJavaScriptのライブラリ・フレームワークはたくさんリリースされています。
これらのライブラリやフレームワークは、オブジェクトそのものの見せ方をアニメーション処理を加えて見せるもので、ユニークな動きをするアニメーションを簡単に実装することができるので、今なお人気があります。

一方、昨今注目を浴びているのが、SVGアニメーションと呼ばれる新しいアニメーションの表示手法です。

SVGとはWebブラウザにも互換性があるベクターデータです。
通常の.gifや.pngファイルようなビットマープデータだと拡大すると粗くなってしまいますが、SVGだとどれだけ拡大しても滑らかに表示することができるので、SVGを取り入れるホームページも多くなってきました。

SVGアニメーションは、そうしたベクターデータを使ってアニメーションを表示させるデータのことです。
ただ、SVGアニメーションを作成するには、これまでいくつもの壁がありました。

SVGアニメーションの作成には、通常HTMLやCSS、JavaScriptでのコーディングが必要です。
しかも、GIFやPNGアニメーションのような1行のコードではなく、数十行のコードを書く必要があり、ノンプログラマーでは正直SVGアニメーションを作成するのは難しいとされています。

しかし、今回ご紹介する*「Keyshape」*を使えば、通常のベクターソフトと同じように扱うだけで簡単にSVGアニメーションを作成できます。

滑らかなSVGアニメーションを作成できる「Keyshape」とは？

screenshot.png

Keyshapeは、Mac用のSVGアニメーション作成ソフトで、2Dのベクターグラフィックとキーフレーム(タイムライン)を使って簡単にアニメーションを作成することができるソフトウェアです。
2017年4月1日現在まだベータバージョンですが、ベータ提供中は無料でダウンロードすることができます(ベータリリースが切れたら、MacStoreで有料販売になる可能性があります)。
macOSは10.11 El Capitan以降である必要があります。

Keyshapeの特徴

Keyshapeは、基本的なベクターソフトと同じように、パスを使ってオブジェクトを編集したり、レイヤーを使ってオブジェクトを重ねることができます。
ここでは、Keyshapeに関する特徴を詳しく見てみることにしましょう。

1. 描画ツール

典型的なベクターツールと同様、ペンやペンシル、四角形や円、ズームなどのツールを使うことができます。
また、描画するまえに図形をプレビューして見ることができます。

2. パス操作

個々の図形のアンカーポイントを調整することができます。また、テキストや四角形などの図形をパスに変換することもでき、図形のアウトライン化も可能です。
パスの結合や解除、切り取りや統合なども数クリックで完了します。

3. テキスト機能

カーブしたライン上にテキストを流し込むことができます。縦書きや右から左に書くような方法を採用することも可能です。また、編集可能なテキストはSVGアニメーションにエクスポートする際に自動的にパスに変換されます。

4. ストローク(線)とフィル(塗り)

ストロークやフィルにはグラデーションをかけることができます。
また、破線や点線のサポートもしています。
乗算やオーバーレイといったブレンドモードにも対応しています。

5. レイヤーとグループ

レイヤーやグループによってオブジェクトを整理することができます。
ドラッグ＆ドロップでオブジェクトツリー上の順番を簡単に入れ替えることも可能です。

6. ビットマップ画像操作

SVGアニメーションを作成するソフトウェアですが、PNGやJPEGを埋め込むこともできます。「埋め込み画像」と「リンク済み画像」の両方をサポートしていますが、SVGにエクスポートする際には自動的に全ての画像が埋め込まれます。

7. アニメーションのプレビュー

編集カンバス上でアニメーションのプレビューを確認することができます。
プレイバックできる範囲は、60fpsまで可能です。
ボタンを1クリックするだけで、インストールされている複数のブラウザ上でもプレビューを確認できます。

8. アニメーションのエクスポート

すべてのモダンブラウザに対応しているJavaScript形式のSVGアニメーションに変換できるほか、さらに軽量なCSS形式のSVGアニメーションも変換できます。
さらに便利なのは、ツイートもできるGIF形式やロスレスなPNG画像、YouTubeにアップロードできるMPEG-4への変換も可能です。
作成したアニメーションは、Twitter、Facebookなどの人気SNSサービスに直接アップロードすることもできます。