CODEWITHSUNDEEP
animationpaperjs
user1706680
user1706680

Reputation: 1111

Animate point with paper.js

I’d like to rebuild this animation https://i.sstatic.net/qHl4Y.jpg in paper.js.

I already tried SVG animations (http://codepen.io/magglomag/pen/jrVwzy) but despite from the fact that they’ll be deprecated soon I was not able to move the two points asynchronously.

What I have so far is the shape and I know that I can animate with the onFrame event handler. But I have no clue how to say that the point should animate between the coordinates [43,168.7] and [43,35.3].

http://codepen.io/magglomag/pen/yaVXrr

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]
}

Upvotes: 2

Views: 676

Answers (1)

sasensi
sasensi

Reputation: 4650

The error you are making is that you are trying to bind an handler to segment.onFrame event.
But only item.onFrame and view.onFrame are available.
In PaperScript context, you can even use a global onframe named function as a convenient way to animate things.
Here is a simple example demonstrating how a path segment can be animated.

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

Upvotes: 1

Related Questions