使用raphael.js進行軌道動畫制作？

Question

我是raphael.js的新手，我正在尋找有關如何做類似在行星繞太陽公轉的事情的解釋。 我一直在嘗試創建路徑並為圍繞它的圓的運動設置動畫。

感謝您指出正確的方向！

Answer 1

我的朋友@Kevin Nielsen是正確的，您需要“ getPointAtLength”。 這里有一個不錯的Raphael小函數，它添加了一個.animateAlong（）函數，盡管它需要進行一些修改才能在圓形對象上工作。 我將其剝離為您的必需品。

假設您認識到1609年以后的天文學，就需要橢圓軌道 。 （盡管實際上短半徑和長半徑的差異很小，這就是為什么哥白尼有點不合時宜的原因。）但是您不能使用.ellipse（）函數，因為您需要使用橢圓作為路徑為了沿它動畫。 請參閱橢圓弧的SVG規范，或嘗試一堆組合直到看起來正確為止，就像我做的那樣：

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);

現在，您要在橢圓的一個焦點處繪制地球，並沿路徑繪制月亮。 我們將從近地點開始。

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)); 
};

請注意，我已經刪除了easing和callback參數（因為我不需要它們），並添加了repetitions參數，該參數指定要執行的重復次數。

一個示例調用（開始不斷循環播放軌道動畫）是：

moon.animateAlong(orbit, 2000, Infinity);