内置动画

import {
  AnimationType,
  MouseEventParams,
  ICraftPlayer,
  ICraftPlayerInstance,
} from "@icraft/player-react";
import React from "react";
 
const style = {
  width: "100%",
  height: "100%",
  position: "relative" as const,
  overflow: "hidden" as const,
};
 
export default () => {
  const playerRef = React.useRef<ICraftPlayerInstance>();
 
  const onClick = (e: MouseEventParams) => {
    const player = playerRef.current;
    const { instance: Element } = e;
    if (!Element) {
      player?.cancelAnimation();
      return;
    }
    // 根据元素类型选择合适的动画
    if (Element.typeName === "tube") {
      player?.playAnimationByElementKey(Element.key, {
        animationDuration: 4,
        animationType: AnimationType.TubeZebraFlow,
        colorPrimary: "#0066ff",
        speed: 2.0,
      });
    } else if (Element.typeName === "line") {
      player?.playAnimationByElementKey(Element.key, {
        animationDuration: 3,
        animationType: AnimationType.LoopFlow,
        flowLineColor: "#00ff88",
      });
    } else {
      player?.playAnimationByElementKey(Element.key, {
        animationDuration: 3,
        animationType: AnimationType.HeartBeat,
        animationShowTip: true,
      });
    }
  };
 
  return (
    <div style={style}>
      <ICraftPlayer
        src='/templates/AWSCloud.iplayer'
        onClick={onClick}
        ref={playerRef}
      />
    </div>
  );
};

interface CameraData {
  key: string; // 相机唯一标识
  type: string; // 相机类型
  position: number[]; // 相机位置坐标 [x, y, z]
  target: number[]; // 相机目标点坐标 [x, y, z]
  zoom: number; // 缩放级别
  quaternion?: number[]; // 相机旋转四元数 [x, y, z, w]
}
 
// 动画类型
export enum AnimationType {
  // 淡入
  FadeIn = "fadeIn",
  // 淡出
  FadeOut = "fadeOut",
  // 上下浮动
  UpAndDown = "upAndDown",
  // 心跳
  HeartBeat = "heartBeat",
  // 跳动
  Bounce = "bounce",
  // 旋转
  Rotate = "rotate",
  // 进入子场景
  EnterSubScene = "enterSubScene",
  // 退出子场景
  ExitSubScene = "exitSubScene",
  // 绘制动画
  Draw = "draw",
  // 流动动画
  Flow = "flow",
  // 相机关键点
  Camera = "camera",
  // 循环流动
  LoopFlow = "loopFlow",
  // 管道气体流动
  TubeGasFlow = "tubeGasFlow",
  // 管道斑马线流动
  TubeZebraFlow = "tubeZebraFlow",
  // 管道泡沫流动
  TubeFoamFlow = "tubeFoamFlow",
  // 管道箭头流动
  TubeArrowFlow = "tubeArrowFlow",
  // 管道能量流动
  TubeEnergyFlow = "tubeEnergyFlow",
  // 管道电子流动
  TubeElectronFlow = "tubeElectronFlow",
  // 管道光流动
  TubeLightFlow = "tubeLightFlow",
  // 呼吸线框
  BreathingWireframe = "breathingWireframe",
  // 流线线框
  FlowWireframe = "flowWireframe",
  // 脉冲圈
  PulseRing = "pulseRing",
}