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

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-简述tweenjs的使用

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

安装

执行 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()   } }

安装

执行 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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过