沿路径paper.js动画 [英] paper.js animation along a path

问题描述

我使用paper.js和我试图沿着我创建了一个路径...

I'm using paper.js and i'm trying to animate an item along a path I created...

//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（））我想圆走的一条路...
有谁知道该怎么做？
我没有发现它在文档或对谷歌....
我希望这是不够清楚。

And while animating (with onFrame()) I want the circle to follow the path... Does anyone know how to do that? I didn't found it in the doc or on google.... I hope it's clear enough..

感谢您的答案！

推荐答案

没有测试过，但它应该是这样的。

Didn't test it yet, but it should be something like this.

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

工作演示

这篇关于沿路径paper.js动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！