如何沿路径制作Raphael对象的动画？
对象可以是简单的，矩形或圆形。 但路径应该是一条贝塞尔曲线。 如果不是太麻烦，请提供javascript / Raphael代码。
如果在动画期间存在移动物体的拖尾效果，那将是很好的。
以防万一你试图用RaphaelJS 2（animateAlong不再存在），在这里你可以看到一个可能的解决方案： http ： //jsfiddle.net/gyeSf/17/ 。
这里是最初的讨论： https ： //groups.google.com/forum/#! searchin/ raphaeljs/ animatealong/ raphaeljs/ W9bA0SkArVY/ KnPRKi8uFrsJ
编辑：还有另一个例子： http ： //raphaeljs.com/gear.html
只需使用.animateAlong()方法即可。
它需要4个参数：
- path – 要为其设置动画元素的对象或字符串路径元素或路径字符串
- ms – number – 动画的持续时间，以毫秒为单位。
- rotate – boolean – [可选]如果为true，则元素将沿路径旋转
- 回调 – function – [可选]
基本上来自文档：
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}); }); }); };
用这个jsFiddle试试吧（点击激活）
这里有一个很好的解决方案。
我复制了以下代码：
/* 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); }); };
看来你不能使用Raphaёlanimate animate()方法（因为它线性地改变对象属性）。
我会建议你根据Bézier曲线公式实现一个每毫秒左右改变物体位置的function。 使用Raphaёltranslate translate()方法和JavaScript计时器。