SVGイラストからアニメGIF作成「ネコのしっぽを動かす」

絵を描かずになめらかなアニメGIFを作ってみました。9VAeきゅうべえアンドロイド版でもPC版、iPad版でもつくれます。なれてくれば１０から１５分で作れます。

ほかのアニメの作り方はこちらをご覧ください

 

9VAeきゅうべえのダウンロード

• Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
• アンドロイド：9VAeきゅうべえAndroid版（Google Play）
• iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
• 9VAeのボタン説明

9VAeきゅうべえの使い方

1.  SVGイラストのダウンロード

1. こちら Clipart - Cats In Love By Annalise1988 を開く。（開かない場合こちらから「ダウンロード」）
   
2. スマホの場合は、「ダウンロード」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。
3. パソコンの場合は「ダウンロード」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル＞開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
4. これで、9VAeに猫のSVGイラストが読み込まれます。
5. 左下の「虫眼鏡」ボタンをクリックすると全体が見えます。

   

2. アニメキャストの中身を保存（スマホの場合）

よみこんだイラストは静止画のアニメキャストになります。動きをつけたい場合は、アニメキャストの中身を開きます。（静止画で使いたい場合はアニメキャストにしておくほうが便利です）

1. 選択枠の中心の「＋」をクリック。メニューの上から２番目「アニメ（...）を修正」をクリック。アニメキャストの中が開きます。
2. 「ファイル＞名前をつけて保存」で「CatsInLove」と名前をつけて保存。
3. 「ファイル＞開く」で、保存した「CatsInLove」を開く。
4. これに動きをつけていきます。

3. 画面サイズの調整

1. 「ページ＞ページ設定」（iPadの場合「ファイル＞ページ設定」）で全体がみえるようにページサイズを調整します。（幅1800, 高さ3200）

4. 点の数を減らす

イラストの制御点が多いと動きをつけにくいので、点の数を減らします。

1. ネコをドラッグして選ぶ。選択枠が表示される。
2. 「編集＞効果＞点を減らす」（iPadの場合「編集＞点を減らす」）
3. これで制御点の数が減りました。

5. 続きのページをつくる

1. 上の１ページの右側の緑色の「＋」をクリック。メニューから「続きのページを作る」をクリック。これで２ページ目ができます。

6. しっぽの形をかえる

1. しっぽをドラッグして選ぶ
2. 左側の点編集ボタンをクリック（「A」ボタンの２つ下。右側が点の追加、左側が追加なし、どちらでもよい）これで、ネコの制御点が全部表示されます。
3. ドラッグでしっぽの一部を選びます。点編集ボタンをもう一度クリック。これで、えらんだしっぽだけが表示されます。

   

4. 左下の虫眼鏡の左側の「＋」を２回クリック。これでしっぽが拡大されます。
5. 点を動かして、しっぽの形をかえてください。
6. しっぽの先を回転させる場合、回転中心を指定できます。まず、ドラッグで回転したい点を選びます。
7. 選択枠の角の■をクリック。メニューから「中心点の移動」をクリック。ドラッグして回転中心（＋）の場所を指定。
8. 選択枠の角の■をクリック。メニューから「回転」をクリック。マウスを移動（iPadの場合はドラッグ）すると回転します。

 7. さらに続きのページをつくってしっぽの形をかえる

• 同様に３ページ目をつくってしっぽの形をかえます。
• しっぽの形を変えるときに、点の位置を自由に変更すると、アニメーションしたときにしっぽの太さが変化してしまいます。しっぽの太さが変化しないためには、近くの制御点が同じように変形する必要があり、注意深く点を移動させる必要があります。
• うまくいかないときは、「やり直し」ボタンをクリックして何回もやり直してください。

  

8. 「往復」を入れる

1. やページをクリックして１ページに移動

2. 「ツール＞往復」をクリック。「往復」ボタンがはいります。
3. 選択枠の中心の「＋」をクリック。メニューから「次ページにリンクコピー」。２ページに往復ボタンが広がります。
4. プレイボタンを押すと往復します。

9. 時間の調整

1. １ページの上の時間表示（１秒）をクリック。メニューから「0.1秒短くする」を５回クリックし、0.5秒にします。（iPhoneでページの上部が見えない場合、をタッチすれば見えるようになります。）
2. ２ページの時間も0.5秒にします。
3. プレイボタンを押して確認
4. 完成したら「ファイル＞上書き保存」で上書き保存しておきます。

10. 画面サイズの調整（全体のサイズ縮小、位置調整）

1. 「ページ＞ページ設定」（iPadの場合「ファイル＞ページ設定」）で全体がみえるようにページサイズを調整します。（幅1800, 高さ3200）
2. 幅と高さの数字が大きすぎると設定できなくなります。この場合は全体を縮小、位置調整します。
3. 先頭ページのページ番号「１」をクリック。メニューから「ページの指定 ここから」をクリック。
4. 最後のページ番号「３」をクリック。メニューから「ページの指定 ここまで」をクリック。これで全部のデータが選択されます。
5. 選択枠の角の■をクリックし「拡大／縮小」をクリック。これで全体のサイズ調整ができます。
6. 選択枠の中心「＋」をクリックし「移動」をクリック。これで全体の位置調整ができます。

11. アニメGIF、MP4動画作成

• 「ファイルメニュー＞アニメGIF出力」または「動画出力」で、好きなサイズのアニメGIF または MP4動画 が作成できます。
  Win / RaspberryPi / Linux版 でMP4動画を作るには FFmpeg が必要。Youtube解説
• スマホの場合、端末内の「9VAe」フォルダの中に出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
• アニメGIFは、背景を透明にできます。音がいれられません。
• MP4動画には音が入れられます。Youtubeに投稿できます。Youtubeに投稿する場合、１秒30コマ、高さ720 または 1080 で出力するとよいでしょう。

12．ezgif サイトで、MP4動画に変換

アニメGIFは簡単にMP4動画に変換できます。動画にする場合、アニメGIFの高さは「７２０」で作成するとよいでしょう。

1. ezgif.com ( Online GIF to MP4 Video converter ) を開く
2. 「ファイルを選択」をクリック ＞ 作成したファイルを選ぶ。（Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ）
3. 「Upload!」ボタンをクリック
4. 「Convert GIF to MP4!」ボタンをクリック
5. 「Save」ボタン（フロッピーディスクアイコン）をクリック

• これで、MP4ファイルが保存できます。

 

9VAeきゅうべえAndroid版を使えば、スマホだけで、SVGイラストから絵をかかずにアニメGIFを作成できます。Openclipart には１5万点以上のSVGイラストがあります。いろんなアニメを作ってみてください。

長いアニメや動画を作りたい場合は、以下をご覧ください。

9VAeきゅうべえ：長いアニメを作る方法 - Qiita

9VAeきゅうべえに関する質問

• 9VAeに関する質問（Yahoo知恵袋）
• よくある質問（Qiita）
• 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。