Vue.js 和 Tween.js 示例确实会抛出错误

Question

我想使用 tween.js 为变化的数字（我从计算道具传递）设置动画

我完全按照这个例子中的描述做了：https://alligator.io/vuejs/tween-values-tweenjs/ （使用官方文档中的示例 (https://vuejs.org/v2/guide/transitioning-state.html#Animating-State-with-Watchers)

我添加的唯一代码是在我的组件 "AnimatedCounter"

开头 <script> 之后直接添加的这一行

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

但是我得到这个错误。

Uncaught TypeError: Cannot read property 'toFixed' of undefined
at TWEEN.Tween.eval [as _onUpdateCallback] (webpack-internal:///1222:58)
at TWEEN.Tween.update (webpack-internal:///1156:390)
at _Group.update (webpack-internal:///1156:66)
at animate (webpack-internal:///1222:51)

Answer 1

我会自己回答这个问题。我无法完全弄清楚，为什么 alligator.io 中的示例不起作用。但我用 vuejs.org

的原始示例解决了它

所以我使用了来自 https://github.com/greensock/GreenSock-JS like the example does and this works just finde. So I guess https://github.com/tweenjs/tween.js/ 的 TweenLite 不是正确的库。

Answer 2

吼！

这有点旧，但我用

修复了它

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

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

我不确定是否有通用的输入方式 _objects 但它适合我。

Answer 3

我运行遇到了与官方文档中的示例相同的问题。问题是 context/scope，我猜。

替换：

.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 完美配合。

Vue.js 和 Tween.js 示例确实会抛出错误

Vue.js with Tween.js example does throws error

vue.js

tween.js