YUI 3ギャラリーで：SVGうわー用に作成されるSVGの拡張、！ »ヤフーユーザーインターフェイスブログ（YUIBlog）

YUI 3ギャラリーで：SVGうわー用に作成されるSVGの拡張、！

中| 11:18 2010年10月18日には、ヴィンセントハーディによって午前の開発、 YUI 3ギャラリー | 2コメント

はじめに

SVG（ Scalable Vector Graphicsは、図形、イメージとテキスト：）、インタラクティブなアニメーション2Dグラフィックスの宣言構文を提供します。 SVGサポートは一部のHTML 5仕様とSVGは、MicrosoftのInternet Explorerなどのすべての主要なブラウザによって実装されているバージョン9 。

SVG-wow.org今日SVGで行うことができますどのようなウェブサイトのショーケース。このWebサイト上のデモはのために作成されたSVGファイルを開く会議では、SVGワウ！セッションは、数年の伝統でした。 SVGうわー！セッションは、自分とのコラボレーションで、ディーン·ジャクソンによって開始した後で継続したエリック·ダールストローム。エリックと私のセッションでcolloratedた2009年と2010年の会議のエディション。

過去2年間、デモがますますSVGにその機能を適用する代わりに（またはそれに加えて）、HTML、AJAXフレームワークを使用しています。 YUIが両方使用するWebサイト上で最も広く使用されているフレームワークであるYUI 2とYUI 3 。

私は、簡単なSVGの概要から始めて、YUIがサポートしていたデモのタイプと説明します私はYUI 3ギャラリーに追加した拡張子は、SVGで動作するようにします。（これらの拡張は、今の条件の下で自由に使用できますYUIのBSDライセンス）。

SVGの概要

HTMLと同様に、SVGは、W3Cの仕様です。それは基本的な図形（四角形、円、線、多角形、楕円、ポリライン）、任意の形状（線、二次または三次のベジェ曲線になりますパスセグメントの用語で説明します）、テキストや画像を記述するための構文を提供します。

次の図は、の画面キャプチャです。 SVG-wow.orgの代替スタイルシートの例と遊びにいくつかのSVG機能を示しています。豊富なレンダリング（シャドウエフェクト、グラデーション、パターン）を、シンプルかつ複雑な形状を。

SVG画像は、ジオメトリとレンダリング属性の用語で定義されているので、任意の解像度でそれらをレンダリングすることが可能です。高いレンダリング品質を維持しながら、印刷時に（これ以上のギザギザ）の結果として、SVG画像は、例えば、任意のサイズにスケーリングすることができます。

次のビューをズームインでは、同じSVGイメージが以前に示したが、高品質を維持しながら、より高い解像度でレンダリングを示しています。

ちょうどHTMLのように、SVGインタラクティビティをサポートしています：それは、マウスまたはキーボードの相互作用のためのグラフィック·オブジェクトにイベントリスナーを追加することが可能です。もちろん、SVGは、簡単にそのような彼らのジオメトリやレンダリングスタイルなどのグラフィックオブジェクトのさまざまなプロパティを操作できるようになり、ドキュメントオブジェクトモデルをサポートしています。

高度なレンダリングスタイル（なでる、充填、パターン、グラデーション）、フィルタ効果（ぼかし、影、カラーマトリックス）、CSSスタイル、高度なテキスト機能（例えば、パス上のテキストなど）および宣言的アニメーション：SVG仕様にたくさんある。あなたは、SVG形式の機能の詳細については、この記事の最後に参照をチェックアウトすることができます。

SVGとHTML

とHTML5 、SVGは前置きなしで、HTMLドキュメントにインライン化することができます。ブラウザはその機能（例えば、サポートし始めているFirefoxの4 ）。当分の間、すべての主要なブラウザでは、同じ機能を提供するXHTMLでインラインSVGをサポートしています。 XHTMLにSVGは単なる名前空間が正しく宣言されている必要があります。

 <html xmlns="http://www.w3.org/1999/xhtml">
     <HEAD>
         ....
     </ HEAD>
     <BODY>
         <H1>インラインSVGます</ h1>

         <SVGのxmlns = "http://www.w3.org/2000/svgは" version = "1.1"
          xmlns名前：XLINK = "http://www.w3.org/1999/xlink"
         幅= "100％"高さ= "100％"はid = "backgroundSVG">
             <！ - ここでSVGコンテンツ - >
         </ SVG>
     </ BODY>
 </ HTML>

