iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。
SVGをアニメーションさせる際の選択肢
SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。
・SMILアニメーション
・CSS3アニメーション
・JavaScriptでの属性値変更
・Canvasアニメーション
SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia Integration Languageの略です。＜animate＞のような要素を追加することで、SVGにアニメーションを付加することができます。
SVGのアニメーション機能の種類
SVGのアニメーション機能には
animate要素 ： 対象となる要素の１属性の時間経過に伴うアニメーションを設定する
set要素 ： 指定した継続時間だけ属性値を設定する
animateMotion要素 ： モーションパスに合わせたアニメーションを行う
animateColor要素 ： 色を変化させる
animateTransform要素 ： トランスフォーム 属性のアニメーションを行う
などがあります。詳しい属性などはW3CのSVG仕様のアニメーションの項目を参照してください。
IllustratorでSVGを書き出す
IllustratorではSVGの書き出しに対応しています。以下の方法でSVGを作成、保存します。
１、パーツごとにレイヤーを作成し、レイヤー名をつけます。
２、ファイルメニュー＞別名で保存 で、「ファイルの種類」にSVGを選択。
書き出されたSVGを見てみると、パーツの要素ごとにid属性が追加されています。このidを元に要素を取得してアニメーション要素を追加します。今回使ったイラストとSVGの中身はこちら。
SVGにアニメーションを動的に追加する
1.書き出したSVGと、アニメーションの属性一覧をXHRで読み込む
今回はアニメーション属性を動的に追加したかったため、それぞれのパーツに関する属性をJSONで用意しました。JSONの読み込み完了後に、SVG各要素を読み込み、idに対応したアニメーションを追加します。
“moveLeftFoot” : {
”animateElmName” : “animateTransform”,
”attrubutes” : {
”attributeName” : “transform”,
”type” : “rotate”,
”values” : “0;2;0″,
”dur” : “1s”,
”repeatDur” : “indefinite”
}
２.アニメーションの追加
Animation要素を生成し、属性を追加、アニメーションを有効にし、SVGに追加します。主に使用したメソッドは以下のような感じです。
// ノードを取り込み
// resXML XHRのレスポンス
var svgroot = resXML.documentElement;
var svgObj = document.adoptNode(svgroot);
// アニメーションを追加したいSVGの要素
var leftHand = svgObj.getElementById(‘leftHand’);
// animation要素の生成
var animation = document.createElementNS(‘http://www.w3.org/2000/svg’, ‘animateTransform’);
// 属性の追加
// setAttributeNS(namespace, name, value);
animation.setAttributeNS(null, ‘dur’, ‘1s’);
// アニメーション開始
animation.beginElement();
// Animation要素をSVGに追加
leftHand.appendChild(animation);
全てのパーツにアニメーションを追加し終わったら、SVGオブジェクトをrootに追加します。各パーツのアニメーションの調整を考えると、Adobe Edgeなどのアニメーション生成ツールを使用する必要がありそうです。ツールとソースを効率よく使い分けられるようになりたいものです。
