3

paper.js を使用しており、作成したパスに沿ってアイテムをアニメーション化しようとしています...

//Path : 
 path = new Path();
 path.add(new Point(0,100), new Point(120,100), new Point(120,150));
//Item
 circle = new Path.Circle(0,100,4);
 circle.strokeColor = "#EEE";

そして、（onFrame（）で）アニメートしている間、円がパスをたどるようにしたい...誰もそれを行う方法を知っていますか？私はドキュメントやグーグルでそれを見つけられませんでした..それが十分に明確であることを願っています..

答えてくれてありがとう！

4

4 に答える 4

4

まだテストしていませんが、このようなものになるはずです。

// vars
var point1 = [0, 100];
var point2 = [120, 100];
var point3 = [120, 150];

// draw the line
var path = new Path();
path.add(new Point(point1), new Point(point2), new Point(point3));
path.closed = true;

// draw the circle
var circle = new Path.Circle(0,100,4);
circle.strokeColor = "#EEE";

// target to move to
var target = point2;

// how many frame does it take to reach a target
var steps = 200;

// defined vars for onFrame
var dX       = 0;
var dY       = 0;

// position circle on path
circle.position.x = target[0];
circle.position.y = target[1];

function onFrame(event) {

    //check if cricle reached its target
    if (Math.round(circle.position.x) == target[0] && Math.round(circle.position.y) == target[1]) {
        switch(target) {
            case point1:
                target = point2;
                break;
            case point2:
                target = point3;
                break;
            case point3:
                target = point1;
                break;
        }

        // calculate the dX and dY
        dX = (target[0] - circle.position.x)/steps;
        dY = (target[1] - circle.position.y)/steps;

    }

    // do the movement
    circle.position.x += dX;
    circle.position.y += dY;
}

ワーキングデモ

于 2012-09-06T08:22:12.930 に答える
4

速度をより制御するための解決策:

  • 動きは時間に比例する
  • ピクセル/秒で速度を設定できます

http://jsbin.com/cukine/28/edit?html、出力

var offset = 0;

circle.onFrame = function (event) {
  if (offset< path.length){
    circle.position =path.getPointAt(offset);
    offset+=event.delta*150; // speed - 150px/second
  }
  else {
    offset=0;
  }
}
于 2014-06-06T14:29:08.977 に答える
2

簡単な解決策は次のとおりです。メソッドを Point に追加したgetPointAtPercentので、パスでそれを実行して、ポイントがあるべき場所を取得できます。

paper.Path.prototype.getPointAtPercent = function (percent) {
    return this.getLocationAt(percent * this.length).getPoint();
};

これが機能する例を次に示します

http://jsfiddle.net/icodeforlove/uqhr8txp/1/

于 2015-12-06T17:09:04.727 に答える
0

次のものを使用する必要があります。

path.getLocationAt();

方法。このメソッドは、0から1までの1つのパラメーターを受け入れます。ここで、0はパスの開始を表し、1はパスの終了を表し、場所を返します。

次のものを使用できます。

path.length

パラメータのさまざまなオフセットを計算するプロパティ

steps = lengthOfSegmentToWalk / path.length
t = 0;
while( t <= 1  ){
    location = path.getLocationAt( t );
    t += step;
}

幸運を

編集：：

またはあなたは使用することができます

path.flatten( maxDistance );

メソッドを実行し、結果のパスからすべてのポイントを読み取ります。

于 2012-09-06T07:52:43.060 に答える