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

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。