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 Integration Languageの略です。<animate>のような要素を追加することで、SVGにアニメーションを付加することができます。

SVGのアニメーション機能の種類

SVGのアニメーション機能には

animate要素 : 対象となる要素の1属性の時間経過に伴うアニメーションを設定する
set要素 : 指定した継続時間だけ属性値を設定する
animateMotion要素 : モーションパスに合わせたアニメーションを行う
animateColor要素 : 色を変化させる
animateTransform要素 : トランスフォーム 属性のアニメーションを行う

などがあります。詳しい属性などはW3CのSVG仕様のアニメーションの項目を参照してください。
 

IllustratorでSVGを書き出す

IllustratorではSVGの書き出しに対応しています。以下の方法でSVGを作成、保存します。

1、パーツごとにレイヤーを作成し、レイヤー名をつけます。
2、ファイルメニュー>別名で保存 で、「ファイルの種類」に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”
}

2.アニメーションの追加
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などのアニメーション生成ツールを使用する必要がありそうです。ツールとソースを効率よく使い分けられるようになりたいものです。

Related Post

縦書きに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’;}

主要なモバイルUIフレームワークを比較してみました主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他(CSS,MVCフレームワーク統合有無など) 特徴 調査対象フレームワークの概要  以下6つのフレームワークを対象に調査を行いました。

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH