Skip to main content
TikTok Effect House Platform Logo
Download
Log Masuk
Animation

Animation controller

Effect House supports skeletal animation. Skeletal animation is a widely used animation format in 3D animation production, enabling an animation to produce 3D models with a rig. You can add animation to your effect to make it look fun and dynamic.

Quick start

In this effect, we will show you how to import a rigged 3D model with skeletal animation, and set up the animation by manipulating the Animation component.

Download example package:

↓ Alien_assets.zip

Import animation assets into the scene

Import the 3D model with animation by clicking + Add Asset > Import > From Computer. Or simply just drag the file into the Assets panel.

Note
Note

Learn more about animation assets preparation in the 3D assets preparation guide.

Make sure to check “Import animation” of the pop up window when importing.

You can then see the model in the Assets panel. Drag and drop the model from the Assets panel to the Hierarchy panel and the editor will automatically construct the hierarchy with an Animation component attached to the root object.

Tip
Tip

The alien model has skeletal animation, which means it is rigged with multiple joints. You can find these joints inside the model.

Assign materials

Set up the materials for your model to make it look nice. For the alien materials’ setting, please go to Body Avatar Drive “Applying body and helmet material” for more details.

Set up animation

Click on the SkeletonAndRenderRoot object in the Hierarchy panel to open the Animation component in the Inspector panel.

There are three animation clips built-in to the alien model. You can choose which animation clip you want to play by selecting from the Playback drop-down menu of the Animation component.

Extended usage

↓ 3DAnimationController.zip

3D Animation Controller node

There is the 3D Animation Controller node you can find in Visual Scripting to help set interactions to control 3D animation states. Check out the 3D Animation Controller node article for more details.

In this example, it shows the alien animation set to disabled at the beginning of the effect. Then when the screen taps, the alien will play the second “Animaz0_idle” clip (index 1) with one time loop (loop time 1) . After it finished, it will trigger the third “Animaz1_walk” clip (index2) play infinitely (loop time -1).

Animation properties

Playback: the current chosen animation to be controlled with playback

Animation -> Clip: animation clip be assigned to the animation

Animation -> Play Mode

  • Loop: when you reach the end of the animation clip playback, it will begin again automatically
  • PingPong: when you reach the end of the animation clip playback, time will “ping pong” back and forth between the beginning and end of the clip
  • Clamp: when you reach the end of the animation clip playback, the last frame will repeat continually until playback is manually stopped
  • Once: when you reach the end of the animation clip playback, the clip will automatically stop playing

Related links

3D assets preparation

Materials introduction