Comment animer un Raphaël objet le long d'un chemin?

L'objet pourrait être simple, un rectangle ou un cercle. Mais le chemin doit être une courbe de bézier. Veuillez fournir javascript/Raphaël code si pas trop de problèmes.

Qu'il serait sympa si il y a fuite de l'effet de l'objet en mouvement lors d'annimation.

Cette question des odeurs de "faire mes devoirs pour moi"
Une recherche sur Google avant de poster la question
C'est bien de poster des choses que vous avez essayé avant de poster sur la pile de sorte que les gens savent que vous n'êtes pas juste en leur demandant de faire votre travail pour vous.

OriginalL'auteur | 2009-06-23

  1. 12

    Juste au cas où vous essayez de l'utiliser avec RaphaelJS 2 (animateAlong n'existe plus), vous pouvez voir ici une solution possible: http://jsfiddle.net/gyeSf/17/.

    Et ici l'original de discussion: https://groups.google.com/forum/#!searchin/raphaeljs/animatealong/raphaeljs/W9bA0SkArVY/KnPRKi8uFrsJ

    Edit: Et voici un autre exemple: http://raphaeljs.com/gear.html

    vous êtes de passage à un point rouge à droite, est-il possible de passer d'une image à travers ce chemin?
    Bien sûr, prendre un coup d'oeil à cet exemple: jsfiddle.net/ZPX78

    OriginalL'auteur José M. Gilgado

  2. 2

    Suffit d'utiliser la .animateAlong() méthode.

    Il prend 4 arguments:

    1. chemin - objet ou le chemin de la chaîne de l'élément ou de la chaîne de chemin le long de laquelle l'élément sera animé
    2. ms - nombre - La durée de l'animation, donné en millisecondes.
    3. tourner - boolean - [facultatif] si la valeur est true, l'élément sera tourné sur le chemin
    4. rappel - fonction - [facultatif]

    Essentiellement à partir de la documentation:

    window.onload = function() {
    var r = Raphael("canvas", 200, 200), 
        p = r.path("M10,50C10,100,90,0,90,50C90,100,10,0,10,50Z")
             .attr({stroke: "#ddd"}),
        e = r.ellipse(10, 50, 4, 4).attr({stroke: "none", fill: "#f00"});
    r.rect(0, 0, 200, 200).attr({stroke: "none", fill: "#000", opacity: 0})
     .click(function () {
         e.attr({rx: 5, ry: 3})
          .animateAlong(p, 4000, true, function () {        //Animate along path
              e.attr({rx: 4, ry: 4});
          });
     });
}​;

    Essayez avec cette jsFiddle (cliquez dessus pour l'activer)

    animateAnong méthode n'est pas disponible dans la nouvelle version de rapheljs

    OriginalL'auteur Peter Ajtai

  3. 2

    Il y a une solution sympa ici.

    J'ai copié le code ci-dessous:

    /*
You can copy and paste the below into your codebase somewhere.
As long as Raphael is a global object, it'll just work.
USAGE (same default values for optional parameters as Raphaël's "animate" method)
=====
element.animateAlong({
path: REQUIRED - Path data string or path element,
rotate: OPTIONAL - Boolean whether to rotate element with the direction it is moving
(this is a beta feature - currently kills existing transformations
and rotation may not be perfect),
duration: OPTIONAL - Number in milliseconds,
easing: OPTIONAL - String (see Raphaël's docs),
debug: OPTIONAL - Boolean, when set to true, paints the animating path, which is
helpful if it isn't already rendered to the screen
},
props - Object literal containing other properties to animate,
callback - Function where the "this" object refers to the element itself
);
EXAMPLE
=======
var rect = paper.rect(0,0,50,50);
rect.animateAlong({
path: "M0,0L100,100",
rotate: true,
duration: 5000,
easing: 'ease-out',
debug: true
},
{
transform: 's0.25',
opacity: 0
},
function() {
alert("Our opacity is now:" + this.attr('opacity'));
});
*/
Raphael.el.animateAlong = function(params, props, callback) {
var element = this,
paper = element.paper,
path = params.path,
rotate = params.rotate,
duration = params.duration,
easing = params.easing,
debug = params.debug,
isElem = typeof path !== 'string';
element.path = 
isElem
? path
: paper.path(path);
element.pathLen = element.path.getTotalLength();
element.rotateWith = rotate;
element.path.attr({
stroke: debug ? 'red' : isElem ? path.attr('stroke') : 'rgba(0,0,0,0)',
'stroke-width': debug ? 2 : isElem ? path.attr('stroke-width') : 0
});
paper.customAttributes.along = function(v) {
var point = this.path.getPointAtLength(v * this.pathLen),
attrs = {
x: point.x,
y: point.y 
};
this.rotateWith && (attrs.transform = 'r'+point.alpha);
//TODO: rotate along a path while also not messing
//      up existing transformations
return attrs;
};
if(props instanceof Function) {
callback = props;
props = null;
}
if(!props) {
props = {
along: 1
};
} else {
props.along = 1;    
}
var startAlong = element.attr('along') || 0;
element.attr({along: startAlong}).animate(props, duration, easing, function() {
!isElem && element.path.remove();
callback && callback.call(element);
});
};

    OriginalL'auteur Richard

  4. 1

    Il semble que vous ne pouvez pas le faire à l'aide de Raphaël animate() méthode (car il modifie les attributs de l'objet linéaire).

    Je voudrais vous proposons de mettre en œuvre une fonction que les changements de position de l'objet à chaque milliseconde ou alors en fonction de courbe de Bézier formule. Utilisation Raphaël translate() méthode et JavaScript minuteries.

    OriginalL'auteur aztek