click - css timeframesまたはjs/jqueryでパスをアニメートしますか？

Question

パス/タイムラインのようなパスのアニメーションを作成したいと思います。ユーザーには円が表示され（最終的には画像になる）、この円をクリックするとアニメーションが始まり、フェードインされた別の円にアニメーション/移動するパスが表示されます。自分のアイデアを最もよく説明できるイメージを付けました。

私の質問です - これを行うにはどうすればよいでしょうか？ CSSアニメーション、またはjqueryライブラリが役に立つでしょうか？

あなたは

Answer 1

私はベースとしてSVGを取るありがとうございます。そのようなInkscape（または同様のもの）を使用すると、パスを視覚的にデザインし、青い円を含めることができます。

​​

最後にあなたは円とパス参照するためにJavaScriptを使用することができます：

をあなたは（生成されたファイルから、SVGコードをコピーして）ので、同じようにHTMLでのSVG-コードを挿入するよりも

var path = document.querySelector('.path'), //these selectors are just arbitrary 
    circle = document.querySelector('.circle'); 

は、パス上のポイントを取得するには、使用することができます：アニメーションの

var point = path.getPointAtLength(); 

、私はあなたが基本的にそれを行う方法を知っていると仮定します。これは、ここで説明するにはあまりにも多くなるからです。しかし、pがあなたのアニメーションの進行状況で、[0,1]の範囲にあると言うことができます。与えられたpでポイントを計算するには、そのように行うことができる：

let pointAtT = (path, t) => { 
    let l_total = path.getTotalLength(); 
    return path.getPointAtLength(l_total * t); 
} 

は、その持つ、あなたはxとyが円を操作するために座標を使用することができます。場合によっては変換を適用することに注意してください。そのため、すべてをグローバル座標空間に変換し、そこで計算し、その結果をアイテムの座標空間に変換することをお勧めします。 svg.js、snap.svgとRaphaël：mdn

上

ドキュメントはあなたを助けるかもしれないいくつかのSVGライブラリがあります。