9VAeきゅうべえアンドロイド版でもPC版、iPad版でもつくれます。
作業時間は１０分程度です。[完成データはこちら]。
このアニメはグラデーションのキーフレーム補間をつかっており、9VAe以外のフリーソフトで作るのは難しいでしょう。
■ 9VAeきゅうべえのダウンロード
- Win/Mac/Linux：無料ソフトでアニメを作ってみよう（9VAe きゅうべえ） - Qiita
- Android：9VAeきゅうべえAndroid版（Google Play）
- iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple)
- 9VAeのボタン説明
１. SVGイラストのダウンロード
- 以下のイラストを開く （開かない場合こちらから「ダウンロード」）
Openclipart - Red Onsen Mark - スマホの場合は、「ダウンロード」ボタンを長押し。メニューから「リンクアドレスをコピー」をタッチ。9VAeきゅうべえのツールメニュー＞「ネットからダウンロード」のあと、http:入力エリアを長押しして「貼り付け（ペースト）」。
- パソコンの場合は「ダウンロード」ボタンを右ボタンでクリック。「対象をファイルに保存」または「リンク先のファイルをダウンロード」。9VAeきゅうべえメニューから「ファイル＞開く」をクリック。ダウンロードしたファイルを選ぶ。SVGが読めない場合はバージョンが古いので最新版にしましょう。
左下の「虫眼鏡」ボタンをクリックすると全体が見えます。
２. アニメキャストの中身を保存（スマホの場合）
よみこんだイラストはアニメキャストという部品のアニメになります。静止画として使う場合はアニメキャストにしておくほうが便利ですが、動きをつけたい場合は、アニメキャストの中身を開きます。
-
選択枠の中心の「＋」をクリック。メニューの上から２番目「アニメ（...）を修正」をクリック。アニメキャストの中が開きます。
-
ねんのため「ファイル＞名前をつけて保存」で「onsen」と名前をつけて保存しましょう。
- メニューバー「ファイル＞閉じる」をクリック。
- メニューバー「ファイル＞開く」をクリック。「onsen」を開く。
- これに動きをつけていきましょう。
３. 点の数を減らして、グループ解除
（１）点の数を減らす
- 画面をタッチして図形を選択。
- メニューバー「編集＞点を減らす」をクリック。これで点の数が減り、編集しやすくなります。（パソコンの場合は、編集＞効果＞点を減らす）
（２）グループの解除
- 画面の図形をクリック。中心の「＋」をクリック、メニューから「グループ解除」をクリック。もう一度湯気をクリック。中心の「＋」をクリック、メニューから「グループ解除」をクリック。これで図形がばらばらになります。
４．湯気をのばして透明グラデーションをつける
（１）湯気３本を複製して下につなげる
- ３本の湯気をいっしょに選択。中心の「＋」をクリック、メニューから「複製」をクリック。
- 複製した湯気を下に移動し、長い湯気を作ります。中央の湯気は少し下に移動させましょう。
（２）６本の湯気をグループ化し「いっしょに塗る」ようにしてグラデーションをつける
- ６本の湯気を同時に選択。中心の「＋」をクリック、メニューから「グループ化」をクリック。湯気をひとつのグループにまとめます。
- 中心の「＋」をクリック、メニューから「いっしょに塗る」をクリック。
- 右上のパレットからグラデーションのパレットをクリック。上から４番目のかまぼこ型グラデーションをクリック。下のようなグラデーションになります。
「いっしょに塗る」がでてこない場合、グループ化されていないかもしれません。もしくはグループの中にグループが含まれると表示されません。「いっしょに塗る」は特別なグループ化（図形だけがはいっているグループ）にだけ存在するオプションです。また、「いっしょに塗る」にチェックをつけると、１つの図形とみなされるようになり、チェックをはずすまでグループ解除ができなくなります。
（３）グラデーションの制御点◇を選んで右上に移動させる
- 点選択ボタン
をクリック。湯気の点が表示されるので、右端の◇、または左上の湯気の点を１点だけ選んで、もう一度をクリック。これで下図のようにグラデーションの点が選びやすくなります。 - グラデーションの点◇４点を選んで、右上に移動。選択枠の角のハンドルをドラッグして、サイズを半分に縮めます。
グラデーションの点の意味は、緑色の◇がグラデーションの範囲、オレンジ色の◇を結ぶ線がグラデーションの方向になります。
（４）グラデーションの色２を透明にする
- カラーパレットの色２ボタン（上図の黄色いボタン）をクリック。色を赤にし、カラーパレットの上の透明度を一番左側（透明）にします。虫眼鏡ボタンを押して再描画すると下図のようになります。
５．続きのページを追加
動きをつけるために続きのページを作りましょう。
- ページの右側の
をクリック。メニューから「続きのページを作る」をクリック。２ページができます。
６．前後のページを表示し、下の湯気を前のページの上の湯気に合わせる
- メニューバー「表示＞前後のページを重ねて表示」をクリック。前のページの湯気の場所が水色で表示されます。
- ２ページの湯気を選び、下の湯気が前のページの上の湯気に重なるように移動させます。
- 中心の湯気の位置も合わせましょう。湯気を選んで、点選択ボタンをクリック。中心の湯気の点を一部選んで、２回をクリック。これで中心の湯気だけ選ばれるので前のページの湯気の位置にあわせます。
７．２ページのグラデーションを１ページと同じ位置にする
- ２ページのグラデーションの点を選んで、１ページのグラデーションの点と同じ位置に移動させます。
８．１ページに「繰り返し」をいれる
- １ページに移動。メニューバー「ツール＞繰り返し」をクリック。これで１ページと２ページの間を繰り返します。
-
プレイボタン
をクリックし、下から湯気があがっていくアニメーションをみてください。
９．アニメGIF出力
- ファイルメニュー＞「アニメGIF出力」で、好きなサイズのアニメGIFが作成できます。
- 「繰り返し」を入れているため、アニメーションの時間が無限になっています。アニメGIFの時間は、「１」を入力し、繰り返し１秒のアニメGIFをつくりましょう。
- 画像サイズについて、スマホ版では、幅、高さのどちらかを空白にしておけば、比率を保った数値が自動設定されます。MP4動画を作る場合は高さ「７２０」に設定するとよいでしょう。
- Androidの場合、完成したファイルは、端末内の「9VAe」フォルダの中に、指定した名前、例えば「onsen.gif」という名前で出力されます。フォトアプリで、「端末内の写真＞9VAe」で見ることができます。
１０．ezgif サイトで、MP4動画に変換
アニメGIFは簡単にMP4動画に変換できます。
- ezgif.com ( Online GIF to MP4 Video converter ) を開く
- 「ファイルを選択」をクリック ＞ 作成したファイルを選ぶ。（Android版の場合、「ファイル」をクリックし、出力されたアニメGIFを選ぶ）
- 「Upload!」ボタンをクリック
- 「Convert GIF to MP4!」ボタンをクリック
- 「Save」ボタン（フロッピーディスクアイコン）をクリック
- これで、MP4ファイルが保存できます。
１１．SVGアニメ出力
- Ver. 0.6.6 以上のバージョンでSVG出力してください。
- 9VAeきゅうべえ（スマホ版）は、SVG形式で保存されます。Chrome や Firefox ではプラグインなしでアニメーションになります。（Internet Explorer や Edge では静止画になります。）
- 9VAeきゅうべえ（Windows版、Linux版）では、保存するときに、SVG形式で保存できます。Mac版では、ファイルメニューの中に、SVG出力があります。
１２．完成したSVGアニメの読み込み
- 9VAeきゅうべえで保存したSVGアニメーションは、9VAeで読み込めば、自由に編集できます。
- こちら（完成データ）を長押し、もしくは右ボタンメニューでダウンロードし、9VAeきゅうべえで開いてみてください。
9VAeでイラストからループアニメーションがすぐ作れる
- 9VAeきゅうべえを使えば、SVGイラストから絵をかかずにループアニメが作れます。FreeSVG などネット上には100万点ぐらいSVGイラストがあります。そのまま静止画として使うのはもったいない。ぜひ動きをつけてご利用ください。
- もっと長いアニメや動画を作ることもできます。以下をご覧ください。
9VAeきゅうべえに関する質問
- 9VAeに関する質問（Yahoo知恵袋）
- よくある質問（Qiita）
- 本記事の文章、図、アニメは複製自由です。教材、解説記事にご利用ください。
![[完成データはこちら]](https://webcon-kobe.jp/download/svg/out/onsen.svg){kind=link}
