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
}

如何在onMouseEnter / Leave上动画paperjs？

1 个答案: