フリーソフト9VAeきゅうべえで作成したアニメーションは、SVG-SMIL形式で保存される。
SVG-SMIL は標準化されたフォーマットであり、追加ライブラリなしでインターネットエクスプローラ以外のほとんどのブラウザで再生できる。
以下の記事は開発初期の段階で、各ブラウザでのSVG-SMILの動作が異なるので苦労したという話だが、今は、その問題は少なくなってきている。
Safari でクリックでもう一度再生しなくなってる
9VAeで出力したSVGアニメをブラウザで再生すると、１回再生して、最後の画面で
停止するのだが、その画面をクリックすると、もう一度最初から再生するように
なっている。その仕組みは以下のとおり。
以下は、画面上の四角を右に移動するアニメを出力した、SVGの内容
<svg xmlns:xlink="http://www.w3.org/1999/xlink" image-rendering="optimizeSpeed" baseProfile="basic" version="1.1" xmlns="http://www.w3.org/2000/svg"
id="000.svg" viewBox="0 0 512 288" >
<defs>
<mask id="SVG_Canvas"><rect fill="#FFFFFF" x="0" y="0" width="512" height="288"></rect></mask>
</defs>
<g mask="url(#SVG_Canvas)">
<g id="SVG_Start">
<rect fill="white" x="0" y="0" width="512" height="288">
<animate id="Sa" begin="0s;SVG_End.click" dur="29999s" attributeName="visibility" from="visible" to="visible" /></rect>
</g>
<g id="P1a0">
<path fill="#80ffff" stroke="#000000" stroke-width="1.00">
<animate fill="freeze" begin="Sa.begin+0.00s" dur="1.00s" attributeName="d"
from="M12.00,16.00L127.00,16.00 127.00,149.00 12.00,149.00 12.00,16.00 Z"
to="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z" />
<animate fill="freeze" begin="Sa.begin+1.00s" dur="1.00s" attributeName="d"
from="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z"
to="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z" />
<set fill="freeze" begin="Sa.begin+2.00s" attributeName="d" to="M-99-99" />
</path>
</g>
</g>
<g id="SVG_End" mask="url(#SVG_Canvas)">
<rect fill="white" x="0" y="0" width="512" height="288"></rect>
<path fill="#80ffff" stroke="#000000" stroke-width="1.00" d="M380.06,16.00L495.06,16.00 495.06,149.00 380.06,149.00 380.06,16.00 Z"></path>
<!--9vaGoOut--><set fill="freeze" begin="0s;click" attributeName="display" to="none" />
<!--9vaGoIn--><set id="Se" begin="2.00s;click+2.00s" attributeName="display" to="inline" />
</g>
</svg>
最後にある <g id="SVG_End"> が、最後の画面で、これがクリック（ begin="0s;click"）されると、attributeName="display" to="none" となる。"display" が "none"になるのは、消えるという意味。つまり、クリックすると最後の画面が消える。
一方、最初のほうにある <g id="SVG_Start">には、 begin="0s;SVG_End.click" と書かれていて、<g id="SVG_End"> がクリックされると、もう一度スタートとする。となる。
この仕組みは、Safari でも動いているようなのだが、問題なのは、
<set fill="freeze" begin="Sa.begin+2.00s" attributeName="d" to="M-99-99" />
みたいだ。これは、座標値（attributeName="d" ）を、Move to -99,-99（"M-99-99"） にするということで、画面外の１点に移動せよと命令している。
これは、9VAeきゅうべえ独自の書き方で、線を画面外に移動させることで、表示したまま消すという目的で入れている。
なぜこうしているかというと、普通図形を消すときには、"visivility" を "hide" にするのだが、アニメーションさせる過程で、"hide" と "visible" を高速に切替えないといけない。ところが、消えていたものを表示させようとするときにタイムラグが生じて、図形がちらつく現象がみられたという経験があるためだ。
初期の Safari だと、ちゃんと動作していたのだが、最近の Safari だと、これが動かなくなっているようだ。つまり、いったん図形の座標点数をなしにすると、次に、aniimate で点の数を増やすことができないみたい。
aniimate で、点の数や図形の形を変更できないのはわかっていた
これは、もともとわかっていて、9VAeでは、丸が四角形に変化する場合でも、animateの前と後で、同じ点の数、同じ図形の形になるようにめんどくさい処理を行っている。ところが、別の animate や set では、異なる形を設定できるはずなんだけど、どうも、それが動いてないようだ。
これをどうするか？ iPad版 9VAeきゅうべえでは、SVGを標準保存フォーマットにしたいので、なるべく、Safari でちゃんと動くようにしたいのだけど。
SVG SMILの表示は、ブラウザの種類やバージョンで動作が異なるので、仕様をかえると、いろいろ問題がおこるかもしれん。
再読み込みすると１回はちゃんと動く
ので、今のままでも使えないことはないが
