内置动画

我们内置了一些动画类型，可以通过调用 player 实例的方法playAnimationByElementKey来执行元素动画。每种动画类型都有其适用的元素类型和专有参数配置。

如何使用

拿到 player 实例后，调用playAnimationByElementKey方法，传入元素的key和动画参数，即可执行动画。通过cancelAnimation方法可以取消当前正在播放的动画。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>ICraft Player Animation Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #container {
        width: 100%;
        height: 100vh;
        position: relative;
      }
    </style>
    <script src="https://unpkg.com/@icraft/player@latest/dist/umd/icraft-player.min.js"></script>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    const player = new ICraftPlayer({
      src: "https://icraft.gantcloud.com/api/static/templates/AWSCloud.iplayer",
      container: document.getElementById("container"),
      onReady: (player) => {
        const user = player.getElementsByName("User")?.[0];
        if (user) {
          player.playAnimationByElementKey(user.key, {
            animationDuration: 100,
            animationType: ICraftPlayer.AnimationType.Rotate,
          });
        }
      },
      onClick: (e) => {
        const { instance: Element } = e;
        if (!Element) {
          player?.cancelAnimation();
          return;
        }
        if (Element.typeName !== "line") {
          player?.playAnimationByElementKey(Element.key, {
            animationDuration: 3,
            animationType: ICraftPlayer.AnimationType.HeartBeat,
            animationShowTip: true,
          });
        } else {
          player?.playAnimationByElementKey(Element.key, {
            animationDuration: 3,
            animationType: ICraftPlayer.AnimationType.LoopFlow,
          });
        }
      },
    });
  </script>
</html>

API

Functions

Name	description	type
getElementsByName	通过名称获取多个元素	(name: string) => Element3D[]
playAnimationByElementKey	使元素执行内置动画	(elementKey: string,animationOptions: GlobalAnimationOptions) => void
cancelAnimation	取消所有动画	() => void

通用元素动画

适用于 cube、cylinder、sphere、prism、cone、torus、model、imagemodel、custommodel、icon、image、text、text3d、svg 等通用元素类型。

FadeIn - 淡入

Name	description	type	default	required
animationType	动画类型	AnimationType	"fadeIn"	true
animationDuration	动画时长(秒)	number	2	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false

FadeOut - 淡出

Name	description	type	default	required
animationType	动画类型	AnimationType	"fadeOut"	true
animationDuration	动画时长(秒)	number	2	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false

UpAndDown - 上下浮动

Name	description	type	default	required
animationType	动画类型	AnimationType	"upAndDown"	true
animationDuration	动画时长(秒)	number	3	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false

HeartBeat - 心跳

Name	description	type	default	required
animationType	动画类型	AnimationType	"heartBeat"	true
animationDuration	动画时长(秒)	number	2	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false

Bounce - 跳动

Name	description	type	default	required
animationType	动画类型	AnimationType	"bounce"	true
animationDuration	动画时长(秒)	number	2	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false

Rotate - 旋转

Name	description	type	default	required
animationType	动画类型	AnimationType	"rotate"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false

EnterSubScene - 进入子场景

Name	description	type	default	required
animationType	动画类型	AnimationType	"enterSubScene"	true
animationDuration	动画时长(秒)	number	1	true
animationDelay	动画延迟(秒)	number	0	false

ExitSubScene - 退出子场景

Name	description	type	default	required
animationType	动画类型	AnimationType	"exitSubScene"	true
animationDuration	动画时长(秒)	number	1	true
animationDelay	动画延迟(秒)	number	0	false

BreathingWireframe - 呼吸线框

Name	description	type	default	required
animationType	动画类型	AnimationType	"breathingWireframe"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false
speed	速度	number	2.0	false
colorPrimary	颜色	string	#ffee00	false
breathingFrequency	呼吸频率	number	2	false
width	线宽	number	0.05	false

FlowWireframe - 流线线框

Name	description	type	default	required
animationType	动画类型	AnimationType	"flowWireframe"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false
speed	速度	number	2.0	false
colorPrimary	颜色	string	#ffee00	false
width	线宽	number	0.05	false

PulseRing - 脉冲圈

Name	description	type	default	required
animationType	动画类型	AnimationType	"pulseRing"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	true	false
colorPrimary	颜色	string	#00ffff	false
pulseFrequency	脉冲发射频率(秒)	number	0.3	false
maxRadius	最大扩散半径	number	10.0	false

线条元素动画

适用于 line 线条元素类型。

Draw - 绘制动画

Name	description	type	default	required
animationType	动画类型	AnimationType	"draw"	true
animationDuration	动画时长(秒)	number	3	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	false	false
tipContent	演说文字	string	''	false
tipBackground	演说文字背景色	string	#ffffff	false
tipHeight	演说文字高度	number	1.4	false

Flow - 流动动画

Name	description	type	default	required
animationType	动画类型	AnimationType	"flow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
animationShowTip	动态显示 tip	boolean	false	false
tipContent	演说文字	string	''	false
tipBackground	演说文字背景色	string	#ffffff	false
tipHeight	演说文字高度	number	1.4	false
flowLineColor	流线颜色	string	#18A1FF	false
flowLineThinness	流线细度系数,控制中间部分的收缩程度	number	0.5	false
flowLineSize	流线长度系数,控制整体长度	number	0.3	false

LoopFlow - 循环流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"loopFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
flowLineColor	流线颜色	string	#18A1FF	false
flowLineThinness	流线细度系数,控制中间部分的收缩程度	number	0.5	false
flowLineSize	流线长度系数,控制整体长度	number	0.3	false

管道元素动画

适用于 tube 管道元素类型。

TubeGasFlow - 管道气体流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeGasFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	2.0	false
colorPrimary	基础颜色	string	#00227e	false
colorSecondary	次要颜色	string	#0243f4	false

TubeZebraFlow - 管道斑马线流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeZebraFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	1	false
colorPrimary	基础颜色	string	#0066ff	false
colorSecondary	次要颜色	string	#ffffff	false
stripeWidth	条纹长度	number	1	false

TubeFoamFlow - 管道泡沫流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeFoamFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	0.1	false
foamDensity	泡沫密度	number	30	false
colorPrimary	基础颜色	string	#0243f4	false
colorSecondary	次要颜色	string	#85a5ff	false
pulseIntensity	波动强度	number	0.1	false

TubeArrowFlow - 管道箭头流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeArrowFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	1.5	false
arrowSize	箭头大小	number	0.25	false
arrowCount	箭头数量	number	8	false
colorPrimary	箭头颜色	string	#246af7	false

TubeEnergyFlow - 管道能量流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeEnergyFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	3.0	false
colorPrimary	基础颜色	string	#0044ff	false
colorSecondary	次要颜色	string	#0088ff	false

TubeElectronFlow - 管道电子流动

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeElectronFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	2.0	false
colorPrimary	基础颜色	string	#000000	false
electronDensity	电子流密度	number	16	false

TubeLightFlow - 管道光流动画

Name	description	type	default	required
animationType	动画类型	AnimationType	"tubeLightFlow"	true
animationDuration	动画时长(秒)	number	4	true
animationDelay	动画延迟(秒)	number	0	false
speed	流动速度	number	2.0	false
colorPrimary	基础颜色	string	#0243f4	false
colorSecondary	次要颜色	string	#cbdcff	false

相机动画

特殊的相机控制动画。

Camera - 相机动画

Name	description	type	default	required
animationType	动画类型	AnimationType	"camera"	true
animationDuration	动画时长(秒)	number	2	true
animationDelay	动画延迟(秒)	number	0	false
cameraData	相机位置	CameraData	undefined	true