すべてのコードサンプルこのページでは、XHTMLにSVGをインライン化するこの方法を使用しています。

SVGとYUI

SVGは、宣言的アニメーションをサポートしています。たとえば、半径アニメートすることができ<circle>このような要素は：

 cx="50" cy="100" r="40">を<circle
     attributeName="r" values="40,60,20,40" dur="1.5s"を<animate />
 </円>

<animate>タグから借用されているSMIL仕様と、他のアニメーション要素と一緒に、それはSVGに非常に強力なアニメーションエンジンを提供します。

残念なことに、最近まで、SVGアニメーションのブラウザのサポートが疎であった。それは、過去2年間で改善されましたが、Microsoftはそれを明確にしているそれはIE 9の宣言SVGアニメーションをサポートしていません。

結果として、SVG-wow.org Webサイト上のデモのほとんどは、スクリプトによるアニメーションの代わりに、宣言型アニメーションを使用しています。宣言型アニメーションはスクリプトアニメーションよりも効率的であるため、一方で、これは残念なことです。逆さまに、スクリプトアニメーションが非常に柔軟に対応することができ、彼らは非常によく実装上で動作します。

良いスクリプトアニメーションのソリューションの必要性がでYUIの使用を行なったものであるSVG-WOWデモ。しかし、デモはまた、特に他のYUIの機能を使用するローダーとノードのモジュール。

YUIとSVGのアニメーション化

のデモSVG-WOW作成するためにYUIを使用して弾性ドラムのビート、モーフィング形状または回転するテキストや図形を、たとえば。 SVGでYUIを使用すると、いくつかのYUIの拡張を必要とし、私は一瞬でこれらを説明します。


回転するテキストや図形	モーフィング形状

弾性ドラムのビート

以下は、YUIは、単にアニメーションとSVGグラフィックスを操作するために便利になる方法を示しています。

SVGアニメーションを`transform`属性を

すべてのSVGのグラフィカルな要素は持っているtransform属性。 2Dを指定し、その属性アフィン変換のスケールに使用することができる要素は、上では、スキュー、回転、または変換されます。

SVGのSVG-wow.org YUIの拡張子はアニメーションできるようにtransformこのような属性を。

 VARのAnim =新しいY.Animate（{
    ノード： "＃circleA '、
    から{
        変換：{TX：0、TY：0、SX：2、SY：2}
     }
    へ：{
        変換：{テキサス州：20、TY：20、SX：1、SY：1}
     }
     transformTemplate： "（＃TX＃TY）を変換スケール（＃SX、＃SY）"、
    期間：1
 }）;

参照変換のアニメーションのテストを。

あなたは、変換値が"コンポーネント"（などの点で定義されていることに注意しましょうtxまたはty使用して値を形成するために結合されています） transformTemplateアニメーション構成オブジェクトにあります。

テンプレートは、個別のコンポーネントは、それが簡単にアニメーション値を計算するために作る間変換値を構築するための柔軟なメカニズムです。これは、YUIのアニメーションモデルはSVGのSMILアニメーション要素（よりも柔軟性（そして、より表現力）が許可例であるanimateTransform ）。上記のアニメーションを作成するために、同等のSMIL宣言がされています：

 ...>を<circle
     <のAnimateTransformにattributeName = "変換"タイプ= "translate"という
                       = "0,0"から= "20,20" DURへ= "1"で始まる= "scaleAnim.begin" />
     <AnimateTransformにはid = "scaleAnim"にattributeName = "変換"タイプ= "スケール"
                       = "2,2"から= "1,1" DURへ= "1"で始まる= "不定" />
 </円>

