search
LoginSignup
8

posted at

updated at

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

この記事は、SVG Advent Calendar 2016 の6日目の記事です。

9VAe(きゅうべえ)とは

  • AfterEffects のようなモーショングラフィックスができる無料のベクトルアニメーションエディタ
  • キーフレーム補間機能があり、絵を描かずにMP4動画、アニメGIF、APNG, SVGアニメが作れます。
  • マルチプラットフォームで、Windows/Mac/Linux/Android/iPhone/iPad/Chromebookで動きます。
最新版ダウンロード(リンク先右上の Untitled.png をクリック。) ベクターからダウンロード 説明
9va-win (Windows版) 9va-win (ベクター) windows
9va-mac (Macintosh版) 9va-mac (ベクター) mac
9va-pi (ラズベリーパイ版) 9va-pi (ベクター) pi
9va-pi (Ubuntu, Mint/ Linux X86 32bit版)(64bitの場合) linux
〇くわしいインストール方法はこちら
9VAeきゅうべえ Android / Chromebook 版 Android
9VAeきゅうべえ iPhone/iPad 版 iOS
9VAeきゅうべえ Amazon Fire 版 iOS

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

  • 9VAeに付属したサンプルアニメをAPNG、SVG、GIFで出力しました。
  • 左側のリンクがSVG アニメです(IE, Edgeでは静止画)。画面をいくら拡大してもぎざぎざになりません。
  • 中央がAPNGです。色数が多いためグラデーションがきれいです(02ice)。Firefoxなど、APNG対応ブラウザで見ると動きます。
  • 右側がGIFアニメです。256色しか表現できないためグラデーションが階段状になっています(02ice)。
  • これらはわずか6コマから作られています。9VAeが中間の絵を出力するのでいくらでもなめらかにできます。
SVG APNG GIF
01sharks 01sharks.eva.png 01sharks.eva.gif
02ice 02ice.eva.png 02ice.eva.gif
03octopus 03octopus.eva.png 03octopus.eva.gif
04torpede 04torpede.eva.png 04torpede.eva.gif
05crab 05crab.eva.png 05crab.eva.gif
  • 9VAeきゅうべえは、SVGイラストを読み込んで、動きをつけることができます。形の補間や重なり順序の変更などを自動的に処理してくれるため、複雑なSVGアニメーションを作ることができます。
  • 同じデータから、いろんなフォーマットで出力できるので便利です。

関連記事

9VAeきゅうべえ のご紹介

  1. 無料ソフトでアニメを作ってみよう(9VAe きゅうべえ)
  2. インストール方法
  3. スクラッチ、ビスケットの次は 9VAe=第3のプログラミング学習環境
  4. よくある質問

9VAeきゅうべえ 初級編

  1. 9VAe チュートリアル(1)ーページでタイムラインなし
  2. 9VAe チュートリアル(2)ー図形入力、選択、移動、サイズ変更
  3. 9VAe チュートリアル(3)ーアニメキャストを作る、時間調整
  4. 9VAe チュートリアル(4)ーアニメキャストの修正、往復
  5. 9VAe チュートリアル(5)ー動きグラフ、ページコピー、GIF作成
  6. 9VAeきゅうべえ:長いアニメを作る方法

9VAeきゅうべえ 中級編

  1. アニメの作り方

9VAeきゅうべえ 上級編

  1. 動くLINEスタンプのAPNG作成:無料ソフト9VAeきゅうべえ
  2. 萌えキャラ デジたんを目ぱちさせるまで:APNGアニメの作り方
  3. openclipartの無料イラストをアニメ化する6つの手順
  4. イラストから動くLINEスタンプのようなアニメを簡単に作る方法
  5. Openclipart の 無料SVG をアニメにするテクニック
  6. 無料アニメソフト9VAeきゅうべえの裏技集

9VAeきゅうべえ サンプル作品

  1. 9VAeきゅうべえ」で絵を描かずに作れるGIFアニメ
  2. 9VAeきゅうべえで作成したSVGアニメーション

9VAeきゅうべえ 技術資料

  1. アニメソフト 9VAe をカスタマイズする方法
  2. イラストレータのデータを 9VAe(きゅうべえ)に変換する方法
  3. 9VAe / 9svg データフォーマット解説

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
8