与raphael.js轨道动画？

Question

raphael.js的新手，我正在寻找关于如何在轨道上围绕太阳移动行星等方面的解释。我被困在试图创建一个路径并为其周围的圆圈运动设置动画效果。

感谢任何指向正确方向的指针！

Answer 1

我的朋友@Kevin Nielsen是对的，你会想要“getPointAtLength”。有一个很好的Raphael函数here，它增加了一个.animateAlong（）函数，虽然它需要一些修改来处理循环对象。我把它剥给你的必需品。

假设你认识1609后的天文学，you'll want elliptical orbits。 （虽然现实中短半径和长半径的差别很小，这就是为什么哥白尼有点离谱）。但是你不能使用.ellipse（）函数，因为你需要椭圆作为一个路径为了动画沿着它。请参阅SVG规范的elliptical arc，或只是尝试了一堆的组合，直到它看起来正确的，像我一样：

var paper = Raphael("canvas", 500, 500); 

var center = {x: 200, y: 100 }; 
var a = 100; 
var b = 80; 

//see http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands 
var ellipse = "M" + (center.x - a) + "," + center.y + " a " + a + "," + b + " 0 1,1 0,0.1"; 

var orbit = paper.path(ellipse); 

现在你想在椭圆的焦点之一绘制地球，月亮沿着路径。我们将从perigee开始。

var focus = Math.pow(a*a - b*b, 0.5); 

var palebluedot = paper.circle(center.x - focus, center.y, 25) 
    .attr({ 
     stroke: 0, 
     fill: "blue"  
    }); 

var moon = paper.circle(center.x - a, center.y, 10) 
.attr({ 
    stroke: 0, 
    fill: "#CCC" 
}); 

下面是修改后的 “animateAlong” 功能：

//Adapted from https://github.com/brianblakely/raphael-animate-along/blob/master/raphael-animate-along.js 
Raphael.el.animateAlong = function(path, duration, easing, callback) { 
    var element = this; 
    element.path = path; 
    element.pathLen = element.path.getTotalLength();  
    duration = (typeof duration === "undefined") ? 5000 : duration; 
    easing = (typeof easing === "undefined") ? "linear" : duration; 

    //create an "along" function to take a variable from zero to 1 and return coordinates. Note we're using cx and cy specifically for a circle  
paper.customAttributes.along = function(v) { 
     var point = this.path.getPointAtLength(v * this.pathLen), 
      attrs = { 
       cx: point.x, 
       cy: point.y 
      }; 
     this.rotateWith && (attrs.transform = 'r'+point.alpha); 
     return attrs; 
    };  

    element.attr({along: 0 }).animate({along: 1}, duration, easing, function() { 
     callback && callback.call(element); 
    });  
}; 

在这里它是：

moon.animateAlong(orbit, 2000); 

jsFiddle

Answer 2

@克里斯·威尔逊的答案是正确的金钱。

我需要的一个细微修改是无限期重复动画。 @boom不要求它专门，但我能想象这可能是轨道动画一个共同的要求，这里是我的修改Chris的版本的.animateAlong()：

Raphael.el.animateAlong = function(path, duration, repetitions) { 
    var element = this; 
    element.path = path; 
    element.pathLen = element.path.getTotalLength();  
    duration = (typeof duration === "undefined") ? 5000 : duration; 
    repetitions = (typeof repetitions === "undefined") ? 1 : repetitions; 

    paper.customAttributes.along = function(v) { 
    var point = this.path.getPointAtLength(v * this.pathLen), 
     attrs = { cx: point.x, cy: point.y }; 
    this.rotateWith && (attrs.transform = 'r'+point.alpha); 
    return attrs; 
    };  

    element.attr({along:0}); 
    var anim = Raphael.animation({along: 1}, duration); 
    element.animate(anim.repeat(repetitions)); 
}; 

请注意，我已经放弃了宽松和回调参数（因为我不需要它们）并添加了repetitions参数，该参数指定要执行的重复次数。

的示例性呼叫（在开始不断地循环轨道动画）是：

moon.animateAlong(orbit, 2000, Infinity);