プログラミング基礎 I

第十三回 (2007年 7月 9日)

SVG の応用: アニメーション

http://www.sw.it.aoyama.ac.jp/2007/PB1/lecture13.html

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

© 2007 Martin J. Dürst 青山学院大学

目次

• SVG のテキスト
• アニメーション
• これからの展望
• 演習

先週のまとめ

• SVG のリンクは XHTML と同様に <a> 要素でやりますが、属性は xlink:href になる
• 部品は <defs> 内で <g> で定義、<use> で使用
• 部品の識別子は id 属性で付け、xlink:href='#...' で参照
• transform 属性で回転、移動、拡大縮小
• none は透明な色を表す
• rx 属性と ry 属性で長方形の角を丸めることが可能

SVG の仕様書 (日本語)

SVG のテキスト

• <text> 要素の内容で指定
• x 属性と y 属性で位置を指定
  (横書きの場合に初めての文字の左下)
• CSS でスタイル付け

SVG のアニメーション

• アニメーションはグラフィクスをもっと面白くする
• プログラムによる (procedural、手続き型) アニメーションもできる
• 簡単な指定 (declarative、宣言型) でも強力なアニメーションが可能:
  • 対処の要素、属性の指定
  • 時間帯の指定
  • 属性値や特性$の指定

アニメーション

• <animate>, <animateTransform> などでアニメーションが作れる
• 例:
  

  <rect x='20' y='20' width='50'>
    <animate attributeName="height"
          from="1" to="100" dur="5s"
          repeatCount="indefinite" />
  </rect>

アニメーションの要素

アニメーション用に主に次の要素がある:

• 一般の値: <animate>
• 色: <animateColor>
• 変換 (移動など): <animateTransform>
• 道に沿っての移動: <animateMotion> (今日はやらない)
• 補間が困難な値の設定: <set>

アニメーション対象の選択

アニメートしたい要素の指定:

1. アニメーション要素を xlink:href で指定
2. 指定されてない場合に、アニメーション要素の親要素

アニメートしたい属性や特性の指定:

• attributeName 属性で指定

例: <animate xlink:href='#myRect'
attributeName='height' ...

アニメーションの時間帯

アニメーションの時間帯は次の属性で指定:

• begin: スタートの時間
• dur (duration): 長さ
• end: 終わりの時間
• repeatCount: 繰り返しの回数; indefinite が無限
• fill='freeze': 終了後に終了状態に留まる (元に戻らない)

アニメーションの値の指定

アニメートする値の変化を次の属性で指定:

• from: スタートの値
• to: 終わりの値
• values: 値のリスト (; で区切る)
• keyTimes: values と対応する時間のリスト
  値は 0.00 から 1.00 まで相対的
• calcMode: 動き方; 値は次の通り:
  • discrete: ジャンプ
  • linear: values や keyTimes で指定した点の間に線上の動き
  • paced: 同時速の動き
  • spline: keySplines で別途指定した曲線に従う動き
• 応用例: スイスの駅時計、スイスの駅時計の速版

値の加算

アニメーションによって値が加算されるかどうかを次の属性と属性値で指定:

• additive='sum': 元の値や他のアニメーションと加算 (普通は置き換え)
• accumulate='sum': 繰り返しの場合、合計を取る (普通は元に戻る)

<animateColor> と <animateTransform> の特徴

• 色のアニメーションには <animateColor>
• 変換のアニメーションは <animateTransform> で行う
  • 属性 type で移動、回転、拡大縮小などを指定
  • 一個の変換の値はスペースやコンマで、複数の値はセミコロンで区切る
  • 複数の <animateTransform> を additive='sum' で指定すると変換が組み合わされる

授業全体のまとめ

• XML によって文書やデータの構造が記述できる
• XML の主な「部品」は要素と属性である
• 要素名や属性名は自由に決められる
• データ交換のために共通のデータには共通の構造と名前を使った方が良い
• 要素名、属性名とそれの組み合わせを DTD で定義できる
• CSS で XML の表示を多様に設定できる
• XML の応用は山ほどある; XHTML と SVG はその典型例

これからの予定

• 期末試験: 7月23日 (月曜日) 13:10-14:10

全体のスケジュール

2006 年度の期末試験

これからの展望

• 手作業で XML を作るのは大変
• ツールが色々ある (例: Amaya)
• XML を自由自在に変更したい
• プログラムというプログラムは書きたくない

⇒ XSLT (XML で XML の変換を指定): 後期の「プログラミング基礎 II」のテーマ

演習: SVG の面白いアニメーション

今まで作った面白い図を更に面白くして下さい。

部品の再利用、変形、アニメーションを使って下さい。

7月15日 (日曜日) の 22:00 までに Moodle に投稿して下さい。