Comment animeriez-vous quelque chose pour qu'il suive une courbe?

Question

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

Comment puis-je faire passer une courbe? J'ai googlé et tout mais ne peux pas sembler trouver un autre exemple qui appellerait deux fonctions à la fois. C'est le genre de code que je voudrais, mais ne fonctionne pas:

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

Même si ce n'est pas code correct, je crois animate ne prend « destinations » pour quelque chose d'aller, donc un wouldn de destination dynamique » Je travaille je pense. Qu'est-ce que je cherche pour faire ce travail?

EDIT :: Je vais certainement prendre ce plugin, mais je me demande aussi pourquoi ce morceau de code ne fonctionne pas comme je l'attendais.

Voici une autre tentative à l'aide d'une boucle et la méthode de retard

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

Sauf que tout va instantanément à cette position, aucun retard ou quoi que ce soit. donc si ça commençait à [0,0], dès que je clique dessus, il se téléporte à [400,600]. Pourquoi le retard ne fonctionne-t-il pas?

Answer 1

Je pense que cette fois, vous devez recalculer la courbe animée partie par partie en js et ensuite le faire en déplaçant par petites parties (= vous pourriez probablement trouver le plugin OU vous devrez faire tous les calculs par vous-même)

Modifier 2: Le lien précédemment ajouté a été déplacé =>http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/. Merci, Zach.

Edit 1: cela me Intrigué, alors je l'ai peu de recherche google - ce que je pensais: Plugiciel prêt à être utilisé ici: http://foxparker.wordpress.com/2009/09/22/bezier-curves-and-arcs-in-jquery/

Answer 2

Le jQuery.path plugin est ce que vous voulez:

Exemple: Animer le long d'un arc

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

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

Exemple: animer le long d'une onde sinusoïdale

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

Utilisez-vous jQuery 1.4?

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

Vous aurez besoin du plugin pour faciliter cela fonctionne: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

Par ex http://jsbin.com/ofiye3/2

Answer 4

Voici une petite bibliothèque simple que j'ai écrite qui permet des courbes de Bézier cubiques arbitraires pour un chemin d'animation, et calcule même l'angle de rotation pour vous. (La bibliothèque est pas encore poli ou documenté, mais il montre à quel point il est facile de se tenir sur les épaules des DOM, même si vous avez pas d'éléments SVG dans votre page SVG.)

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

Vous pouvez modifier le code et regarder la courbe/l'animation changer, ou modifier la courbe et voir la mise à jour du code.

Dans le cas où mon site est en panne, voici le code correspondant pour la postérité:

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

Il y a un script minuscule, juste pour l'animation qui ne sont pas en ligne droite, appelée pathAnimator

Il est très très petit et super efficace. et vous n'avez même pas besoin de jQuery;)