Keyshapeでアニメーションを作成しよう

基本的な特徴が理解できたら、今度は実際にKeyshapeを使ってSVGアニメーションを作成してみましょう。
準備として、Keyshapeのトップページ )で*「Download Beta Version for Mac」*をクリックしてファイルをダウンロード後、プログラムをLaunchpadにドラッグ＆ドロップしてKeyshapeをインストールしておいてください。

画面上の操作画面

artboard.png

画面右上が編集画面であるアートボードです。
アートボードの左にあるツールバーで図形やテキストなどを描画したり、パスを編集したり写真を挿入したりすることができます。

option.png

アートボードの右側にはオブジェクトの編集オプションが表示されます。
四角形や円はストロークやフィル、線の太さ(Width)や透明度(Opacity)などを設定できます。
さらにテキストはフォントサイズや行間の設定も可能です。

keyframe.png

画面下方には、アニメーションのキーフレーム(タイムライン)があります。
このキーフレームを使いながら、アニメーションを設定していきます。

アニメーションの元となる基本図形を作ろう

操作は至って簡単です。

01.png

まず、アニメーションの元となる基本図形をアートボードに描画していきます。

次に、アニメーションを加えたいオブジェクトを選択したまま、キーフレームの「＋」マークをクリックして、どのオプションにアニメーションを加えるかを選択します。

02.png

ここでは、「Stroke Opacity」を使って、線の透明度を変化させてみましょう。

03.gif

2箇所に「Stroke Opacity」を設定し、0から100まで透明度を上げる設定にすると、このような見え方になります。

また、同様に内側のチェックマークも「Stroke Opacity」と「Rotate」でアニメーションをつけると、最終的にこのようなアニメーションを作成することができます。

04.gif

エクスポートしたい時は、メニューからExportを選ぶだけです。