Question

我在a-frame组件中使用tick函数来制作动画。我这样做是通过设置一个真/假标志，然后递增一个更新顶点的数字。我在下面创建了一个简化版本来说明这个过程。我想了解如何更好地使用tick功能。

具体来说，我的问题分为两部分。

一旦我的函数“完成”（在这种情况下当curr === to）时，如何停止勾选函数的运行？
如何重置我设置的标志，以便在第一时间触发它，以便稍后重新触发它？

你会在下面看到我有一个不完整的解决方案来阻止它（我检查我正在递增的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);           
  },      
});

和here is a fiddle（等待2秒，然后看到带有勾号的文本更新）

我可能会以错误的方式接近这一点，所以请告知是否有更好的方法来解决这个问题。如需更多信息，请告诉我。谢谢。

Answer 1

如果你想使用一个标志，那么你必须改变你的代码：

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()。请查看in this fiddle。

我不确定使用更新+架构机制。您可以重置update函数中的值，并将change attrubute设置为相反的方式，就像我here一样调用update。

这些操作仍然非常简单，但这对性能没有任何影响。

Answer 2

您可以将更改检测移至sum(len(x) for x in turning_points(X))功能。只有在属性发生变化时才会调用它，因此它将被调用一次：

update

一旦满足条件，如何停止在框架中执行代码的滴答功能？

2 个答案: