Как я могу остановиться и начать просмотр. OnFrame - PullRequest
Новая
       12

Как я могу остановиться и начать просмотр. OnFrame

1 голос
/ 26 марта 2019

Я довольно новичок в 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 ]

2 голосов
/ 26 марта 2019

Вы можете просто установить флаг, используемый в методе 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;
        }
    }
}
0 голосов
/ 26 марта 2019

Вы можете сделать что-то вроде этого 

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

function onclickHandler(){ 
   view.onFrame = draw
}

, просто удалив ссылку на функцию из обработчика onFrame, как только она будет завершена, и добавьте функцию обратно после нажатия кнопки

...