プロジェクトでは、道路を転がるときにタイヤが回転して移動するように、またはカールした人差し指が伸びて再び丸まるように、円が直線経路に沿って回転している間に円を線にしようとしています (そして再び円に戻ります)。手のひら。
このFiddleには、HTML で定義されている線形の黒いパス (円の上にあり、指が伸びるのを模倣する) に沿って回転する静的な SVG (上の円) があります。
また、d3 を使用して、接続されたポイントで構成される「円」を生成し (ここで@ChrisJamesC のおかげで円をクリックすると展開できます)、関数 moveAlongLine で変換および回転されます。紫色の線:
function moveAlongLine() {
circle.data([lineData])
.attr("transform", "translate(78.5,0) rotate(-90, 257.08 70) ")
.duration(1000)
circle.on("click", transitionToCircle)
}
最初の問題は、.duration(1000)が認識されず、コンソールで a がスローされるUncaught TypeError: Object [object Array] has no method 'duration'ことです。そのため、SVG での の静的定義と JS/D3 での動的設定には違いがありますdurが、これはマイナーです。
もう 1 つは、静的サークルのように変換属性を互いに抽象化する必要があるかどうかです。静的な円では、移動は 1 つのアニメーションであり、回転は別のアニメーションです。これらは同じスターと持続時間を持つだけなので、一緒にアニメーション化されます。d3 で両方をどのように適用しますか?
私が得ることができない課題は、静的ポイントが円の上部中央であり、線の左端のポイントと同じである状態で、どのように上向きに展開するか (および再ロールバックするか) です。
これらはより良いようです：
- 回転中に展開アニメーションが発生するようにする必要がありますか? これは、段階的/順次ベースである必要があるようです...
- または、八角形 (パスとして定義) を考えてみましょう。7 つの辺を回転させた場合、次に 6 つ、次に 5 つ.... 多面体上のかなり多数の点に対してこれを行いますか? (円は約 50 ピクセル程度で十分なので、100 ポイントで十分です) これはフィドルの真ん中の例です。たぶんプログラムでこれをやっていますか？
- または、これは私に別の方法を考えさせます: (八角形の場合)、8 つのライン パス (Z がなく、追加の終点のみ) とそれらの間の遷移を作成できますか? このフィドルのように
- または、キーフレームと何か関係がありますか? Synfig でアニメーションを作成しましたが、それを SVG に変換する方法がわかりません。SVG に変換できる場合、synfig ファイルはhttp://specialorange.org/filedrop/unroll.sifzにありますが、ここにある xsl ファイルは、
xsltproc.
これは非常に複雑に思えますが、可能性があります:
- ポイントがたどるパス（おそらく同じ数の参照ポイントを持つベジエ曲線）を定義し、参照ポイントも動的に変換します...概念の例については、これを参照してください
これは複雑でぎこちないようです:
- 線の長さが伸びている間、その前に成長するマスクを置いて、実際の円を転がします。
いくつかのメモ:
- d3 円のポイント数は JS で調整できます。現在は低く設定されているため、レンダリングで少しポイントを確認して回転が発生したことを確認できます (グラデーションが上の円にあるように)。 .
- これは、生徒が数直線と円の間で保存されるものを学習するのに役立ち、特に分数を学習するのに役立ちます。コンセプトの適用については、compthink.cs.vt.edu:3000を参照してプロトタイプを確認してください。これは、表現を切り替えるのに役立ち、より良いアイデアを得るのに役立ちます...