web-dev-qa-db-ja.com

html5あるSVGを別のSVGにモーフィングまたはアニメーション化する方法は？

私はいくつかの検索を行いましたが、認める必要があります。SVGの経験はありません。Raphael、PaperJS、KineticJS、EaselJSなどの最新のライブラリをたくさん見ましたが、ここでの目標に何が適合するかわかりません。 CSSキーフレームでさえうまくいくでしょう。

この問題へのポインタをいただければ幸いです。

目標
ブラウザで、遷移タイプease-outを使用して、svg1をsvg2にアニメーション化したい

制約

  • 必要に応じて、任意のjavascriptライブラリ
  • すべての要素を同じIDの他の要素にできる必要があります
  • モーフ形状、パス、塗りつぶし*、ストローク*、cx、cy、rc、ry
  • 現在のFirefoxとChromeで動作するはずですが、IE 10があればいいでしょう
  • IPhone 5、Nexus 4、7などの新しい携帯電話で動作するはずです
  • モバイルでもまともなパフォーマンス
  • <svg>または<canvas>としてレンダリングされるかどうかは関係ありません

svg1：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient id="svg_7" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_1">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse ry="145" rx="116" id="svg_2" cy="201" cx="317" fill-opacity="0.36" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="url(#svg_7)"/>
  <ellipse ry="21" rx="10" id="svg_5" cy="137" cx="274" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <ellipse ry="31" rx="17" id="svg_9" cy="114" cx="346" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="#0cd60c"/>
  <path id="svg_14" d="m235,239c55.66666,-1.33333 133.33334,-71.66667 167,-4l-167,4z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
 </g>
</svg>

svg2：

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <linearGradient id="svg_6">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_7">
   <stop offset="0" stop-color="#828236"/>
   <stop offset="0.99219" stop-color="#7d7dc9"/>
  </linearGradient>
  <linearGradient id="svg_1" x1="0" y1="0" x2="1" y2="1">
   <stop stop-color="#828236" offset="0"/>
   <stop stop-color="#7d7dc9" offset="0.99219"/>
  </linearGradient>
 </defs>
 <g>
  <title>Layer 1</title>
  <ellipse id="svg_2" fill="url(#svg_7)" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.36" cx="317" cy="201" rx="116" ry="145"/>
  <ellipse id="svg_5" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="277.5" cy="132.5" rx="13.5" ry="25.5"/>
  <ellipse id="svg_9" stroke="#000000" fill="#0cd60c" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="349.5" cy="110" rx="20.5" ry="35"/>
  <path id="svg_14" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m235,240c21.66666,81.66669 114.33334,96.33331 167,-4l-167,4z" />
 </g>
</svg>

psエリアにコードを貼り付けるだけで、 ここで視覚化 できます。

表示するコードがありません。間違ったところから始めたくありませんでした。私の直感によると、最良の解決策では、これらのノードを1つずつナビゲートする必要がない可能性が50％あります。

javascripthtmlanimationsvgsvg-morphing
16
Fabiano Soriani

私が見る限り、あなたはパスをモーフィングしたいだけです

これは素晴らしいチュートリアルです： http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG

SVGパスのW3C仕様： http://www.w3.org/TR/SVG/paths.html

アニメーションのW3C仕様： http://www.w3.org/TR/SVG/animate.html

次に例を示します。 http://www.carto.net/svg/samples/path_morphing.shtml

5
Mike

2015年にsvgモーフ用のかなり素晴らしいライブラリがいくつかもたらされたことに言及する必要があります。

4
Darwin

確かに、ダーウィンが述べたように、svgモーフィングを可能にするライブラリはかなりたくさんあります。

私が見つけたいくつかの追加機能は、snap.svg、KUTE.js、GSAPでした。 Svg.jsにはsvgmorphのプラグインがあり、velocity.jsがまだこれをサポートしているとは思いません。

3
Simon d

言い換え：

現在、両方のパス要素で同じ数の頂点を使用する必要がありますそしてそれらは同じタイプで同じ順序で表示される必要があります他のパスで-説明。また、両方のポリゴンを同じ方向に向ける必要があります（左右と左右は望ましくない結果を生成します）。

したがって、それを行うことはできますが（例については以下のリンクを参照）、同じ曲線タイプ、ポイントなどを使用してまったく同じ方法でシェイプAのパスとシェイプBのパスを作成するように計画する必要があります。

これが私が作った例です： animated svg path
右側のパスを画像のマスクとして設定しています。また、アニメーション化します。

  1. イラストレーターで1つのシェイプを作成しました
  2. その形を複製しました。
  3. 複製を新しい形状に変更しました。頂点を追加したり、ベジェから線形曲線タイプに変更したりしないように注意してください
  4. fyiでポイント数を確認するには、パスを選択してから、[パス]> [簡略化]に移動すると、そのパス上の現在のポイントが表示されます...
  5. そのsvgファイルを保存し、それらのパスをアニメーション情報とともに別のsvgにコピーして貼り付けます。
  6. 注：パスは、イラストレーターで使用されているレイヤー名に対応するsvgファイル内の要素内に配置されます。イラストレーターの異なるレイヤーに両方の形状を保持し、それらに明確に名前を付けると、svgファイルを整理するのに役立ちます。
  7. 注＃2：シェイプを作成し、それが非常に単純な場合、つまり直線のみの場合、アニメーション化が難しいと個人的に感じた_pathではなく_polygonとして保存される可能性が高いため、ベジェハンドルを追加することをお勧めします。少なくとも1つのポイント（および2番目の形状の同じ対応するポイント）に。
2
jared

2番目のSVGではなく変更のリストとしてモーフィングを定義できる場合は、d3 http://d3js.org/ フレームワークを使用できます。

それは少し急な学習曲線を持っていますが、それはあなたに多くの力を与えます。もっと簡単なものが必要な場合は、Raphael http://raphaeljs.com/ -機能は似ていますが、開始する方が簡単です。

0
naugtur