assign onFrame() animation function to play on mouseevent

Question

since I'm pretty new to Paper.js I really need some help with this one:

I am having a MouseEnter event on an path element:

pathArr[0].onMouseEnter = function(event) {
  console.log("test");
}

works fine so far. But what I want to do is obviously not just a simple console log, I want to start the animation function like:

pathArr[0].onMouseEnter = function(event) {
  function onFrame(event) {
    pathArr[1].segments[1].point += (throughPoint - pathArr[1].segments[1].point) / 10;
  }
}

but unfortunately nothing happens. How can I do it that the onFrame() function initialises after the onMouseEnter?

Thanks in advance.

Alex's answer provides a good way to handle your problem. But the reason your code doesn't work is because you declare onFrame within an anonymous function. You are not setting the global onFrame function, but a local onFrame function within the anonymous function's scope. — bmacnaughton, Nov 10 '15 at 03:53

score 3 · Accepted Answer · edited May 23 '17 at 11:51

The onFrame and onResize events are specific to the view object. If you're calling them from inside an onMouseEnter event handler of a path object, it may fire, but the event will still come from onMouseEnter. I recommend calling:

console.log(event);

instead of "test" to get a clearer picture of what is being returned.

Instead, you'll need to attach an event handler to your object that attaches another event handler to the view.

var path = new Path.Circle({
    center: view.center,
    radius: 25,
    fillColor: 'black'
});

var shiftPath = function onFrame(event) {
    console.log(event.count);
    path.position += new Point(.5,.5);
};

path.on('mouseenter', function(){view.on('frame', shiftPath)});
path.on('mouseleave', function(){view.off('frame', shiftPath)});

You can attach multiple event handlers to an object and/or the view in this way. Check out this answer for another example.

assign onFrame() animation function to play on mouseevent

1 Answers1