研究

ベクトルアニメーションに関するメモ

9VAからSVG(SMILE)への変換

変換例

ページ

  • 9VAはページという概念で同一時間のデータをまとめている。
  • 9VAはページごとに重なり順位を変更できる。
  • 9VAはゆっくりした動きを表現するためにゴーストをつかう。
  • SVGには、時間ごとにデータをまとめる概念がない。
  • SVGでは重なり順位をページごとに切り替えることが難しい。全体で１つの重なり順位しかない。
  • SVGで重なり順位を変更するには、物体の消滅と生成を行う必要がある。
  • 9VAのページを重なり順位が変わらない単位（カット）で分割する。
  • SVGではカットがくるまで消しておき、カットの中だけ表示し、カットが終わると消す。図形の表示制御には３つの方法を使いわける。
    1. 座標値を書く、または、書かない（ポリゴン、線）
    2. visibility ＋ visible または hidden（文字）
    3. display ＋  inline または none（グループ defs use）
  • SVGで同期をとるために同じ時刻を指定しても、処理が重くなると一部の図形が指定した時刻に処理できなくなる。指定した時刻をすぎるとデフォルト値に戻ってしまうため、意図しない図形が見えてしまうことがある。それを防ぐために、animate, animateMotion などに、fill="freeze" を入れ、処理が遅れても状態が残るようにする。

キーフレーム補間

  • 9VAはページ間でリンクした図形の補間を行う。最後のページの図形は静止する。ページごとに表示しない設定ができる。
  • 9VAは離れたページ間のリンクにゴーストを使う。
  • SVGでも図形の形、色など、多くの属性の補間ができる。
  • SVGはページの概念がなく、同時に動かすには同じ時刻を図形ごとに指定する必要がある。

往復、繰り返し

  • 9VAは複数のページ間で往復、繰り返しができる。その間で物体が出現したり、重なり順位を変更できる
  • SVGにはそういう仕組みがないため、往復、繰り返しの動きを分解して記述する。

アニメキャスト

  • 9VAは保存したアニメをアニメキャストという部品のアニメとして読み込める。
  • 9VAはアニメキャストの中にアニメキャストを複数階層入れられる。
  • 9VAの１階層めのアニメキャストは個別に時間軸をもつ。異なるページからスタートしたアニメキャストが同じページに存在するとき状態は異なる。２階層め以降のアニメキャストは同じ状態になる。
  • SVGでは、defs グループ use を用いて部品を記述する。symbol は、古いブラウザでグラデーションがサポートされていないため使わない。
  • SVGの defs use は、１つしか状態をもたない（中身を複製しない）。異なる時間に useで中身を読み出すと、先にスタートしたものと同じ状態が表示される。
  • 9VAのアニメキャストは座標系が極座標で表現されており、拡大、縮小、回転、パスアニメーションをまぜたキーフレーム補間ができる。
  • SVGの defs グループ use は、図形の変形（transform ＋移動（translate）、拡大、縮小（scale）、回転（rotate））とパスアニメーション（animateMotion）に別の命令が割り当てられており、まぜて補間することができない。たとえば、大きさが変化しながらパスにそって動かすことができない。
  • SVGの defs グループ use は、xy座標系で補間するため、9VAのアニメキャストの補間とは一致しない場合がある。
  • SVGには複数ページにわたる往復、繰り返しの仕組みがない。そのため、defs に記述する部品アニメの中に、animate id="label" begin="0s;label.end" といった形で、自分自身が終了したら再スタートするタイムキーパーとなる図形を埋め込んでおく。部品アニメの他の図形は、animate begin="label.begin+1.0s" といった形で、タイムキーパーを基準に時間を設定する。

曲線

  • 9VAの曲線の制御点はすべて曲線上にある。制御点に角と曲線の２種類の指定がある。
  • 9VAは曲線と直線の組み合わせが異なる図形をキーフレーム補間できる。
  • 9VAは１つの曲線の制御点の数が２５０点以下である。
  • SVGは、直線、ベジェ曲線、円弧の３種類の曲線がある。
  • SVGは、同じ種類の曲線しかキーフレーム補間できない。
  • 9VAで直線と曲線の組み合わせが異なる図形のキーフレーム補間をSVGに変換する場合は、直線、曲線の組み合わせが同じになるように角を曲線に変更してから、SVGに変換する。
  • 9VAの曲線と SVGのベジェ曲線は、１対１で変換できないため、9VA/SVG間で変換を繰り返すと制御点の数が増えてしまう。 また SVGから9VAに変換する場合、制御点が２５０点以下になるよう形がまるめられる。

グラデーション

  • 9VAには直線グラデーション、円形グラデーション、四角形グラデーションがある。
  • 9VAには半透明のグラデーションがある
  • 9VAのグラデーションの制御点は図形に含まれており、図形の頂点と同様にキーフレーム補間の対象になる。
  • 9VAの円形グラデーションは図形の変形にあわせて、アフィン変換される。
  • SVGの直線グラデーションは、linearGradient 、円形グラデーションは、radialGradientである。四角形グラデーションはない。
  • SVGはグラデーションの色を図形と別に定義する。色は、stop-color 、半透明は、stop-opacity で指定する。
  • SVGはグラデーション中で色を何個でも設定できる。
  • SVGの円形グラデーションは、図形にあわせてアフィン変換しない。中心と半径は変化するが円形のままである。
  • SVGのグラデーションの制御点は、図形の外接長方形の相対の割合で指定する。図形の外接長方形が変化する場合や、グラデーションの制御点が移動する場合は、9VAと同一にすることは難しい。

動きグラフ

  • 9VAの動きグラフは時間の流れ方をグラフで制御する。同じ動きグラフを指定した図形は共通の時間変化が適用される。
  • SVGでは個別の図形の時間変化をスプライン関数で制御できるが、複数の図形に対する共通の時間という概念がないため、キーフレーム間の各図形の時間変化を個別に計算しなければならない。

0 件のコメント:

コメントを投稿

登録: 投稿 (Atom)