bezierCurveToまたはquadraticCurveToに沿ってアニメーション

Question

javascriptには、bezierCurveToまたはquadraticCurveToを使用して描いたパスに沿ってオブジェクト（イメージなど）をアニメーション化するビルトイン方法がありますか？私がしようとしているのは、正確にボールの軌跡とランディングスポットをアニメーション化して、それが役立つ場合です。

Answer 1

組み込みの方法は申し訳ありませんが、JavaScriptの

にあります。本当にそれはここでの短い答えです。少なくともキャンバスにはない。

ここではですが、SVGのパスに沿ってアニメートする方法です。実際には、SVGに沿ってアニメーションを作成し、Canvasで使うようにx、yポイントをすべてキャプチャすることはできますが、それはおそらく実際には非効率的です。

もう1つの方法は、数学を使ってベジェ曲線を二等分する（分割する）ことです。この曲線は、同時にその曲線の中間点になります。その後、2つの小さな曲線を二等分する。これを何度もやり直し、最終的に、アニメーション化するオブジェクトの軌跡をプロットするために使用できる中間点のリストを取得します。

Answer 2

私はこれがちょっと遅いと知っていますが、これはあなたが探しているものかもしれません。

例：http://joelb.me/scrollpath/ のGit：ブラウザのサポートはまだむらですがhttps://github.com/JoelBesada/scrollpath

Answer 3

、あります：あなたは破線を使用することができます。

あなたはドロー機能を持っている場合：あなたは、最初のダッシュスペースがあなたより長いことを確認するために持っている

var start = null; 
var duration = 1000; 
var length = 150; // I'm guessing here, but you can calculate it 

function step(timestamp) { 
    if(start === null) { start = timestamp; } 
    canvas.width = canvas.width; 
    var progress = Math.min((timestamp - start)/duration,1); 
    ctx.setLineDash([0,length,3,0]); 
    ctx.lineWidth = 3; 
    ctx.lineDashOffset = progress * length; 
    draw(); 
    ctx.stroke(); 
    if(progress < 1) { 
    requestAnimationFrame(step); 
    } 
} 
requestAnimationFrame(step); 

：

function draw() { 
    ctx.beginPath(); 
    ctx.moveTo(20,20); 
    ctx.quadraticCurveTo(100,100,30,90); 
} 

は、あなたは、このようにアニメーションを設定することができますライン全体を移動し、オフセットをアニメートすると、短いダッシュ（あなたの「ドット」）があなたのパスに沿ってスライドします。 lineCapで丸めることができます。作業デモ：http://jsbin.com/UFOTavoX/1

setLineDashおよびlineDashOffsetのサポートは普遍的ではありません。それについての詳細はhttp://www.rgraph.net/blog/2013/january/html5-canvas-dashed-lines.htmlです。