当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 简述tweenjs的使用

简述tweenjs的使用

2018年09月13日  | 移动技术网IT编程  | 我要评论

安装

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网