Vue.js和Tween.js示例确实引发错误

Question

我想使用tween.js动画一个变化的数字(这是我从计算机道具传递的)

我完成了这个示例中所描述的内容：https://alligator.io/vuejs/tween-values-tweenjs/ (它使用了官方文档(https://v2.vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers)中的示例)。

我添加的唯一代码是在我的组件“<script>”中开始的AnimatedCounter之后的直线。

var TWEEN = require('@tweenjs/tween.js');

但我明白这个错误。

未定义的TypeError:无法读取未定义的属性“toFixed” 在TWEEN.Tween.eval onUpdateCallback 在TWEEN.Tween.update (webpack-内部://1156:390) 在_Group.update (webpack-内部://1156:66) 在动画(webpack-内部://1222:51)

Answer 1

我会亲自回答的。我不知道为什么alligator.io的例子不起作用。但是我用vuejs.org的原始例子解决了这个问题

因此，我使用了来自https://github.com/greensock/GreenSock-JS的https://github.com/greensock/GreenSock-JS，就像这个例子所做的那样，这个方法就能找到结果。因此，我想https://github.com/tweenjs/tween.js/不是正确的库。

Answer 2

哈哈！

这个有点老了，但我用

我不得不替换this.tweeningValue = myTween.tweeningValue.toFixed(0)

与：this.tweeningValue = myTween._object.tweeningValue.toFixed(0)

我不确定是否有一种普通的方式进入_objects，但它对我有效。

Answer 3

我在官方文档中的例子中也遇到了同样的问题。问题在于上下文/范围，我想。

取代：

.onUpdate(() => {
  this.tweeningValue = myTween.tweeningValue.toFixed(0)
})

使用

.onUpdate((object) => {
  this.tweeningValue = object.tweeningValue.toFixed(0)
})

由于我使用了正式的示例，所以完整的tween方法现在如下所示：

tween: function (startValue, endValue) {
  var vm = this
  function animate () {
    if (TWEEN.update()) {
      requestAnimationFrame(animate)
    }
  }

  new TWEEN.Tween({ tweeningValue: startValue })
    .to({ tweeningValue: endValue }, 500)
    .onUpdate(function (object) {
      vm.tweeningValue = object.tweeningValue.toFixed(0)
    })
    .start()

  animate()
}

而且它在@tweenjs/tween.js上运行得很好。