16

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

この問題へのポインタは大歓迎です。

ゴール
ブラウザー上で、トランジション タイプを使用して、svg1 を svg2 にアニメーション化したいease-out

制約

  • 必要に応じて任意の 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領域にコードを貼り付けるだけで、ここで視覚化できます。

表示するコードはありません。間違って始めたくありませんでした。私の直感では、50% の確率で、これらのノードを 1 つずつ比較してナビゲートすることが最善の解決策ではないことがわかります。

4

5 に答える 5

6

2015 年には、svg モーフ用の非常に優れたライブラリがいくつか提供されたことに言及する必要があります。

于 2015-12-30T09:46:51.003 に答える
5

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

これは素晴らしいチュートリアルです: SVG Essentials/Animating and Scripting SVG

SVG パスの W3C 仕様: w3.org/TR/SVG/paths

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

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

于 2013-02-14T08:11:56.313 に答える
3

実際、ダーウィンが言及したように、svg モーフィングを可能にするライブラリはかなりあります。

私が見つけたいくつかのエクストラは、snap.svg、KUTE.js、GSAP です。Svg.js には svg morph 用のプラグインがあり、velocity.js はまだこれをサポートしているとは思えません。

于 2016-04-23T15:04:23.003 に答える
2

言い換え:

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

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

ここに私が作った例があります:アニメーション化された svg パス
右側のパスを画像のマスクとして設定しています。それはまたアニメーション化します。

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

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

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

于 2013-02-14T08:38:57.080 に答える