たった６コマでなめらかなSVG、APNG、GIFアニメが作れる9VAe

この記事は、[SVG Advent Calendar 2016](http://www.adventar.org/calendars/1428) の6日目の記事です。

## 9VAe（きゅうべえ）とは

- AfterEffects のようなモーショングラフィックスができる無料のベクトルアニメーションエディタ
- キーフレーム補間機能があり、絵を描かずに**MP4動画、アニメGIF、APNG, SVGアニメ**が作れます。
- マルチプラットフォームで、Windows/Mac/Linux/Android/iPhone/iPad/Chromebookで動きます。

- Win/Mac/Linux版はリンク先右上の ![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/67734/dbea08ea-33e3-c9f2-aa04-73528cfa0f7f.png) をクリックして**ダウンロード**

|[iOS<br>iPad<br>![qvadanb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e6527c3c-7ec3-e357-37c2-2765538e47e0.png)](https://apps.apple.com/jp/app/9vae-iphone/id1482450143)|[Android<br>Chromebook<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://play.google.com/store/apps/details?id=com.qvae)|[Win<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://drive.google.com/file/d/1tIuOkL0TNhPaP3UfYl2pI7Cfk49QNfn3/view?usp=drive_link)|[Mac<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)<br>M1対応](https://drive.google.com/file/d/13yLPjYXv_fSH1MeSMfhyf_x7c3D02hJS/view?usp=drive_link)|[Raspberry Pi<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://drive.google.com/file/d/1HxKGRhI-v4F4Io3PShy8KVtLqSnNEcCy/view?usp=drive_link)|[Ubuntu<br>32bit<br>![qva32b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/580af743-7e1c-7a04-2966-470f4a33537c.png)](https://drive.google.com/file/d/1VebfBt-0LsnfN7J4q6Nbv_wMOd5PpBIM/view?usp=sharing)|
|:--:|:--:|:--:|:--:|:--:|:--:|
|[9VAePro<br>![qvapro64.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/46826bc3-250a-5133-f827-3a4d086e2f4d.png)<br>* 599<br>Page](https://apps.apple.com/jp/app/9vaepro/id1493183090)|[Amazon<br>Fire<br>![qvaqva.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/6337d377-d49c-f68e-eff5-89d3bf50487d.png)](https://www.amazon.co.jp/dp/B082MYHTT7/ref=sr_1_1)|上が<br>見えない<br>場合は<br>Vector<br>↓|[古いMac版<br>10.7-10.11](https://drive.google.com/file/d/1QTwckowY7DTdbxPFtVW-OA4IR0umaYjw/view?usp=sharing)||[Ubuntu<br>64bit<br>![qva64b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e3edbeac-ece0-c506-e02f-cf5e0f5dd04e.png)](https://drive.google.com/file/d/1H6UkwUNdjTAX6_IvbFmkvXAHot6ASC5y/view?usp=sharing)|
||[Android<br>Chromebook<br>![qvadanb.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67734/e6527c3c-7ec3-e357-37c2-2765538e47e0.png)](https://play.google.com/store/apps/details?id=com.qvaDangla)|[Win<br>(Vector)](https://www.vector.co.jp/soft/dl/winnt/art/se515201.html)<br>|[Mac<br>(Vector)](https://www.vector.co.jp/soft/dl/mac/art/se515202.html)|[RaspberryPi<br>(Vector)](https://www.vector.co.jp/soft/other/other/se515318.html)|[安全性<br>は？](https://www.vector.co.jp/info/vtest.html)|


| [インストール方法＞](https://qiita.com/danjiro/items/1debda10c37fd8a55927)|[windows](https://qiita.com/danjiro/items/1debda10c37fd8a55927#windows%E7%89%889va-win)|[Mac](https://qiita.com/danjiro/items/1debda10c37fd8a55927#mac%E7%89%889va-mac)|[Pi](https://qiita.com/danjiro/items/1debda10c37fd8a55927#raspberry-pi%E7%89%889va-pi)|[Linux](https://qiita.com/danjiro/items/1debda10c37fd8a55927#ubuntu--linux-mint--xtra-pc-%E7%89%889va-pi)|
|:--:|:--:|:--:|:--:|:--:|
|[●アニメの作り方](https://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)|[ボタン説明](https://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)|[メニュー<br>キー](https://9vae.blogspot.com/p/scl0mnu.html)|[9VAe質問](https://chiebukuro.yahoo.co.jp/search?p=9vae)|[だんグラ](https://dangla.jp/)|
|動画出力|[ffmpeg](https://youtu.be/Lc5-ac01n6w)|〇|→|[ffmpeg](https://youtu.be/Lc5-ac01n6w)|
|しゃべる|[SofTalk](https://youtu.be/0k9bAN4Jge4)|〇|→|[OpenJTalk](https://youtu.be/Khx31_0IWcE)|

# 6コマでなめらかなSVGアニメ、APNGアニメ

- 9VAeに付属したサンプルアニメをAPNG、SVG、GIFで出力しました。
- 左側のリンクがSVG アニメです（IE, Edgeでは静止画）。画面をいくら拡大してもぎざぎざになりません。
- 中央がAPNGです。色数が多いためグラデーションがきれいです（02ice）。Firefoxなど、APNG対応ブラウザで見ると動きます。
- 右側がGIFアニメです。256色しか表現できないためグラデーションが階段状になっています（02ice）。
- **これらはわずか６コマ**から作られています。9VAeが中間の絵を出力するのでいくらでもなめらかにできます。

|SVG|APNG|GIF|
|:--:|:--:|:--:|
|[01sharks](http://codepen.io/danjiro/full/LEbyxp)|![01sharks.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/eec9a27c-089d-6475-a103-eb737a07007a.png)|![01sharks.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/5b5e620e-6cf1-74a2-9014-52348e328ebc.gif)|
|[02ice](http://codepen.io/danjiro/full/YPpjqY)|![02ice.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/8c1f0e9b-edb7-88a8-891a-467106425738.png)|![02ice.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/4c1ce8c1-3b23-09aa-2cc6-831152144279.gif)|
|[03octopus](http://codepen.io/danjiro/full/yygGdP)|![03octopus.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/d29b1cac-21bc-f7a6-e0c0-4b7e02fcbec0.png)|![03octopus.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/57b6449e-5568-438c-7a74-16dd777794b3.gif)|
|[04torpede](http://codepen.io/danjiro/full/ogWwoL)|![04torpede.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/c2cfde01-5ec2-9013-e62b-9e56863c4fe0.png)|![04torpede.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/1ced3ad2-c305-9051-2861-e8fe73400123.gif)|
|[05crab](http://codepen.io/danjiro/full/MYoGWd)|![05crab.eva.png](https://qiita-image-store.s3.amazonaws.com/0/67734/c6dd73e4-49f1-bc43-6f56-795e46c583e3.png)|![05crab.eva.gif](https://qiita-image-store.s3.amazonaws.com/0/67734/beb6d59b-60e8-b7f6-72f4-0af2d7680552.gif)|


- 9VAeきゅうべえは、**SVGイラストを読み込んで、動きをつける**ことができます。形の補間や重なり順序の変更などを自動的に処理してくれるため、複雑なSVGアニメーションを作ることができます。
- **同じデータから、いろんなフォーマットで出力できる**ので便利です。




---
# 関連記事

## 9VAeきゅうべえ のご紹介

1. [無料ソフトでアニメを作ってみよう（9VAe きゅうべえ）](http://qiita.com/danjiro/items/253e5a33a38599098274)
2. [インストール方法](http://qiita.com/danjiro/items/1debda10c37fd8a55927)
3. [スクラッチ、ビスケットの次は 9VAe＝第３のプログラミング学習環境](http://qiita.com/danjiro/items/d856d393b3e138af123a)
4. [よくある質問](http://qiita.com/danjiro/items/205efee350bfbbef488e)

## 9VAeきゅうべえ 初級編
1. [9VAe チュートリアル（１）ーページでタイムラインなし](http://qiita.com/danjiro/items/ea71567fa8c313f6f3fc)
2. [9VAe チュートリアル（２）ー図形入力、選択、移動、サイズ変更](http://qiita.com/danjiro/items/7507cd9f4c19197f21ea)
3. [9VAe チュートリアル（３）ーアニメキャストを作る、時間調整](http://qiita.com/danjiro/items/ec174df989af8db42da4)
4. [9VAe チュートリアル（４）ーアニメキャストの修正、往復](http://qiita.com/danjiro/items/70cfb20980fee4fdd245)
5. [9VAe チュートリアル（５）ー動きグラフ、ページコピー、GIF作成](http://qiita.com/danjiro/items/ffa863d303eb7d640d10)
6. [9VAeきゅうべえ：長いアニメを作る方法](http://qiita.com/danjiro/items/020cd885edb5eb3d9fb0)

## 9VAeきゅうべえ 中級編
1. [アニメの作り方](http://dnjiro.hatenablog.com/archive/category/%E3%82%A2%E3%83%8B%E3%83%A1%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9)


## 9VAeきゅうべえ 上級編
1. [動くLINEスタンプのAPNG作成：無料ソフト9VAeきゅうべえ](http://qiita.com/danjiro/items/e4d9eb2b22f90ebd1e91)
2. [萌えキャラ デジたんを目ぱちさせるまで：APNGアニメの作り方](http://qiita.com/danjiro/items/67af46418b4831cda10b)
2. [openclipartの無料イラストをアニメ化する６つの手順](http://qiita.com/danjiro/items/161fc6bb0dc7aaa4f76d)
2. [イラストから動くLINEスタンプのようなアニメを簡単に作る方法](http://qiita.com/danjiro/items/f7ffcf5027babf3b03e9)
4. [Openclipart の 無料SVG をアニメにするテクニック](http://qiita.com/danjiro/items/1fcdd55a346d30b40b5e) 
5. [無料アニメソフト9VAeきゅうべえの裏技集](http://qiita.com/danjiro/items/6ce85f33bcda11c04f71)



## 9VAeきゅうべえ サンプル作品
1. [9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ](http://qiita.com/danjiro/items/7fa584a4336cda9c0a05)
2. [9VAeきゅうべえで作成したSVGアニメーション](http://qiita.com/danjiro/items/1b4f6b5a520ade762116)

## 9VAeきゅうべえ 技術資料
1.  [アニメソフト 9VAe をカスタマイズする方法](http://qiita.com/danjiro/items/c5dc07671ffdbbb8a9a9)
2.  [イラストレータのデータを 9VAe(きゅうべえ)に変換する方法](http://qiita.com/danjiro/items/f1ad02d25196ed90fe6f)
3. [9VAe / 9svg データフォーマット解説](http://qiita.com/danjiro/items/0d4ac334a7a97ddb4fe2)