如何停止和启动view.onFrame

时间:2019-03-26 10:39:22

标签: paperjs

我对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
});

2 个答案:

答案 0 :(得分: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;
        }
    }
}

答案 1 :(得分:0)

您可以这样做

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

function onclickHandler(){ 
   view.onFrame = draw
}

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