Wie würdest du etwas animieren, so dass es einer Kurve folgt?

Question

Wenn ich
<div id="curve" style="position:relative; height:100px; width:100px; />

Wie würde ich es machen auf einer Kurve bewegen? Ich habe gegoogelt und alles andere scheint kein anderes Beispiel zu finden, das zwei Funktionen gleichzeitig aufrufen würde. Dies ist die Art von Code würde Ich mag, aber nicht funktioniert:

$('#curve').click(function() { 
    $(this).animate(
     { 
      top: 400, 
      left = $(this).left() + $(this).left()*$(this).left() 
     }, 
     'slow', 
     function() { $(this).animate({ left: 600 }, 'fast'); } 
    ); 
}); 

Auch wenn die nicht korrekter Code, animiere ich glaube, nimmt nur „Ziele“ für etwas zu gehen, so ein dynamisches Ziel wouldn‘ t Arbeit, denke ich. Wonach suche ich, damit das funktioniert?

EDIT :: Ich werde auf jeden Fall dieses Plugin abholen, aber ich frage mich auch, warum dieses Bit Code nicht funktioniert, wie ich es erwarten würde.

Hier ist ein weiterer Versuch, ein for-Schleife und die Verzögerungsmethode

$('#curve').click(function() { 
    for (var i=0; i<400; i++) 
    { 
     $(this).delay(1000); 
     $(this).css({ top: i, left: i*1.5 }); 
    } 
}); 

Außer es nur sofort zu dieser Position geht, ohne Verzögerung oder nichts. Wenn es also bei [0,0] anfängt, teleportiert es, sobald ich es anklicke, auf [400,600]. Warum funktioniert die Verzögerung nicht?

Answer 1

Ich denke, dass Sie diesmal animierte Kurve Teil für Teil in js neu berechnen müssen und dann, indem Sie sich um kleine Teile bewegen (= Sie könnten wahrscheinlich Plugin finden oder Sie müssen die ganze Mathematik selbst tun)

Bearbeiten 2: Der zuvor hinzugefügte Link wurde verschoben =>http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/. Danke, Zach.

Edit 1: fasziniert mich das, so habe ich wenig Forschung Google - wie ich dachte: Plugin bereit für den Einsatz hier: http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/

Answer 2

Die jQuery.path plugin ist, was Sie wollen:

Beispiel: Animieren entlang eines Bogens

var arc_params = { 
    center: [285,185], 
    radius: 100,  
    start: 30, 
    end: 200, 
    dir: -1 
}; 

$("my_elem").animate({path : new $.path.arc(arc_params)}); 

Beispiel: animieren entlang einer Sinuswelle

var SineWave = function() { 
    this.css = function(p) { 
     var s = Math.sin(p*20); 
     var x = 500 - p * 300; 
     var y = s * 50 + 150; 
     var o = ((s+2)/4+0.1); 
     return {top: y + "px", left: x + "px", opacity: o}; 
    } 
}; 

$("my_elem").animate({path : new SineWave}); 

Answer 3

Verwenden Sie jQuery 1.4?

$(this).animate({ 
    left: [500, 'easeInSine'], 
    top: 500 
}); 

Sie werden die Lockerung Plugin benötigen für diese Arbeit: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

Z.B. http://jsbin.com/ofiye3/2

Answer 4

Hier ist eine einfache kleine Bibliothek, die ich geschrieben habe, die beliebige kubische Bézier-Kurven für einen Animationspfad erlaubt, und sogar den Drehwinkel für Sie berechnet. (Die Bibliothek ist nicht poliert oder noch dokumentiert, aber es zeigt, wie einfach es auf den Schultern von SVG DOM selbst zu stehen, wenn Sie keine SVG-Elemente auf Ihrer Seite haben.)

http://phrogz.net/SVG/animation_on_a_curve.html

Sie können den Code bearbeiten und die Änderung der Kurve/Animation beobachten oder die Kurve bearbeiten und die Codeaktualisierung anzeigen.

Bei meiner Seite nicht erreichbar ist, hier ist der entsprechende Code für die Nachwelt:

function CurveAnimator(from,to,c1,c2){ 
    this.path = document.createElementNS('http://www.w3.org/2000/svg','path'); 
    if (!c1) c1 = from; 
    if (!c2) c2 = to; 
    this.path.setAttribute('d','M'+from.join(',')+'C'+c1.join(',')+' '+c2.join(',')+' '+to.join(',')); 
    this.updatePath(); 
    CurveAnimator.lastCreated = this; 
} 
CurveAnimator.prototype.animate = function(duration,callback,delay){ 
    var curveAnim = this; 
    // TODO: Use requestAnimationFrame if a delay isn't passed 
    if (!delay) delay = 1/40; 
    clearInterval(curveAnim.animTimer); 
    var startTime = new Date; 
    curveAnim.animTimer = setInterval(function(){ 
    var elapsed = ((new Date)-startTime)/1000; 
    var percent = elapsed/duration; 
    if (percent>=1){ 
     percent = 1; 
     clearInterval(curveAnim.animTimer); 
    } 
    var p1 = curveAnim.pointAt(percent-0.01), 
     p2 = curveAnim.pointAt(percent+0.01); 
    callback(curveAnim.pointAt(percent),Math.atan2(p2.y-p1.y,p2.x-p1.x)*180/Math.PI); 
    },delay*1000); 
}; 
CurveAnimator.prototype.stop = function(){ 
    clearInterval(this.animTimer); 
}; 
CurveAnimator.prototype.pointAt = function(percent){ 
    return this.path.getPointAtLength(this.len*percent); 
}; 
CurveAnimator.prototype.updatePath = function(){ 
    this.len = this.path.getTotalLength(); 
}; 
CurveAnimator.prototype.setStart = function(x,y){ 
    var M = this.path.pathSegList.getItem(0); 
    M.x = x; M.y = y; 
    this.updatePath(); 
    return this; 
}; 
CurveAnimator.prototype.setEnd = function(x,y){ 
    var C = this.path.pathSegList.getItem(1); 
    C.x = x; C.y = y; 
    this.updatePath(); 
    return this; 
}; 
CurveAnimator.prototype.setStartDirection = function(x,y){ 
    var C = this.path.pathSegList.getItem(1); 
    C.x1 = x; C.y1 = y; 
    this.updatePath(); 
    return this; 
}; 
CurveAnimator.prototype.setEndDirection = function(x,y){ 
    var C = this.path.pathSegList.getItem(1); 
    C.x2 = x; C.y2 = y; 
    this.updatePath(); 
    return this; 
}; 

Answer 5

Es ist ein kleines Skript, nur für Animation, die nicht in geraden Linien, die so genannte pathAnimator

Es ist sehr sehr klein und super effizient. und Sie brauchen nicht einmal jQuery;)