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

您可以简单地设置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;
        }
    }
}

Answer 2

您可以这样做

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

function onclickHandler(){ 
   view.onFrame = draw
}

一旦完成，只需从onFrame处理程序中删除函数引用，并在单击按钮后将其附加回去即可。

如何停止和启动view.onFrame

2 个答案: