問題タブ [svg-animate]

onLoadで時計回りにアニメーション化する円グラフにこだわっています。これが私の円グラフのフィドルです

たとえば、ブレジェ曲線のパスを操作するには、このアニメーションが必要です。

また、snap.svg ライブラリを使用して実現できることも認識していますが、この場合はワークアウトできません。

どんな助けでも大歓迎です。

前もって感謝します！

複数のパーツを含む 17 秒の長さの 2 番目のアニメーションがあります。完了したら、シーケンス全体を繰り返すにはどうすればよいですか? repeatCount = "indefinite"私はそれぞれの属性を試しまし<animate>たが、それは物事を奇妙にしました。参照用などに繰り返したいアニメーションを次に示します。

このクールな SVG ボーダー アニメーションを見つけたので、これを自分の Web サイトに適用しようとしましたが、私の Web サイトにはさまざまなサイズの画像が含まれているため、アニメーションは幅と高さによって制限されます。

このアニメーションをすべての画像サイズに使用できるようにコードを編集する方法はありますか?

私の下手な英語でごめんなさい:)

svgを使用していくつかの物理プロセスの SVG アニメーションを実行しています(基本的に、アニメーション全体を 1 つのsvgファイルとして必要です)。

例は、 https ://s3.amazonaws.com/public-bucket-vzi0CDPFDE4ywJfvfylfpnDW/dwg.svg で確認できます。

ここで、現在の時刻を表示する「Time: 1.23ns」というラベルを追加したいと思います。テキストオブジェクトの内容を置き換えたり、テキスト要素内に現在の時刻のフォーマットを挿入したりする明白な方法を見つけることができませんでした。

また、このアニメーションが JavaScript を使用せず、SVG アニメーションのみであれば素晴らしいと思います。

D3.js と Google マップを使用してアニメーション マップを作成しています。Googleマップの上のオーバーレイ内にd3.js（Googleマップ+ D3というチュートリアルで説明されているように）で円を作成しました。ここまではすべて正常に動作します。地図と円を作成するためのコードは次のとおりです (コードは非常に面倒ですが、私は d3.js 初心者です)。

次に、円をアニメーション化して、24 時間で何が起こっているかを示します。私のjsonファイルでは、各点/円には「h_」+時間で始まる24の変数があります（たとえば、h_0、h_1、h_2、h_3 ...）これらの変数を調べて円の半径を更新するには、使用しましたUIスライダー。Update 関数とスライダー関数は次のとおりです。

これはうまく機能し、円は ui.value に基づいてアニメーション化されます。

しかし、マップをズームしてスライダーの値を変更しても、何も起こりません。スライダーは引き続き機能しますが、円の半径がアニメーション化されなくなりました。コンソールにエラーはありません。

基本的に、デフォルトのズームを変更すると、更新機能が機能しなくなります。

Googleマップをズームした後、デフォルトのズームレベルに戻っても、UIスライダーの変更で円が半径を変更しなくなった理由が本当にわかりません。

よろしくお願いします。

一連の円をアニメーション化するスナップ svg アニメーションがあり、それらが互いに特定の距離内にある場合はそれらの間に線を引きます。ただし、実行できる最適化がたくさんあることはわかっていますが、その方法が正確にはわかりません。重宝しそうな気がする

1. スナップでの近接検出の良い例があります
2. snap svg でのアニメーションの最適化に関する詳細情報があります。見つけるのは簡単ではありませんでした。

アニメーションの実際の例を次に示します。

http://jsfiddle.net/heaversm/sbj4W/1/

そして、最適化できると私が信じていることは次のとおりです。

各円は独自のアニメーション関数を呼び出します。円はすべてグループに追加されています。グループのすべてのメンバーにランダムなモーションを適用する方法があり、すべての要素に対して関数を呼び出すよりもパフォーマンスが高いと思います。グループ内。

近接関数は厄介です。円ごと、更新サイクルごとに、他のすべての円の配列をループして、X 座標と Y 座標が線を引くのに十分近いかどうかを確認する必要があります。さらに、2 つの円の間で 1 つの共有回線を使用するのではなく、各円が隣接する円に線を引くため、重複した線が得られることを意味します。

これに対応して、各円のアニメーション機能により、画面上のすべての線が消去されます。理想的には、すべての円が 1 つの更新関数を共有し、その関数内で線を消去します。

現時点では、レンダラーがさまざまなアニメーションやループのすべてに対応できていないことがわかります。上記のことを最適化するための助けがあれば（または私が奇妙なことをしていることがわかれば、大歓迎です。

永遠に繰り返されるバウンス アニメーションを作成しようとしています。私が抱えている問題は、スナップがコールバックに入れたアニメーションを実行していないように見えることです。Snap back 0.1.1 でこの問題を説明している github にいくつかの問題があるようですが、それ以降はクローズされています。他の誰かがこのようなものを見たことがありますか?

アニメーションの最初の部分を実行してから停止する現在のコード:

SVG アニメーションは chrome では正しく動作しますが、firefox では動作しません。ページが読み込まれてから 0.4 秒後にアニメーションを開始しようとしています。ここにコードがあります

私は何を間違っていますか？