Как остановить выполнение кода функции тика в кадре после выполнения условия?

Я использую функцию галочки в компоненте a-frame для анимации. Я делаю это, устанавливая флаг true / false, а затем увеличивая число, которое обновляет вершины. Ниже я создал упрощенную версию, которая иллюстрирует этот процесс. Хотелось бы понять, как лучше использовать функцию галочки.

Конкретно мой вопрос состоит из 2 частей.

  1. Как я могу остановить работу функции галочки после того, как моя функция в ней будет «завершена» (в данном случае, когда curr === to)?

  2. Как сбросить установленный мною флаг, чтобы он сработал в первую очередь, чтобы потом снова запустить его?

Ниже вы увидите, что у меня есть неоднородное решение, чтобы остановить его (я проверяю, что значение curr, которое я увеличиваю, не превышает значение && this.curr < 9), но это просто для того, чтобы остановить его бесконечную работу на экране / консоли.

Я попытался установить для атрибута 'change' значение false в конце функции, но снова кажется, что это происходит снова и снова, и кажется, что это повлияет на производительность, если что-то постоянно меняет атрибут? Может я ошибаюсь. Пожалуйста, посмотрите мой код ниже.

Компонент;

AFRAME.registerComponent('tickquery', {

    schema: {    
        change: {type: 'boolean', default: false},
    },

    init: function () { 
        this.curr = 0
        this.to = 10
        this.dur = 400
        this.parent = this.el
    },

    update: function () {

    },

    tick: function (t, td) {
        if ( this.data.change === true && this.curr < 9 ){
            if ( this.curr < this.to ) {
                var step = this.stepCalc(this.curr, this.to, this.dur, td)
                this.curr += step
                this.parent.setAttribute('value', this.curr)
                //console.log(this.curr)
            }        
        }
    },

    stepCalc: function (curr, to, dur, td) {
        var distance = Math.abs(curr - to)
        var speed = distance/dur
        var step = speed*td
        return step;
    },

});

HTML;

<a-scene test>
    <a-text 
        id="ticker" 
        tickquery 
        value="0"
        color="#333"
        position="0 0 -5">
    </a-text>
</a-scene>

И компонент, запускающий изменение;

AFRAME.registerComponent('test', {
  init: function () {
    setTimeout(function(){
          var ticker = document.getElementById('ticker');
          ticker.setAttribute('tickquery', {'change': true});
    }, 2000);           
  },      
});

И вот скрипка (подождите 2 секунды и увидите, что текст обновлен с галочкой)

Возможно, я неправильно подхожу к этому, поэтому, пожалуйста, сообщите, есть ли лучший способ справиться с этим. Если потребуется дополнительная информация, дайте мне знать. Спасибо.


javascript aframe webvr
person Nick    schedule 20.01.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Если вы хотите использовать флаг, вам нужно немного изменить свой код:

init: function() {
   this.animationRunning = true;
},
tick: function (t, td) {
  if(animationRunning) {
    if ( this.curr < 9 ) {
        if ( this.curr < this.to ) {
            var step = this.stepCalc(this.curr, this.to, this.dur, td)
            this.curr += step
            this.parent.setAttribute('value', this.curr)
            //console.log(this.curr)
        }        
    } else {
      this.animationRunning = false;
    }
  }
}

Итак, у меня есть флаг, он будет до тех пор, пока не будут выполнены условия, затем он станет ложным.

Теперь сбрасываем флаг. Это действительно зависит от того, где вы хотите проверить условия сброса. Если вы хотите что-то проверить в своем компоненте, вы также можете выполнить проверку в tick(), который сбросит флаг, если будут выполнены некоторые условия.

Если вы хотите сделать это извне компонента, вы можете добавить еще одну функцию в свой компонент.

restart: function() {
   this.curr = 0;
   this.animationRunning = true;
}

и назовите его: yourElementReference.components.tickquery.restart(). Проверьте это в этой скрипке.

Я не уверен в использовании механизмов обновления + схемы. Вы можете сбросить значения в функции update и установить атрибут change на противоположный, чтобы вызвать update, как я сделал здесь.

Тем не менее, это настолько простые операции, что они не должны влиять на производительность здесь.

person Piotr Adam Milewski    schedule 20.01.2018
comment
Еще раз большое спасибо, Петр - вы мне очень помогли с a-frame, надеюсь, что когда-нибудь смогу отплатить за услугу. Я вижу, как работают все ваши подходы - у меня все еще есть проблемы с моим, но это результат того, что моя функция stepCalc не производит круглые числа, поэтому я думаю, что мне нужно упростить числа, чтобы заставить его работать, как ваш пример. Еще раз спасибо. - person Nick; 21.01.2018

arrow_upward
1
arrow_downward

Вы можете переместить обнаружение изменений в функцию update. Это вызывается только при изменении свойства, поэтому оно будет вызываться один раз:

update: function (oldData) {
  if (this.data.change) {
    // ...
    this.parent.setAttribute('value', this.curr) 
  }
}
person ngokevin    schedule 20.01.2018
comment
Привет @ngokevin - спасибо за ответ. Простите меня, но мне интересно, не могли бы вы немного уточнить, вы предлагаете мне переместить весь свой код в обновление? Если я это сделаю, я получу только конечный результат, а промежуточные шаги не буду? Думаю, я не понимаю, что вы предлагаете - извинения! - person Nick; 21.01.2018