自定义动画

"use client";
 
import { ICraftPlayer, ICraftPlayerInstance, TWEEN } from "@icraft/player-react";
import { useRef, useState } from "react";
 
export default () => {
  const [isPaused, setIsPaused] = useState<boolean>(false);
  const playerRef = useRef<ICraftPlayerInstance>();
  const tweenRef = useRef<TWEEN.Tween<any> | null>(null);
  const allAnimationsRef = useRef<TWEEN.Tween<any>[]>([]);
 
  const onReady = (player: ICraftPlayerInstance) => {
    playerRef.current = player;
    const car = player.getElementsByName("car")?.[0];
    if (car) {
      startSquarePathAnimation(car);
    } else {
    }
  };
 
  const startSquarePathAnimation = (car: any) => {
    const startPos = {
      x: car.position.x,
      y: car.position.y,
      z: car.position.z,
    };
    const startRot = car.rotation.y;
 
    const pathSegments = [
      {
        to: { x: startPos.x, y: startPos.y, z: startPos.z + 20 },
        rotation: startRot,
      },
      {
        to: { x: startPos.x + 20, y: startPos.y, z: startPos.z + 20 },
        rotation: startRot - Math.PI / 2,
      },
      {
        to: { x: startPos.x + 20, y: startPos.y, z: startPos.z },
        rotation: startRot - Math.PI,
      },
      {
        to: { x: startPos.x, y: startPos.y, z: startPos.z },
        rotation: startRot - (Math.PI * 3) / 2,
      },
    ];
 
    const animations: TWEEN.Tween<any>[] = [];
 
    pathSegments.forEach((segment, index) => {
      const moveTween = new TWEEN.Tween(car.position)
        .to(segment.to, 2000)
        .easing(TWEEN.Easing.Quadratic.InOut);
 
      const rotateTween = new TWEEN.Tween(car.rotation)
        .to({ y: segment.rotation }, 300)
        .easing(TWEEN.Easing.Quadratic.InOut);
 
      moveTween.onStart(() => {
        rotateTween.start();
      });
 
      animations.push(moveTween);
    });
 
    for (let i = 0; i < animations.length; i++) {
      const nextIndex = (i + 1) % animations.length;
      animations[i].chain(animations[nextIndex]);
    }
 
    allAnimationsRef.current = animations;
 
    animations[0].start();
    tweenRef.current = animations[0];
  };
 
  const togglePause = () => {
    if (isPaused) {
      allAnimationsRef.current.forEach((animation) => {
        if (animation.isPaused && animation.isPaused()) {
          animation.resume();
        }
      });
      setIsPaused(false);
    } else {
      allAnimationsRef.current.forEach((animation) => {
        if (animation.pause) {
          animation.pause();
        }
      });
      setIsPaused(true);
    }
  };
 
  return (
    <div style={style}>
      <ICraftPlayer
        src='/templates/tween.iplayer'
        onReady={onReady}
        ref={playerRef}
      />
      <div style={infoStyle}>
        <div style={{ display: "flex", gap: "10px", marginTop: "10px" }}>
          <button onClick={togglePause}>{isPaused ? "play" : "pause"}</button>
        </div>
      </div>
    </div>
  );
};
 
const style = {
  width: "100%",
  height: "100%",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
const infoStyle = {
  position: "absolute" as const,
  bottom: 10,
  right: 10,
  padding: "10px",
};
 

// 移动到目标位置
const moveTween = new TWEEN.Tween(element.position)
  .to({ x: 10, y: 5, z: 0 }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

// 绕 Y 轴旋转 360 度
const rotateTween = new TWEEN.Tween(element.rotation)
  .to({ y: element.rotation.y + Math.PI * 2 }, 2000)
  .easing(TWEEN.Easing.Cubic.InOut)
  .start();

// 缩放到 1.5 倍
const scaleTween = new TWEEN.Tween(element.scale)
  .to({ x: 1.5, y: 1.5, z: 1.5 }, 1000)
  .easing(TWEEN.Easing.Back.Out)
  .start();

// 同时执行多个动画
const moveTween = new TWEEN.Tween(element.position).to({ x: 5, y: 3, z: 2 }, 2000);
 
const rotateTween = new TWEEN.Tween(element.rotation).to({ y: Math.PI }, 2000);
 
const scaleTween = new TWEEN.Tween(element.scale).to({ x: 1.2, y: 1.2, z: 1.2 }, 2000);
 
// 同时开始
moveTween.start();
rotateTween.start();
scaleTween.start();

// 依次执行动画
const firstTween = new TWEEN.Tween(element.position).to({ x: 5 }, 1000);
 
const secondTween = new TWEEN.Tween(element.position).to({ y: 5 }, 1000);
 
const thirdTween = new TWEEN.Tween(element.position).to({ z: 5 }, 1000);
 
// 链接动画
firstTween.chain(secondTween);
secondTween.chain(thirdTween);
firstTween.start();