プログラミング基礎 I

第十四回 (2010年 7月19日)

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

http://www.sw.it.aoyama.ac.jp/2010/PB1/lecture14.html

Martin J. Dürst

© 2006-10 Martin J. Dürst 青山学院大学

目次

• SVG のテキスト
• アニメーション
• 応用例: スイスの駅時計
• これからの展望
• 演習

前回のまとめ

• SVG のリンクは XHTML と同様に <a> 要素、属性は xlink:href
• 部品は <defs> 内で <g> で定義、<use> で使用
• 部品の識別子は id 属性で付与、xlink:href='#...' で参照
• transform 属性で回転 (rotate)、移動 (translate)、拡大縮小 (scale)
• 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' で指定すると変換が組み合わされる
  • 実例: <animateTransform attributeName='transform'
type='rotate' from='0 100 100' to='90 100 100' ...

これからの予定

期末試験: 8月 2日 (月曜日) 13:10-14:10

授業全体のまとめ

• XML によって文書やデータの構造が記述できる
• XML の主な「部品」は要素と属性である
• 要素名や属性名は自由に決められる
• データ交換のために共通のデータには共通の構造と名前を使った方が良い
• 要素名、属性名とそれの組み合わせを DTD で定義可能
• CSS で XML の表示を多様に設定可能
• XML 関連技術： XSLT (2009年以前のプログラミング基礎 II 参照) など
• XML の応用は山ほど存在; XHTML と SVG はその典型例
• ツールが色々ある ((X)HTML 用の例: Amaya)

プログラミング基礎 II

後期月曜日 3限

テーマ: Ruby プログラム言語

目標: 役に立つ簡単なプログラムが書ける

Ruby プログラミング言語

• まつもとゆきひろ (Matz) により
  1993 から開発
• 2000年から世界中に注目をあびている
• プログラミングが楽で楽しい
• 入り口が広くて、奥が深い
• Ruby on Rails などで Web に最適
• Dürst 研究室で実装に貢献

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

今まで作った面白い図をアニメーションで面白くして下さい。

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