プログラミング基礎 I

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

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

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

Martin J. Dürst

AGU

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

目次

アニメーションの要素

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

<animateColor><animateTransform> の特徴

 

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

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

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

アニメートしたい属性や特性は attributeName 属性で指定

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

アニメーションの時間帯

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

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

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

応用例: スイスの駅時計 Swiss Railway Clock

速版背景

値の加算

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

授業全体のまとめ

プログラミング基礎 II

後期月曜日 3限

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

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

Ruby プログラミング言語

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

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

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