1# Controlling and Managing ArkGraphics 3D Scene Animations 2<!--Kit: ArkGraphics 3D--> 3<!--Subsystem: Graphics--> 4<!--Owner: @zzhao0--> 5<!--SE: @zdustc--> 6<!--TSE: @zhangyue283--> 7 8Animations, an important resource type in a 3D scene, is used to control the motion of elements in the scene. For example, to simulate a scene where a person walks, it is difficult to calculate and set the rotation angle of every joint of the person in each frame. When making such an animation, the resource producer saves key frame data of the animation and the interpolator type between key frames in a model file. 9 10ArkGraphics 3D provides APIs for you to play and control animations to achieve the expected rendering effect in the scene. 11 12 13## Creating Animation Resources 14Animation resources are made and saved to model files by model resource producers when they make the model. ArkGraphics 3D provides the capability of extracting and playing animations from glTF model resources. 15```ts 16import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, 17 LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D'; 18 19function createAnimation() : void { 20 // Load scene resources, which supports .gltf and .glb formats. The path and file name can be customized based on the specific project resources. 21 let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); 22 scene.then(async (result: Scene) => { 23 if (result) { 24 // Obtain animation resources. 25 let anim: Animation = result.animations[0]; 26 } 27 }); 28} 29``` 30 31 32## Controlling the Animation Status 33ArkGraphics 3D provides the following APIs to control the animation status: 34- **start**: plays an animation based on the current progress. 35- **stop**: stops playing an animation and sets its progress to **0** (not started). 36- **finish**: finishes the playing of an animation and sets its progress of **1** (finished). 37- **pause**: pauses an animation. The animation remains in the current playing progress. 38- **restart**: plays an animation from the beginning. 39 40The sample code is as follows: 41```ts 42import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, 43 LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D'; 44 45function animationControl() : void { 46 // Load scene resources, which supports .gltf and .glb formats. The path and file name can be customized based on the specific project resources. 47 let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); 48 scene.then(async (result: Scene) => { 49 if (result) { 50 let anim: Animation = result.animations[0]; 51 // Control the animation status. 52 anim.start(); 53 anim.pause(); 54 anim.stop(); 55 anim.restart(); 56 anim.finish(); 57 } 58 }); 59} 60``` 61 62 63## Using Animation Callbacks 64An animation callback function is triggered when an animation enters a certain state. You can perform logic control based on the animation state. ArkGraphics 3D provides the following callback functions: 65- **onStarted()**: called when an animation starts to play. The start operation is triggered by calling **start** or **restart**. 66- **onFinished()**: called when an animation playback is complete or the **finish** API is called. 67 68The sample code is as follows: 69```ts 70import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters, 71 LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D'; 72 73function callBacks() : void { 74 // Load scene resources, which supports .gltf and .glb formats. The path and file name can be customized based on the specific project resources. 75 let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.glb")); 76 scene.then(async (result: Scene) => { 77 if (result) { 78 let anim: Animation = result.animations[0]; 79 // Register the callbacks. 80 anim.onFinished(()=>{ 81 console.info("onFinished"); 82 }); 83 anim.onStarted(()=>{ 84 console.info("onStarted"); 85 }); 86 } 87 }); 88} 89``` 90