FigmaによるSVG生成とアニメーションSVG作成

炭治郎かわいいよ炭治郎

完成品

Figmaでお絵かき

最近鬼滅の刃にハマってるので、何か出来ることないかな~と思った結果
Figmaの練習がてら炭治郎を描いてみることにしたのでした。

数日でこのような炭治郎が出来上がる。

かわいいぞ!

Piggとかマクパペットのアバター構造に触れた経験が生きた。
こうして構造考えながら描いてみるとピグってすげぇなとしみじみ思う。

Figmaはベクターがイラレ並に描きやすいという評判は確かにそうだと思いました。
イラレ経験者ならFigmaでも息をするようにお絵かき出来るはずです。
これは個人アカウントで作ったので無料プラン。

羽織の柄はpatternifyで作成。

FigmaのSVG出力

書き出したいパーツにExportをSVGで設定するだけである。

Figmaの場合は大枠のフレームにExport設定すれば、中のパーツはすべてSVG内のパスやグループになって出力される。

パーツごとにSVG化する場合は個別に設定する。

レイヤーの名前でスラッシュを利用した場合、出力時にディレクトリになる。

出力時にフォルダにまとめたい場合はスラッシュ区切りにしておくと良いが、
ID属性をつける設定(Include “id” Attribute)をONにしているとレイヤー名がそのままIDになるので、スラッシュを利用している場合はIDにもスラッシュが含まれるし、スペースなどもそのままIDに使われてしまう。
ID属性で使用できない文字は自動で変換して欲しかったが、残念ながらそのような機能はまだ無いです。

svgatorによるアニメーションSVG作成

アバター構造で作ったら動かしたくなるのが人の性…

残念ながらFigmaにはアニメーションツールは備わってない。
SVGをお手軽にアニメーションさせるもの何かないかな~と思ってググった結果、svgatorが1位だったので試してみることにした。

試用期間は7日で終了後は有料に切り替わる。
気になるお値段は月額18ドル~年間払で月額12ドル。

svgatorは作成済みのSVGを読み込んだら、SVGに含まれているパーツ毎にタイムラインと各種プロパティのアニメーションが設定出来るツールだった。
アニメーションはすべてCSS keyframesに変換され、出力時はアニメーションSVGになる。

使い方はめっちゃ簡単でほぼ直感だけで操作できる。

  1. アニメーションさせたいパーツを選択、名前の左側にあるプラスアイコンを押す
  2. タイムラインにパーツが追加される
  3. アニメーションさせたいプロパティを選んでプラスアイコンを押す
  4. キーフレームを設定したいところにタイムラインのバーを動かす
  5. 設定するプロパティの値を入力
  6. このアイコン押すかエンターキー押すとキーフレームを追加できる
  7. 設定済みのキーフレーム。黄色になってるのは選択中の証
  8. transform-originを設定できる

作ってるときにこれ出来ないのか~と思ったところ

  • パーツを動かしてアニメーションを付けられない
    全部数値指定で設定しないといけない
  • transform-originを%とかの値で詳細設定できない
    0, 50%, 100%といった予め決まった位置に限定されている。
    見落としてるだけかもしれないけどこれが出来たら腕とかもっと動かせたんだけどな~。
  • SVGパーツの削除
    不要なパーツが混じってたから消したいと思ったけど消せなかった。
  • SVGパーツのグループ化
    まとめて動かしたいと思ったパーツがあったが、グループを作れなかった

SVG自体の操作ができない所が難点かなと思った。
制限はあるにしろGUIがあるとないとではわかりやすさが段違いなので、アニメーションSVGを量産する人ならお金払う価値はあるかも。

その他のSVGアニメーション作成ツール

GUIがあるものをリストアップしてみた。

  • Spirit
    Mac用アプリ。トライアル7日で月額12ドル。
    デスクトップアプリとChromeエクステンションがあり、作成したアニメーションのプレビューがChromeで出来る。
    アニメーションはJSONデータで出力され、再生には専用のプレイヤーとGSAPが必要。
  • macSVG
    Mac用アプリ。オープンソース
    SVGペイントと操作、アニメーション機能が備わっている。
    UIがAdobe製品に似ているようなので直感で使えそう。
  • SVG Artista
    ブラウザアプリ。無料。
    パス描画と塗りつぶしをするアニメーションSVGを生成することしかできない。
  • SVG MATOR
    ブラウザアプリ。無料
    タイムラインは存在しないので全部delayによる操作になる。
    要素が順番に出現する感じのアニメーションならこれで十分につくれる。
    完成品はサイトに保存されるのでiframeで表示する。
  • Shape Shifter SVG Animation Tool
    ブラウザアプリ。無料
    タイムライン上でSVGの操作が出来るが、数値で設定しなければならないので難しい。
    インポートするとIDが引き継がれなくて全部連番になってしまったり、CSSで指定されているものが消えたりする。
  • Anigen
    ブラウザアプリ。無料
    複雑な炭治郎も遜色なくインポート出来る上にあらゆる操作が可能。すごいアプリなんだけどいかんせん使い方が分かりづらい。アニメーションの付け方が初見では分からなかった。
    タイムラインUIある方が好きだなと思わされた。
  • SVG Circus
    ブラウザアプリ。無料
    凝ったローディングスピナーが作れる
  • Vivus instant
    ブラウザアプリ。無料
    ストローク描画アニメーションが作れる
  • Adobe Animate CC
    デスクトップアプリ。月額2,480 円から
    元Flash Professionalだったものである。
    Canvasアニメーション作成ツールだが、SVG出力にも対応している。(インポートして利用はできない)

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください