1# Controlling and Managing ArkGraphics 3D Scene Animations
2Animations, 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. ArkGraphics 3D provides APIs for you to play and control animations to achieve the expected rendering effect in the scene.
3
4## Creating Animation Resources
5Animation 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.
6```ts
7import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
8  LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
9
10function createAnimation() : void {
11  let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.gltf"));
12  scene.then(async (result: Scene) => {
13    if (result) {
14      // Obtain animation resources.
15      let anim: Animation = result.animations[0];
16    }
17  });
18}
19```
20
21## Controlling the Animation Status
22ArkGraphics 3D provides the following APIs to control the animation status:
23- **start**: plays an animation based on the current progress.
24- **stop**: stops playing an animation and sets its progress to **0** (not started).
25- **finish**: finishes the playing of an animation and sets its progress of **1** (finished).
26- **pause**: pauses an animation. The animation remains in the current playing progress.
27- **restart**: plays an animation from the beginning.
28
29The sample code is as follows:
30```ts
31import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
32  LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
33
34function animationControl() : void {
35  let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.gltf"));
36  scene.then(async (result: Scene) => {
37    if (result) {
38      let anim: Animation = result.animations[0];
39      // Control the animation status.
40      anim.start();
41      anim.pause();
42      anim.stop();
43      anim.restart();
44      anim.finish();
45    }
46  });
47}
48```
49
50## Using Animation Callbacks
51
52An 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:
53- **onStarted()**: called when an animation starts to play. The start operation is triggered by calling **start** or **restart**.
54- **onFinished()**: called when an animation playback is complete or the **finish** API is called.
55
56The sample code is as follows:
57```ts
58import { Image, Shader, MaterialType, Material, ShaderMaterial, Animation, Environment, Container, SceneNodeParameters,
59  LightType, Light, Camera, SceneResourceParameters, SceneResourceFactory, Scene, Node } from '@kit.ArkGraphics3D';
60
61function callBacks() : void {
62  let scene: Promise<Scene> = Scene.load($rawfile("gltf/CubeWithFloor/glTF/AnimatedCube.gltf"));
63  scene.then(async (result: Scene) => {
64    if (result) {
65      let anim: Animation = result.animations[0];
66      // Register the callbacks.
67      anim.onFinished(()=>{
68        console.info("onFinished");
69      });
70      anim.onStarted(()=>{
71        console.info("onStarted");
72      });
73    }
74  });
75}
76```
77