1

raphael.js を初めて使用するので、惑星を軌道上で太陽の周りに移動させる方法についての説明を探しています。パスを作成し、その周りの円の動きをアニメーション化しようとして立ち往生しています。

正しい方向への指針をありがとう！

4

2 に答える 2

7

私の友人 @Kevin Nielsen は正しいです。「getPointAtLength」が必要です。ここには .animateAlong() 関数を追加する素敵な小さな Raphael 関数がありますが、円形オブジェクトで動作するには少し変更が必要です。私はそれをあなたの必需品にしました。

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

ここで、楕円の焦点の 1 つに地球を描き、その経路に沿って月を描きたいと考えています。近地点で開始します。

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

jsフィドル

于 2013-03-12T19:23:19.873 に答える
1

@クリスウィルソンの答えはお金に合っています。

私が必要とした 1 つの小さな変更は、アニメーションを無期限に繰り返すことでした。@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);

于 2013-08-04T20:27:38.717 に答える