Logo address

Animation

2012/11/10

A Simple Animation

ブラウザの現状から言えば、Safari のアニメーションのサポートは弱い。

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

リロードすれば最初から始まる。

この SVG ファイルを生成する Python のコードは

#encoding: utf-8
# Safari is NG
# Chrome is OK
# Firefox is OK
# Opera is OK
import svg
c = svg.Canvas(0,0,600,500,map=(-3,3,3,-3))
wider="""<animate attributeName="width" from="0px" to="100px" dur="10s"
           additive="sum" />"""
circle_moveX="""<animate attributeName="cx" from="0px" to="500px" dur="10s"
           repeatCount="indefinite"/>"""
movePath="""<animateMotion path="M -250 200 L 250 -200"
           begin="6s" dur="10s" fill="freeze" />
  <animateTransform attributeName="transform" attributeType="XML"
           type="scale" from="1" to="5" fill="freeze"
           begin="2s" dur="5s"/>
  <animateTransform attributeName="transform" attributeType="XML"
           type="rotate" from="0" to="90"
           begin="4s" dur="10s" fill="freeze" />"""

c.rect(0,0,0,1,fill="black",animate=wider)
c.circle(0,0,r=1,animate=circle_moveX)
c.text(-0,0,text="moving",animate=movePath)
c.close()

実を言えば、僕はまだアニメーションに関しては分からないことだらけである。
取りあえず、

animate="......"
の形でサポートしたが、...... の中は、SVG が生のままである。もちろん、このやり方は無難で、SVG アニメーションの全てが使えるので強力でもある。しかし、論理座標が使えないのは辛い限りである。(map によって、原点移動だけは行われている)

Clock Animation

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

リロードすれば最初から始まる。

この SVG ファイルを生成する Python のコードは

#encoding: utf-8
import svg
c = svg.Canvas(0,0,400,400,map=(-1.5,-1.5,1.5,1.5),style="background:whitesmoke")
c.circle(0,0,r=1,fill="white")

# transform is not effective in defs. bug in browsers?
#d = c.define(rotate=-90)
d = c.define()
d.line(0.95,0, 0.85,0,stroke="black;width:3",id="L1",rotate=-90)
d.line(0.95,0, 0.75,0,stroke="black;width:8",id="L2",rotate=-90)
d.line(-0.3,0,0.6,0,stroke="black;width:8",id="N1",rotate=-90)
d.line(-0.33,0,0.85,0,stroke="black;width:8",id="N2",rotate=-90)
d1 = d.group(id="N3",rotate=-90)
d1.line(-0.25,0,0.6,0,stroke="red;width:3")
d1.circle(0.6,0,r=0.08,stroke="red", fill="red")
d1.circle(0,0,r=0.04,stroke="red", fill="red")
d1.circle(0,0,r=0.01,stroke="white;width:0.5",fill="black")
d.end()

for n in range(0,60):
  c.use(0,0,rotate=(360/60*n),ref="L1")
for n in range(0,12):
  c.use(0,0,rotate=(360/12*n),ref="L2")

sec_move = """<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="360" dur="60s"
begin="0s" repeatCount="indefinite"/>"""

min_move = """<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="360" dur="3600s"
begin="0s" repeatCount="indefinite"/>"""

hour_move = """<animateTransform attributeName="transform" attributeType="XML"
type="rotate" from="0" to="360" dur="12h"
begin="0s" repeatCount="indefinite"/>"""

c.use(0,0,ref="N1",animate=hour_move)
c.use(0,0,ref="N2",animate=min_move)
c.use(0,0,ref="N3",animate=sec_move)

c.close()

どうやら defs の中(ここでは define() の中)で

rotate
を指定しても効果がないようである。このケースでは指定できた方がスマートなのであるが。

分針について、

dur="3600s"
としているが
dur="60m"
とすると、ブラウザの分針の動きが変なのである。(Safari はまともであった)
もしもかすると、
dur="12h"
もダメかもしれない。

set

<animation> では値が徐々に変化するのに対して、<set> は値を切り替える。

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

この SVG ファイルを生成する Python のコードは

#encoding: utf-8
import svg
c = svg.Canvas(0,0,600,500,map=(-300,250,300,-250))

cc="""
<set attributeName="rx" to="200" begin="1s" />
<set attributeName="ry" to="200" begin="2s" dur="1s" />
<set attributeName="fill" to="red" begin="3s" dur="1s" />
"""

c.circle(0,0,r=50, animate=cc)
c.close()

<set> は、

attributeName
from
to
begin
end
dur
で値を切り替える。dur を指定すると、指定した時間が経過すると値が元に戻る。

mouse over

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

この SVG ファイルを生成する Python のコードは

#encoding: utf-8
import svg
c = svg.Canvas(0,0,600,500,map=(-300,250,300,-250))

mo="""
<animate attributeType="xml" attributeName="fill-opacity" values="1;0" repeatCount="2" dur="1" begin="mouseover" />
"""

c.line(-100,-100,100,100,stroke="black;width:20")
c.circle(0,0,r=100, animate=mo, fill="red;opacity:1.0")
c.text(0,0,text="Please mouse here",anchor="C",font="size:16")
c.close()

他に

end="mouseout"

mouse click

2012/11/24

あなたのブラウザは SVG をサポートしていません。最新のブラウザをお使いください。

この図はSafari 5.1.7 では正しく表示されていない。

width="100%"
が働いていないのだ。Chrome,Firefox,Opera は問題はない。IE は試していない。

この SVG ファイルを生成する Python のコードは

# encoding: utf-8
import svg
a  = """
P4257760	P4306420
P5026465	P6251106	P4166272
P4306417	P5026447	P5036528
"""
b = a.split()
c = svg.Canvas(0,0,900,600)
c.text(450,0,text="Photo Album",
  font="Times;size:32;style:italic",anchor="N")
w = 200
px = 0.1*w
h = 150
py = 50
m = 800 / w
d = c.define()
for n in range(0,len(b)):
  x = 1.1*w * (n % m) + px
  y = 1.3*h * (n / m) + py
  d.view(x,y,x+w,y+1.1*h,id="V%d"%n)
  d1 = c.link(ref="V%d"%n,target="others")
  d1.image(x,y,x+w,y+h,href=b[n]+"s.jpg")
  d2 = c.link(href=b[n]+"m.jpg",target="others")
  d2.text(x+w/2.0,y+h,text="download",anchor="N")
c.close()

このプログラムで

c.link(ref="V1")
は
<a xlink:href="#V1">.....</a>
なのだが、名前を link にしている。a タグの正式名称は anchor タグなのだか、しっくりこないし、この名称は他で使われている(しかもアンカーの本来の意味で)。世間的にもアンカータグの言い方は、評判が良くないのであろう。リンクと言われる方が意味が通じやすい。

<view> タグの使い方(何の役に立つのか?)は難しい。また、<view> タグは、<defs> タグと組み合わせないと頭の中が????になってしまう。

<view> タグに関する記事は非常に少ない。気がついた限りで拾ってみた。

Cartoさんは次のように書いている。
view (views::AbstractView): ? don't know what this property is used for - if you know, please contact me by mail

Reference