Tween.min.js动画的使用

109 阅读1分钟

1.引入:

import TWEEN from "@/common/js/libs/Tween.min.js";

2.使用:

function boxMove() {
  let obj = { x: 0, y: 0, z: 0 };
  let tween = new TWEEN.Tween(obj)
    .to(
      {
        x: 100,
        y: 0,
        z: 0,
      },
      4000
    )
    .repeat(Infinity) //次数,无限次是Infinity
    .yoyo(true) //往返运动
    .delay(1000)
    .easing(TWEEN.Easing.Linear.None)
    .onUpdate(() => {
      mesh.position.set(obj.x, obj.y, obj.z);
    })
    .onComplete(() => {
      console.log("动画完成");
    })
    .onStart(() => {
      console.log("动画开始");
    })
    .start(); //tween动画开始执行
}