如何爲小動物輸入/離開添加動畫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 
}