プログラミング基礎 I

第十三回 (2011年 7月 4日)

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

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

Martin J. Dürst

アニメーションの要素

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

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

`<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' ...

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

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

要素を xlink:href で指定
指定がない場合、アニメーション要素の親要素

アニメートしたい属性や特性は 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': 繰り返しの場合、合計を取る (普通は元に戻る)

授業全体のまとめ

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月15日 (来週の金曜日) の 22:00 までに Moodle に投稿して下さい (B-425 号室は来週も空いている)