上記のスニペットが複数必要とする方法に注意してくださいanimateTransform同期されなければならない要素を： begin最初のアニメーションの属性が設定されているscaleAnim.begin 2アニメーションの開始を同期させる。 YUIのアニメーションエンジンの便利な機能は、アニメーションのタイミング（すなわち、開始、終了と期間）は、複数の要素のプロパティに適用するために共有することができることである。

SVG変換をアニメーション化するためのYUIの拡張子は、そのようなのように、広く使用されているカメラとアニメの歌詞の例を示します。後者はYUI 2の拡張機能を使用して前者はYUI 3の拡張子を使用しています。

ジオメトリをアニメーション化

基礎幾何学

YUIとSVGのジオメトリをアニメーション化するのはとても簡単です。次の例では、アニメーション<rect>要素の幅、高さと隅の半径：

 VARのAnim =新しいY.Animate（{
    ノード： "＃rectumの複数形"、
    から{
        幅：200、
        高さ：100、
         RX：5、
         RY：5
     }
    へ：{
        幅：300、
        高さ：100、
         RX：10、
         RY：10;
     }
    期間：2、
    緩和：Y.Easing.elasticOut
 }）;

参照してください。形状アニメーションのテストを。

後で説明したように、YUIボンネットの下にいくつかの変更は、この作業を行いました。しかし、開発者の視点から、このアニメーションは、他のHTML属性またはCSSプロパティのアニメーションとまったく同じように動作します。

`<path>`の`d`属性

ひとつのジオメトリ属性は少し特殊です： dの属性<path>要素。 <path>要素は任意の複雑な幾何学のために使用されます。 <path>任意の形状を記述することができます。そのd属性は、線分、円弧、二次または三次することができますパスセグメントの面で、その幾何学を記述するベジエ曲線（さらにいくつかのコマンドがありますが、ベジェ曲線に彼らはすべてのマップ）。

アニメートd属性もまたYUIのアニメーションエンジンの拡張機能のビットを必要としますが、その拡張子を持つ、 d以下に示すように、属性は、他のものと同じようにアニメートすることができます。

 VARのAnim =新しいY.Animate（{
    ノード： "＃pathA"
    から：{D： "M 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"}、
    へ：{D： "M 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"}、
    持続時間1秒、
    緩和：Y.Easing.bounceBack
 }）;

参照パスアニメーション、とりわけ、以下の画像で表されるように、時間をかけてクロスにモーフィングにチェックマークを見せて、テストを。

ガンジー引用符デモでは、アニメーションのこのテクニックを使用しdガンジーの姿に変形図形に属性を。

他のSVGの属性をアニメーション化

もちろん、YUIアニメーション、ジオメトリ属性に限定されるものではない。任意のSVG属性は、アニメーション化することができます。たとえば、次のアニメーションをアニメーション化する水平方向のぼかしフィルタのぼかしの半径です。

 / / SVGスニペット
 <フィルタ..
     <feGaussianBlur ID = "のBlurFilter" stdDeviation = "10" ...  />
 </フィルタ>

 / / JavaScriptのアニメーション
 VARのAnim =新しいY.Animate（{
    ノード： '＃のBlurFilter'、
    から：{stdDeviation：[0、20]}、
    へ：{stdDeviation：[0、0]}
 }）;

参照してください。フィルタアニメーションテストを。次の画像は、ガウスぼかしをアニメーション化し、ボタンの状態間の遷移に使用することができる方法を示しています。

効果のこのタイプで使用されている高速のぼかし効果そのデモでは、（前述したようにのみ、その機能をサポートしているブラウザで実行されているのを犠牲にして）YUIのアニメーションが宣言型SMILアニメーション要素を使用していないにもかかわらず、デモ。

CSSプロパティをアニメーション化する

HTMLと同様に、SVG要素は属性もCSSプロパティを持っています。 SVGは、いくつか持って特定のCSSプロパティを。これらのプロパティは、驚くべき効果を作成することも、アニメーション化することができます。たとえば、 stroke-dashoffsetプロパティは、図形の描画シミュレートするために使用することができます。

 / / SVGスニペット
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScriptを
 VARのAnim =新しいY.Animate（{
    ノード： "＃rectumの複数形"
    へ：{'ストロークdashoffset'：0}、
    期間：0.25
 }）;

