我该如何停止和开始 view.onFrame

Question

我对 paperjs 还很陌生。我的动画为此工作我使用以下 javascript:

view.onFrame = function () {
    drawYellowBlock();
}

函数 drawYellowBlock 绘制了一个黄色块，但是这个是动画的。动画完成后我想停止 view.onFrame 因为我觉得没有必要在什么都没有发生的情况下保持它运行。然后，当单击按钮时，我应该能够再次激活 onFrame。

这可能和必要吗？

所以我希望我的绘制函数是这样的：

var scale = 0;

function drawYellowBlock() {
    scale = scale + 0.1

    //animate block
    if(scale < = 1){
       //make block grow
    }
    else{
       //stop onFrame
    }

$('button').click(function(){
    scale = 0;
    //start onFrame and Animation
});

Answer 1

你可以这样做

function draw () {
   drawYellowBlock();
   view.onFrame = undefined
}
view.onFrame = draw

function onclickHandler(){ 
   view.onFrame = draw
}

完成后只需从 onFrame 处理程序中删除函数引用，并在单击按钮后追加该函数

Answer 2

您可以简单地设置一个在 onFrame 方法中使用的标志来检查您是否应该设置动画。
这是一个 sketch 演示解决方案。

// Draw the item with a small initial scale.
var item = new Path.Rectangle({
    from: view.center - 100,
    to: view.center + 100,
    fillColor: 'orange',
    applyMatrix: false
});
item.scaling = 0.1;

// Draw instructions.
new PointText({
    content: 'Press space to start animation',
    point: view.center + [0, -80],
    justification: 'center'
});

// Create a flag that we will use to know wether we should animate or not.
var animating = false;

// On space key pressed...
function onKeyDown(event) {
    if (event.key === 'space') {
        // ...start animation.
        animating = true;
    }
}

// On frame...
function onFrame() {
    // ...if animation has started...
    if (animating) {
        // ...scale up the item.
        item.scaling += 0.05;
        // When item is totally scaled up...
        if (item.scaling.x >= 1) {
            // ...stop animation.
            animating = false;
        }
    }
}

我该如何停止和开始 view.onFrame

How can I stop and start view.onFrame

paperjs