如何为小动物输入/离开添加动画paperjs？

Question

我看到涉及移动的paperjs的所有示例都发生在onFrame内部，但是如何在鼠标事件上进行动画制作？

var circle1 = new Shape.Circle(new Point(80, 50), 30); 

circle1.strokeColor = 'green'; 
circle1.fillColor = 'green'; 

circle1.onMouseEnter = function (event) { 

    circle1.scale(1.2); 

} 

这个工作，但它不动画。

Answer 1

您可以使用setInterval（如下面的代码）制作动画。

var circle1 = new Shape.Circle(new Point(80, 50), 30); 
circle1.strokeColor = 'green'; 
circle1.fillColor = 'green'; 
circle1.onMouseEnter = function (event) { 
    var totalScale = 1 
    var id = setInterval(function(){ 
     var scale = 1.01 
     totalScale *= scale; 
     if(totalScale > 2){ 
      clearInterval(id) 
     } 
     circle1.scale(scale); 
    } , 50) 
} 

地址：[onFrame]版本，这是你想要的吗？

var circle1 = new Shape.Circle(new Point(80, 50), 30); 
circle1.strokeColor = 'green'; 
circle1.fillColor = 'green'; 
circle1.onMouseEnter = function (event) { 
    circle1.onFrame = function(){ 
     circle1.scale(1.01) 
    } 
} 
circle1.onMouseLeave = function (event) { 
    circle1.onFrame = null 
}