参照してください。ストロークアニメーションテストを。

graffitisのデモでは、このテクニックを（にもかかわらず、YUIアニメーションなし）を使用しており、そうするカメラのデモでは、（YUIアニメーションで、この時間）。

YUIとSVG：ボンネットの下に

SVG-wow.orgウェブサイトは、YUI 2、YUI 3の両方を使用して、両方のSVG固有の拡張機能を持っています。この記事の次のセクションでは、YUI 3の拡張機能に焦点を当てています。

拡張子が必要でした。

YUIは、SVGのDOM特異性で動作させる
実装の違いを考慮
そのようなSVGの変換のような新しい属性タイプのサポートを追加
追加のアニメーションのタイミングと同期機能を追加

SVG DOM特異性に関する会計処理

前述したように、SVGの属性は、次のような宣言型の要素をアニメーション化することができます<animate> 。 SVGのアニメーションモデルをサポートするために、SVGの属性値は、 アニメーションと基本値の両方を保持します。たとえば、 r上の属性<circle>要素がSVGAnimatedLength次のように定義されます。

インタフェースSVGAnimatedLength {
  読み取り専用SVGLengthがbaseVal属性。
  読み取り専用SVGLength animValの属性。
 };

その結果、さらに宣言的アニメーションをサポートしない実装では、我々は下に到達する必要がbaseVal属性の値を読み取るために：

 VAR円=のdocument.getElementById（ '＃にmyCircle'）;
 VAR右辺= circle.getAttribute（ 'R'）baseVal.value。

拡張機能は、SVGの属性 '珍しい価値モデルを考慮するためにアニメーションエンジンを可能にするために必要であった。ありがたいことに、YUI 3は、アニメーションの動作の概念があります。行動は、本質的属性に固有のフックであり、それはSVGの属性値を処理するためのサポートを追加するのはかなり簡単でした。たとえば、 SVGAnimatedLength属性は次のように処理されます。

 VAR lengthBehavior = {
    セット：関数（Animは、ATT、経過、期間、楽しく、へ、から）{
         / / SVG固有の処理
     }

    取得：関数（アニム、ATTR）{
         / / SVG固有の処理
     }
 };

 / / <circle> 'srの属性を処理する
 Y.Animate.behaviors.r = lengthBehavior。

などの他のSVGの属性の値の複数の拡張機能がありますtransform （のような属性、色属性値fill 、 strokeまたはstop-colorなどと属性） stdDeviation前述したように。

いくつかの同様の調整は、例えば、必要とされたY.Node.prototype.toString SVGのを考慮して、再度、方法baseVal （この時間classNameノードプロパティ）。別の例は、デフォルトのノード·セッターであるNodeモジュールです。

ブラウザの違いの会計処理

以前の拡張が原因でHTMLとSVGの間で仕様の違いにより必要とされていますが、次のようにするためのブラウザ間で実装のバリエーションが要求されている。

SVGは、属性と呼ばれる特別なカテゴリの持つプレゼンテーション属性を。また、CSSスタイルを（すべてのブラウザのサポート）をサポートする実装では、これらのプレゼンテーション属性は非常に低いとCSSプロパティを指定するもう一つの方法です特異性を。 SVG仕様から：

彼らはゼロの特異性を有する著者スタイルシートの先頭に置か対応するCSSスタイル規則によって置き換えられたかのようにプレゼンテーション属性は、このようにCSS2カスケードに参加します。プレゼンテーション属性は、著者スタイルシートまたは 'スタイル'属性に指定された他のCSSスタイルルールよりも低い優先順位を持っていることを一般的には、このことを意味します。

残念ながら、一部のブラウザでは正しく仕様を実装していないとwindow.getComputedStyleすべての可能なSVG、CSSのプロパティを設定するためのソースには常に考慮されていない：CSSセレクタ、スタイル属性とプレゼンテーション属性。

