2012年5月8日火曜日

svgでバウンドするアニメーションを作る

円の中心を水平方向・垂直方向でそれぞれ0から100%の間を往復するように設定すると,描画領域の四辺でバウンドするような動きを出せる.svgではanimate要素を使ってこのような動作を簡潔に表現できる.canvas要素を用いた場合はいちいち座標を計算せねばならず,若干見通しが悪い.

と言ったように,メリットしか無いように見えたのだが…



作っていて気がついたが,なぜか非常に動作が重い.いろいろな描画要素が重なっているから?
それとchromeだとワープしていたり,operaだと離散的に値が変化していたりと,どうもブラウザごとに微妙な動作の差異があるみたい.

<svg height="150px" width="100%">
    <circle cx="0" cy="0" fill="red" r="20px">
        <animate attributename="cx" begin="0s" calcmode="linear" dur="10s" keytimes="0;0.5;1" repeatcount="indefinite" values="0;100%;0"/>
        <animate attributename="cy" begin="0s" calcmode="linear" dur="7" keytimes="0;0.5;1" repeatcount="indefinite" values="0;100%;0"/>
    </circle>
</svg>  
 
どうやらoperaでは%での値の指定が上手く行かないようだ.

0 件のコメント:

コメントを投稿