Using the Raphael.js I have made a circle and a path, all I wanted to do was make the ci开发者_Python百科rcle animate alone the path, as if the center of the circle went along the line.
http://jsfiddle.net/rEJNJ/3/
Can anyone offer some advice
window.onload = function () {
var paper = Raphael("canvas", 640, 480);
var c = paper.circle(90, 90, 40);
c.attr({fill: "blue"});
var p = paper.path("M150,380 C150,360 50,250 220,90").attr({stroke: "#ff0000"});
c.animateAlong(p, 4000, true);
};
The animation works if you create your circle with the same X/Y coordinates as the beginning of the path:
http://jsfiddle.net/rEJNJ/4/
window.onload = function () {
var paper = Raphael("canvas", 640, 480);
var c = paper.circle(150, 380, 40).attr({fill: "blue"});
var p = paper.path("M150,380 C150,360 50,250 220,90").attr({stroke: "#ff0000"});
c.animateAlong(p, 4000, true);
};
Take a look at this post for some insight as to why: SVG animation along path with Raphael
精彩评论