YUIはに救助に来たおかげでNodeこれらのブラウザの違いを隠すために拡張することができるモジュールです。 Y.DOM.CUSTOM_STYLESとY.Node.prototype.getComputedStyle SVGのスタイルプロパティを読み取るための統一的な方法を提供するために拡張することができます。

拡張`Y.DOM`

YUIは、経由するすべてのDOMへのアクセスをラップNodeインターフェースを提供します。結果として、など、いくつかのSVG特有のDOMメソッドは、 getBBox （SVG要素の境界を計算するために使用）、ラップされたオブジェクトにアクセスすることはできません。

SVGのプログラムに物事を容易にするためには、デフォルトのY.DOMモジュール（これまでの拡張は、 Node使用しています）のいずれかSVG DOMの機能を公開したり、コンテンツを操作する際に一般的に必要とされる便利なメソッドを追加するために追加されました。

firstElement/lastElement/prevElement/nextElement/removeAllChildren （SVG固有ではありません）
getMatrix/setMatrix 。 SVG要素の変換を簡単に操作する方法は、標準のSVG DOMで悪名高い困難な何かを提供しています
getBBox/getViewportBBox要素の座標系でビューポート空間でのバウンディングボックスにアクセスする簡単な方法を提供しています。

loadContent 。 DOMフラグメントを挿入するためのユーティリティは、JavaScriptのオブジェクトリテラルを使用して説明します。たとえば、次のように

 myNode.loadContent（{
    タグ： 'g'は、
    記入してください： '赤'、
    ストローク： 'none'に、
    子供：[{
        タグ： "RECT"
         X：10、
         Y：10、
        幅：200、
        高さ：300
     }、{
        タグ： '円'、
         R：10、
         CX：105、
         CY：155
     }、{
        タグ： 'イメージ'、
         'のxlink：HREF'： '画像/ photo.png'、
        幅：200、
        高さ：'300px '
     }、prevSibling）;

様々なDOM呼び出しを（例えば、製造を簡略化したものですcreateElementNS 、 setAttributeNSとappendChildを作成する） g要素とその子要素をとする前にそれを挿入するprevSibling下myNode 。ユーティリティは、属性と要素の名前空間を扱っています。

タイミングと同期のアニメーションエンジンに追加

アニメーションを含む多くの、そうでない場合、ほとんどの効果は、複数の振り付けアニメーションのインスタンスを必要とします。一般的に、いくつかのアニメーションは、所望の効果を作成するために必要とされ、開始またはアニメーションの終了オフセットを時間と、時にはお互いに依存します。アニメーションを同期する必要があります。

あなたが他の後に1をフェードインする必要がある図形のセットを持っている場合たとえば、あなたはわずかなオフセットと連鎖し、その開始時間を各要素のフェードアニメーションを作成し、する必要があります。

 VARの連鎖= Y.all（ '＃の連鎖サークル'）、
     firstAnim、previousAnim。

 chained.each（関数（円）{
     VARのAnim =新しいY.Animate（{
        ノード：円、
         {'塗りつぶし'： 'ホワイト'}から、
         {'塗りつぶし'： 'グレー'}、へ
        期間：0.25
     }）;
     {（previousAnim！==未定義）の場合
         / / beginingの後0.15秒になるのAnimの開始をSynchrnoize
         /前のサークルのアニメーション（previousAnim）の/。
         previousAnim.onBegin（アニム、0.15）;
    する} else {
         firstAnim =アニム。
     }
     previousAnim =アニム。
 }）;

 / /円のいずれかをクリックした後に最初のアニメーションの1を起動します。
これはしないデフォルトYUIのrunメソッドの拡張であることを/ /メモ
 / /オフセット時間がかかります。
 chained.on（ 'クリック'、関数（）{
     firstAnim.run（1）;
 }）;

参照してください。時間オフセットのテストを。

メソッドonBeginそれが簡単にオフセットを任意の時間で、2つのアニメーションの開始を同期させることができます。実際に、 onBeginまたタイムオフセットを持つ関数を呼び出すことができます。同様に、 onEnd拡張子は、アニメーションの終了と同期することが容易になります。

デフォルトでは、YUIアニメーションを同期する方法を提供するイベントがあります。 onBeginとonEnd方法（簡潔の同様の例を以下に示します）、より簡潔に、同期を表現しています。

また、オフセット時間の経過とともに再び、イベントでアニメーションを同期させるためにいつか必要があります。 beginOnとendOn拡張子は、私たちがいることを表現することができます。たとえば、次のように

 anim.beginOn（Y.one（ '＃ボタン'）、 'クリック'、0.5）;

ID 'ボタン'を持つ要素がクリックされた後、アニメーションの0.5秒を開始します。これは短い手です。

 Y.one（ '＃ボタン'）（ 'クリック'、関数（）{上の
    たsetTimeout（500 / *ミリ秒* /、関数（）{anim.run（）;}）;
 }）;

アニメーションクラスに対して行われた最後の拡張子は、それが実際に開始される前に、アニメーションオブジェクトは、その最初のフレームの状態を適用する能力であった。異なる時間オフセットから開始し、複数のアニメーションを含むアニメーション効果を作成するときに、これはしばしば必要とされる。

 VARのAnim =新しいY.Animate（{
    ノード：Y.one（ '＃ボタン'）、
    から：{R：30、 '塗りつぶし不透明度'：0、カラー： '深紅'}、
    へ：{R：80、 '塗りつぶし不透明度'：1、カラー： '金'}、
    期間：0.25
 }）;

 / /以下は、前にターゲットオブジェクト上で目的の状態を設定します
 / /実際にアニメーションを開始する。
 anim.applyStartFrame（）;
 anim.run（2）;

画像shuffleのデモでは、写真のスタックを広げる、またはスタックに戻す画像を置く効果をアニメーションのオフセットを使用しています。

結論

SVGとYUIを使用した作業、特にYUI 3は、非常に楽しい経験をされています：YUIの機能の多くは、箱からSVG右へ適用され、YUIの拡張可能なアーキテクチャは、それが可能で時折問題を回避し、必要な機能を追加しました。

もちろん、YUIのSVGの増加の標準サポートは、特定の一人でSVGドキュメントをスタンドでYUIの仕事を作り、作る際に、参考になるNode回避策はなく、クラスのラップSVG要素を。

参考になるいくつかの拡張もあります。アニメーションは複数の要素をターゲットにできれば例えば、それは役立つだろう。同様に、複数の値を（のようにサポートすること<animate>例えばSVG要素）をより洗練されたエフェクトを作成するために役立つだろう。

SVG-wow.org上のデモはYUI 3.1に書かれており、このブログの目的のために3.2に移植されました。 3.2では、遷移はネイティブの使用している導入されたCSSトランジションのブラウザで利用可能な場合。また、パフォーマンスの向上をもたらすべきである利用できる（この記事の執筆時点でオペラは、FirefoxとWebKit）と同様に活用するSMILアニメーションにYUIのアニメーションエンジンのために可能であるかもしれません。

SVG-wow.orgウェブサイト上のSVG拡張機能は、YUI 3ギャラリーモジュールとして利用可能です YUIとSVGでの作業の楽しさを満喫したい人のために。

参照

SVGうわー！
SVGの仕様
SVGのチュートリアル
AdobeのSVGゾーン（少し古いですが、それでも良い例があります）
carto.netの例
KevLinDev

共有および拡張： del.icio.usでブックマーク | Diggそれ！ | reddit！

2コメント

SVG本当にすごい！
偉大な、例を書くと、コードが使用できるようになります...非常にクール！
ありがとうございました。
によるコメントディランOudyk - 2010年10月19日＃
ニースの記事、興味深い記事....
_________
ヘレン。
によるコメントビルダーマンチェスター - 2011年6月19日＃

申し訳ありませんが、コメントフォームは、この時点でクローズされます。

を搭載ワードプレスでヤフーウェブホスティング。

ヤフーユーザーインターフェイスブログ（YUIBlog）