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

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

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

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}