SVGアニメーションの再生タイミングについて

今回は前回書きました『IllustratorからSVGを書き出して、SVGアニメーションを追加する』の関連記事です。SVGアニメーションの再生タイミングにかなりハマったのでもう少し詳しくご紹介したいと思います。OPERAさんの2006年(!)の記事に、詳しい解説がありましたので、参考にしています。こうして見てみると、枯れた技術かと思われていたSVGに再び光が当たった感がありますね。 

animate要素の追加

 例えば、以下のようなanimate要素を追加したい場合。

<animate attributeName=”opacity” begin=”indefinite” to=”0″ dur=”0.25″ fill=”freeze” />

動的に追加すると以下のようになります。

function fade (target) {
   
   // animation要素の生成
   var animation = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘animate’);
   
   // 属性の追加
   animation.setAttributeNS(null, ‘attributeName’, ‘fill-opacity’);
   animation.setAttributeNS(null, ‘begin’, ‘indefinite’);
   animation.setAttributeNS(null, ‘to’, 0);
   animation.setAttributeNS(null, ‘dur’, 0.25);
   animation.setAttributeNS(null, ‘fill’, ‘freeze’);
  
   // Animation要素をSVGに追加
   target.appendChild(animation);
   
   // アニメーション開始
   animation.beginElement();
}

アニメーション開始のタイミング

ここで注意しなければならないのがbegin属性の値です。begin属性を省略すると、アニメーションを開始するオフセット時間(何秒からアニメーションが始まるか)が0秒であることを意味します。0秒とは、文書が読み込まれたタイミングを意味します。このbegin属性に”indefinite”を指定すると、SMIL DOMからメソッドを使用できることを意味し、beginElement()を呼ぶことでJavaScriptからアニメーションを開始させることができます。
 
しかし、beginElementしてもSVG要素の状態によってはアニメーションが動かないことがあります。SVGのアニメーションはページのloadイベントで開始されるらしく、読み込みの段階でrootにくっついていない場合、後からSVGを追加してもアニメーションしませんでした。そこで、displayプロパティで非表示にし、対応しました。
 
今のところ、IEではSMILアニメーションの実装予定は無いようです(CSS3の機能と重複があるため)ので、クロスブラウザ対応を見据える場合は、CSSアニメーションもしくはJSでの属性変更が無難かもしれません。

Related Post

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成

Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]

Kii Cloudは、MBaaSと呼ばれるクラウドサービスのひとつで、モバイルアプリの開発で共通して必要となるサーバ側の機能が提供されています。BaaSを使ったフロントエンド開発は、Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]でもご紹介しました。 MBaaS – Kii Cloud キークラウド Kii CloudもParseと同じく、ユーザー管理やデータ管理など、アプリケーション開発に必要な一連の機能が用意されており、SDKやREST

ぐるぐる360°回転させる3つのjQuery Pluginぐるぐる360°回転させる3つのjQuery Plugin

商品画像をいろんな角度から見せたいけど、3DCGを使ってあらゆる角度を自由に見せるまでは必要はない、、、そんな時に使えるかも?なjQuery Pluginをご紹介します。これらのプラグインはぱらぱら漫画の要領で、複数の画像を高速に切り替えることで動いているような、回転しているような見せ方が可能になります。 SpriteSpin 最初にご紹介するのは3つの描画方法が用意されているプラグインSpriteSpinです。jQuery-1.4.2 以降に依存するプラグインで、MIT ライセンスのもとで公開されています。対応ブラウザは各種PC用ブラウザ(IE6以降)とモバイル用ブラウザがサポートされています。(非minifyのspritespin.js:26.5KB) <!-- 画像を表示するHTML