Built-in Animations

We have built-in animation types that can be executed on elements by calling the player instance method playAnimationByElementKey. Each animation type has its applicable element types and specific parameter configurations.

How to Use

After obtaining the player instance through ref or onReady, call the playAnimationByElementKey method with the element's key and animation parameters to execute animations. Use the cancelAnimation method to cancel currently playing animations.

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;
    }
    // Choose appropriate animation based on element type
    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>
  );
};

API

Functions

Name	description	type
getElementsByName	Get multiple elements by name	(name: string) => Element3D[]
playAnimationByElementKey	Execute built-in animation	(elementKey: string,animationOptions: GlobalAnimationOptions) => void
cancelAnimation	Cancel all animations	() => void

General Element Animations

Applicable to general element types such as cube, cylinder, sphere, prism, cone, torus, model, imagemodel, custommodel, icon, image, text, text3d, svg, etc.

FadeIn

Name	description	type	default	required
animationType	Animation Type	AnimationType	"fadeIn"	true
animationDuration	Duration (seconds)	number	2	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false

FadeOut

Name	description	type	default	required
animationType	Animation Type	AnimationType	"fadeOut"	true
animationDuration	Duration (seconds)	number	2	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false

UpAndDown

Name	description	type	default	required
animationType	Animation Type	AnimationType	"upAndDown"	true
animationDuration	Duration (seconds)	number	3	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false

HeartBeat

Name	description	type	default	required
animationType	Animation Type	AnimationType	"heartBeat"	true
animationDuration	Duration (seconds)	number	2	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false

Bounce

Name	description	type	default	required
animationType	Animation Type	AnimationType	"bounce"	true
animationDuration	Duration (seconds)	number	2	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false

Rotate

Name	description	type	default	required
animationType	Animation Type	AnimationType	"rotate"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false

EnterSubScene

Name	description	type	default	required
animationType	Animation Type	AnimationType	"enterSubScene"	true
animationDuration	Duration (seconds)	number	1	true
animationDelay	Delay (seconds)	number	0	false

ExitSubScene

Name	description	type	default	required
animationType	Animation Type	AnimationType	"exitSubScene"	true
animationDuration	Duration (seconds)	number	1	true
animationDelay	Delay (seconds)	number	0	false

BreathingWireframe

Name	description	type	default	required
animationType	Animation Type	AnimationType	"breathingWireframe"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false
speed	Speed	number	2.0	false
colorPrimary	Color	string	#ffee00	false
breathingFrequency	Breathing Frequency	number	2	false
width	Line Width	number	0.05	false

FlowWireframe

Name	description	type	default	required
animationType	Animation Type	AnimationType	"flowWireframe"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false
speed	Speed	number	2.0	false
colorPrimary	Color	string	#ffee00	false
width	Line Width	number	0.05	false

PulseRing

Name	description	type	default	required
animationType	Animation Type	AnimationType	"pulseRing"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	true	false
colorPrimary	Color	string	#00ffff	false
pulseFrequency	Pulse Frequency (seconds)	number	0.3	false
maxRadius	Max Spread Radius	number	10.0	false

Line Element Animations

Applicable to line line element type.

Draw

Name	description	type	default	required
animationType	Animation Type	AnimationType	"draw"	true
animationDuration	Duration (seconds)	number	3	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	false	false
tipContent	Tip Content	string	''	false
tipBackground	Tip Background Color	string	#ffffff	false
tipHeight	Tip Height	number	1.4	false

Flow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"flow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
animationShowTip	Show Dynamic Tip	boolean	false	false
tipContent	Tip Content	string	''	false
tipBackground	Tip Background Color	string	#ffffff	false
tipHeight	Tip Height	number	1.4	false
flowLineColor	Flow Line Color	string	#18A1FF	false
flowLineThinness	Flow Line Thinness, controls middle contraction	number	0.5	false
flowLineSize	Flow Line Length, controls overall length	number	0.3	false

LoopFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"loopFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
flowLineColor	Flow Line Color	string	#18A1FF	false
flowLineThinness	Flow Line Thinness, controls middle contraction	number	0.5	false
flowLineSize	Flow Line Length, controls overall length	number	0.3	false

Tube Element Animations

Applicable to tube tube element type.

TubeGasFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeGasFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	2.0	false
colorPrimary	Primary Color	string	#00227e	false
colorSecondary	Secondary Color	string	#0243f4	false

TubeZebraFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeZebraFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	1	false
colorPrimary	Primary Color	string	#0066ff	false
colorSecondary	Secondary Color	string	#ffffff	false
stripeWidth	Stripe Length	number	1	false

TubeFoamFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeFoamFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	0.1	false
foamDensity	Foam Density	number	30	false
colorPrimary	Primary Color	string	#0243f4	false
colorSecondary	Secondary Color	string	#85a5ff	false
pulseIntensity	Pulse Intensity	number	0.1	false

TubeArrowFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeArrowFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	1.5	false
arrowSize	Arrow Size	number	0.25	false
arrowCount	Arrow Count	number	8	false
colorPrimary	Arrow Color	string	#246af7	false

TubeEnergyFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeEnergyFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	3.0	false
colorPrimary	Primary Color	string	#0044ff	false
colorSecondary	Secondary Color	string	#0088ff	false

TubeElectronFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeElectronFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	2.0	false
colorPrimary	Primary Color	string	#000000	false
electronDensity	Electron Density	number	16	false

TubeLightFlow

Name	description	type	default	required
animationType	Animation Type	AnimationType	"tubeLightFlow"	true
animationDuration	Duration (seconds)	number	4	true
animationDelay	Delay (seconds)	number	0	false
speed	Flow Speed	number	2.0	false
colorPrimary	Primary Color	string	#0243f4	false
colorSecondary	Secondary Color	string	#cbdcff	false

Camera Animations

Special camera control animations.

Camera

Name	description	type	default	required
animationType	Animation Type	AnimationType	"camera"	true
animationDuration	Duration (seconds)	number	2	true
animationDelay	Delay (seconds)	number	0	false
cameraData	Camera Position	CameraData	undefined	true

interface CameraData {
  key: string; // Unique camera identifier
  type: string; // Camera type
  position: number[]; // Camera position coordinates [x, y, z]
  target: number[]; // Camera target coordinates [x, y, z]
  zoom: number; // Zoom level
  quaternion?: number[]; // Camera rotation quaternion [x, y, z, w]
}

ContextMenu custom