問題タブ [svg-morphing]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - html5 ある SVG を別の SVG にモーフィングまたはアニメーション化する方法は?
私はいくつかの検索を行いましたが、認めなければなりません.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:
svg2:
ps領域にコードを貼り付けるだけで、ここで視覚化できます。
表示するコードはありません。間違って始めたくありませんでした。私の直感では、50% の確率で、これらのノードを 1 つずつ比較してナビゲートすることが最善の解決策ではないことがわかります。
svg.js - svg.js はパス モーフィング アニメーションに対応していますか
パス モーフィングを使用してアニメーション svg を作成するためのツールを作成しました。現在、私のツールは文字列からコードを構築することに依存していますが、svg.js ライブラリに移行することに興味がありました。ただし、パスモーフィングピースで障害に遭遇しました。つまり、このようなものを作成するために
http://letmespellitoutforyou.com/samples/svg/anim_morph.svg
アニメーションに関するsvg.jsドキュメントには何も表示されません
http://documentup.com/wout/svg.js#animation-elements
「d」属性をアニメーション化し、それに to= および from= パラメータを指定する方法について説明しています。これがサポートされているかどうか、どうすればよいか、サポートされていない場合は、要素を自分で構成して svg.js オブジェクトに追加することは可能ですか?
html - SVG ダイヤモンドを円に変形する方法
私は最近、つま先を SVG に浸しています。現在、ユーザーがカーソルを合わせると、ダイヤモンドを円に変形させようとしています。
CSS Tricksでこのチュートリアルを見つけました
ポイントを使用してアニメーションを実行していることに気付きましたが、私の SVG 形状は次のとおりです。
と
これを行う方法はありますか？CSS トリックのチュートリアルに従うことができるように、これらの形状のポイントを取得するにはどうすればよいですか?
html - SVG - パスを互いにスムーズにモーフィングする
現在、2 つ以上のパスを互いにモーフィングして、スムーズな pinch2Zoom アニメーションを作成するソリューションを探しています。現在、私は不透明度を使用して、2 つのパスを互いにブレンドしています。
しかし、これは単なる回避策であり、パスを他のパスに変換する「実際の」svgアニメーションについてインターネットであまり見つけていません...だから、あなたの1人がきちんとしたアイデアを持っているかもしれません:) - thx in前進
svg - SVG パスとモーフィング
少し理論的な質問があります。svg に 2 つのパスがあるとします。それぞれ点数が違います。1 つには 4 つのベジエ曲線があり、もう 1 つには 3 つのベジエ曲線があります。
私がやりたいことは、一方を他方にモーフィングすることです。今、私はそれらが同じ正確な構造と同じ数のポイントを持たなければならないことを知っています。
問題は、オブジェクトの形状を変更せずに、パスに「仮想ポイント」を追加して、同じ構造とポイント数を取得できるかということです。
たとえば、パスの 1 つで 1 つのポイントを取得し、その後に同じポイントを追加してポイントの数を増やします。または、実際には曲線ではなく線のふりをする両方のパスにベジエ曲線を作成します。それはオブジェクトを変更しますか？また、x=1 y=1 と x=4 y=4 に点がある場合、この形式を使用するとベジエ曲線が線になりますか? (M1 1C1 1 4 4 4 4)
javascript - Javascriptを使用して形状を他の事前定義された形状にスムーズにモーフィングするSVG
- シェイプ間のスムーズな移行が必要です (以下の例では、スムーズな移行が必要な場所がわかるように突然の移行を示しています)。
- 形状の順序は Javascript によって決定されます (この例では任意の順序を修正しましたが、実際の問題ではユーザー入力によってどの形状が選択されるかが決定されるため、事前にはわかりません)。
example.svg:
おそらくそれは何とか実行<animate>可能ですが、私はそれを動作させることができません。
animate.svg: