プログラミング基礎 I

第十四回 (2011年 7月 9日)

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

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

Martin J. Dürst

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

目次

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

前回のまとめ

• XHTML に SVG を組み合わせたい場合、五つの方法がある
  (<object>, <iframe>, <embed>, <img>, ファイルへの埋め込み)
• SVG で文書を <text> 要素の内容として書く
• SVG のリンクは XHTML と同様に <a> 要素、属性は xlink:href
• transform の中身としては translate, scale, rotate, skewX, skewY がある
• <animate> によって部品のアニメーションが可能

アニメーションの要素

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

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

<animateColor> と <animateTransform> の特徴

• 色のアニメーションに: <animateColor>
  応用例: <animateColor attributeName='fill'
from='green' to='blue' begin='0' end='5s'/>
• 変換のアニメーション: <animateTransform>
  • 属性 type で移動、回転、拡大縮小などを指定
  • 一個の変換の値はスペースやコンマで、複数の値はセミコロンで区切る
  • 複数の <animateTransform> を additive='sum' で指定すると変換が組み合わされる
  • 実例: <animateTransform attributeName='transform'
type='rotate' from='0 100 100' to='90 100 100' ...

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

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

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': 繰り返しの場合、合計を取る (普通は元に戻る)

発展: パス (曲線)

• 要素は <path>
• 主な属性は d、内容は命令の列
• 命令は一文字の後に数値
• 大文字は絶対座標値、小文字は相対座標値
• 命令の種類 (一部):
  • M/m x y: 移動 (目的地)
  • L/l x y: 直線 (目的地)
  • Z/z: 修了
  • C/c x₁ y₁ x₂ y₂ x y: 三次曲線 (x₁ y₁ と x₂ y₂ は制御点)
  • Q/q x₁ y₁ x y: 二次曲線 (x₁ y₁ は制御点)

授業全体のまとめ

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

授業改善のための学生アンケート

お願い: 自由記述に必ず良かった点、問題点を具体的に書くこと

(悪い例: 発音が分かりにくい; 良い例: さ行が濁っているかどうか分かりにくい)

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

今まで作った面白い図にもっとアニメーションを追加して面白くして下さい

7月13日の 22:00 までに Moodle に投稿して下さい