welcome: please sign in

ページのコンテンツをアップロード

下記のページ名のコンテンツをアップロードすることができます。 もしページ名を変更すれば、別のページのコンテンツをアップロードすることもできます。 ページ名が空の場合、ファイル名からページ名を決定します。

ページコンテンツを格納したファイル
ページ名
コメント

location: animation2

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

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


絵を描く

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

1)新しいレイヤーを用意します。

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

3)動きの線を描きます。


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

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


編集箇所を探す

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

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

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

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


作業1

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

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


作業2

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

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

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


作業3

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

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

おつかれさまでした。