tweenjs 与 gsap补间动画 插件类似，使用前先要安装依赖

安装依赖

pnpm i @tweenjs/tween.js

参数说明

start

方法接受一个参数 time。如果你使用它，那么补间不会立即开始，直到特定时刻，否则会尽快启动（即在下次调用 TWEEN.update）。

stop

停止一个从未开始或已经停止的补间没有任何效果。

update

更新方法

chain

当你顺序排列不同的补间时，在上一个补间结束的时候立即启动另外一个补间。我们称这为链式补间，这使用 chain 方法去做。因此，为了使 tweenB 在 tewwnA 启动：
tweenA.chain(tweenB)

或者，对于一个无限的链式，设置tweenA一旦tweenB完成就开始：
tweenA.chain(tweenB)
tweenB.chain(tweenA)

在其他情况下，您可能需要将多个补间链接到另一个补间，以使它们（链接的补间）同时开始动画：

tweenA.chain(tweenB,tweenC)
tweenA.chain(tweenB,tweenC)

和 gsap补间动画 的keyframes关键字动画类似。

repeat

重复次数

tween.repeat(10); // 循环10次
tween.repeat(Infinity); // 无限循环
补间的总次数将是重复参数加上一个初始补间。

演示效果

使用实例

<template>
  <div class="cardBody" ref="body">
    <div class="info" ref="info"></div>
  </div>
</template>

<script>
import TWEEN from '@tweenjs/tween.js'

export default {
  name: "title",
  data() {
    return {}
  },
  components: {},
  watch: {},
  mounted() {
    // 初始化 TweenJs 监听
    this.animate()
    // 加载完成后执行动画
    this.animatePeople()
  },
  methods: {
    animate() {
      requestAnimationFrame(this.animate)
      TWEEN.update() // 这里将是tweenJs动画能否运行的关键
    },
    animatePeople() {
      let boxFly = this.$refs.info
      let coords = {x: -30, y: 10}
      let tween1 = new TWEEN.Tween(coords).to({
        x: 0,
        y: 0
      }, 1000).easing(TWEEN.Easing.Linear.None)

      let tween2 = new TWEEN.Tween(coords).to({
        x: 100,
        y: 30
      }, 1000).easing(TWEEN.Easing.Linear.None)
      let update = () => {
        boxFly.style.setProperty('left', coords.x + '%')
        boxFly.style.setProperty('top', coords.y + '%')
      }
      tween1.onUpdate(update) // 更新动画
      tween2.onUpdate(update)
      tween1.chain(tween2) // 实现动画的往复运动
      tween2.chain(tween1)
      tween1.start() // 启动动画
    }
  },
}
</script>

<style lang="scss" scoped>
.cardBody {
  position: relative;
  width: 300px;
  overflow: hidden;
  margin: 0 auto;
  height: calc(100% - 10px);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  background: black;

  .info {
    width: 30px;
    height: 30px;
    background: red;
    position: absolute;
  }
}
</style>