时间戳

首页 > 解决方案 > 如何停止和启动 view.onFrame

paperjs - 如何停止和启动 view.onFrame

问题描述

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

标签： paperjs

解决方案

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

// 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;
        }
    }
}

推荐阅读