Question

我想在paper.js。

我已经尝试过SVG动画（http://codepen.io/magglomag/pen/jrVwzy）但是尽管它们很快就会被弃用，但我无法异步移动这两个点。

到目前为止我所拥有的是形状，我知道我可以使用onFrame事件处理程序进行动画处理。但我不知道怎么说这个点应该在坐标[43,168.7]和[43,35.3]之间设置动画。

var firstSegment = new Segment({
    point: [109,3.7]
});

var secondSegment = new Segment({
    point: [43,168.7]
});

var thirdSegment = new Segment({
    point: [109,202.2]
});

var path = new Path({
    segments: [firstSegment, secondSegment, thirdSegment],
    fillColor: '#2dfd9a',
    closed: true
});

secondSegment.onFrame = function(event) {
  this.point = [43,35.3]
}

Answer 1

您所犯的错误是您试图将处理程序绑定到segment.onFrame事件。
但是只有item.onFrame和view.onFrame可用。
在PaperScript上下文中，您甚至可以使用全局的onframe命名函数作为动画设置的便捷方法。
这是一个简单的example，展示了如何对路径段进行动画处理。

// create a triangle
var triangle = new Path.RegularPolygon({
    center: view.center,
    sides: 3,
    radius: 50,
    fillColor: 'orange'
});

// store initial first point position
var initialPoint = triangle.firstSegment.point.clone();

// on frame
function onFrame(event) {
    // use sine function as a convenient way to demonstrate animation
    var newPoint = initialPoint + Math.sin(event.count * 0.05) * 30;
    // update first point
    triangle.firstSegment.point = newPoint;
}

用paper.js动画点

1 个答案: