onMouseEnter/Leaveでペーパーをアニメーション化するにはどうすればよいですか？

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 
}