脚本宝典收集整理的这篇文章主要介绍了js实例教程-简述tweenjs的使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

 const TWEEN = require('@tweenjs/tween.js')  class Demo {     aniMATE () {         this.animate = this.animate.bind(this)         requestAnimationFrame(this.animate)         TWEEN.update()     }      inIT () {         const tween = new TWEEN.Tween({ number: 0 }).to({ number: 1000 }, 1000).easing(TWEEN.Easing.Linear.None).start()         tween.onUpdate((data: any) => {             console.LOG(data.number)         })         this.animate()     } }

 class Demo {   time = 0    animate () {       this.animate = this.animate.bind(this)       requestAnimationFrame(this.animate)       TWEEN.update(this.time)       this.time += 100   }    init () {       const tween = new TWEEN.Tween({ number: 0 }).to({ number: 1000 }, 1000).easing(TWEEN.Easing.Linear.None).start(this.time)       tween.onUpdate((data: any) => {           console.log(data.number)       })       this.animate()   } }

安装

执行 cnpm i -S @tweenjs/tween.js

简单DEMO

 const TWEEN = require('@tweenjs/tween.js')  class Demo {     animate () {         this.animate = this.animate.bind(this)         requestAnimationFrame(this.animate)         TWEEN.update()     }      init () {         const tween = new TWEEN.Tween({ number: 0 }).to({ number: 1000 }, 1000).easing(TWEEN.Easing.Linear.None).start()         tween.onUpdate((data: any) => {             console.log(data.number)         })         this.animate()     } }

注意事项

关于 TWEEN.update() 的参数

TWEEN.update() 可传入 time 参数，在自定义 time 参数时，需在调用 tween.start() 函数时，传入初始 time 值，否则，tween 在执行时，默认 startTime 的值是 start 函数执行时 TWEEN.now() 的返回值，从而导致当前 tween 的补间动画延迟执行，延迟执行的时间取决于当前 tween 对应的 startTime 的值和 TWEEN.update(time) 函数中 time 的增量值的幅度。示例代码如下：

 class Demo {   time = 0    animate () {       this.animate = this.animate.bind(this)       requestAnimationFrame(this.animate)       TWEEN.update(this.time)       this.time += 100   }    init () {       const tween = new TWEEN.Tween({ number: 0 }).to({ number: 1000 }, 1000).easing(TWEEN.Easing.Linear.None).start(this.time)       tween.onUpdate((data: any) => {           console.log(data.number)       })       this.animate()   } }

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-简述tweenjs的使用全部内容，希望文章能够帮你解决js实例教程-简述tweenjs的使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。