Inkscapeとエディタでアニメーションを作る

絵をInkscapeで描き、その後エディタで編集してアニメーションを作成する方法

絵を描く

Inkscapeで絵を描きますが、テキストエディタで編集しやすいようにうまくレイヤーに分けて描きましょう。

１）新しいレイヤーを用意します。

• 新しいレイヤーは一番上（手前）に配置されます。

２）新しいレイヤーに動かしたいものを描きます。

• 描き終わったらグループ化しておきます。

３）動きの線を描きます。

• どのように動くかを1本のパスで描きます。

以下はテキストエディタでの編集作業です。

アニメーションの指定をします。 この編集を行ったあとでは Inkscape での編集はできません。 別の名前で保存するなど対策をしてからはじめましょう。

編集箇所を探す

ファイルの後ろの方でレイヤーの定義を探します。 SVGデータではレイヤーもグループ<g>の１つです。 属性として groupmode がレイヤーで、label に名前が入ります。 たとえば次のようになっています。

•   <g
       inkscape:groupmode="layer"
       id="layer4"
       inkscape:label="move">

これより後ろで、対応する</g>までの部分がこのレイヤーに描かれた物体の定義です。

構成だけをみると、つぎのようになっています。

•   <g
       inkscape:groupmode="layer"
       id="layer4"
       inkscape:label="move">
      <g
         id="g1523">
        <path ... ... />
        <path ... ... />
        <path ... ... />
      </g>
      <path ...
         id="path1409" />
    </g>

この例では id="g1523" で定義されているのが、動かしたい物体で id="path1409" で定義されているのが、動かし方を示す曲線です。

作業１

このレイヤーの最後 </g> の直前に <use> を追加します。 <use>の内部にアニメーションを指定する形のものです。

•     <path ...
         id="path1409" />
    <use xlink:href="#g1523" x="0" y="0">
      <animateMotion begin="0s" dur="4s">
         <mpath xlink:href="#path1409"/>
      </animateMotion>
    </use>
    </g>

<use>から</use>までが追加した箇所です。 動かす物体とパスの名前は上で調べたものにします。 時間は調整してください。 他の属性を加えてもかまいません。

作業２

一度ビューアを使って表示してみましょう。 エラーが表示されなければ文法的には正しいはずです。 しかし、思った通りの位置では動いていないでしょう。 アニメーションが行われないように見える人もあるかもしれません。 それは動かしたい物体の位置が大きく違っていて画面外で動いているためです。

動かす物体を定義している <g> の属性に transform を加えて物体の位置を調整します。

•    <g transform="translate(-500,-300)"
         id="g1523">

translateの値は図形を描いた位置にマイナスをつけたものを基本に調整します。

作業３

物体とパスの定義を<defs>内に移動します。 <defs>の部分はファイルの始めのあたりにあります。そこに追加します。

•  <defs id="...">
      <g transform="translate(-500,-300)"
         id="g1523">
        <path ... ... />
        <path ... ... />
        <path ... ... />
      </g>
      <path ...
         id="path1409" />
     ...

その後で、最後のレイヤー内に残っている同じ定義を削除します。

•   <g
       inkscape:groupmode="layer"
       id="layer4"
       inkscape:label="move">
      <use ...>
       ...
      </use>
    </g>

おつかれさまでした。