Mastering Emoji Animation: 12 Principles to Boost User Engagement

Introduction

The NetEase Mail team created a set of WeChat emojis based on the "Yi Miao" character, adding dynamic effects to make the emojis more expressive and engaging in everyday communication.

Dynamic Yi Miao Emoji Overview

Below is a showcase of the animated Yi Miao emojis.

Part 1: Key to Enhancing Motion – The 12 Animation Principles

1. Squash and Stretch

Using squash and stretch emphasizes physical changes, giving objects a sense of weight and elasticity. For example, when an object lands, it stretches and compresses to create a bouncy effect.

Hand squeezing the face creates scaling changes to convey compression.

2. Ease In and Ease Out

Most real‑world objects start moving slowly, accelerate, then decelerate. Applying this principle avoids mechanical, uniform motion and makes animations feel natural.

3. Anticipation

Showing a preparatory motion before the main action helps users predict what will happen, making the sequence more lively and logical.

A reverse‑direction wind‑up before the main movement, followed by a slight rebound due to inertia.

4. Secondary Action

Secondary actions highlight the primary motion, adding detail and preventing stiffness. For instance, a hand rubs before a facial blush appears, making the transition reasonable.

5. Follow‑Through and Overlapping Action

Parts of a body continue moving after the main action, and different objects can overlap in motion, adding realism and interest.

When a hand swings a glow stick, facial features follow upward.

Eyes rotate 360° while the head shakes.

Nostrils adjust size and position in sync with neighboring nostrils.

6. Arcs

Most motions follow curved trajectories rather than straight lines, giving movement a more natural and flexible feel.

A ghost flies in and out along an arc.

7. Staging (Composition)

Effective composition uses position, size, and lighting to guide visual focus, ensuring the main subject is clear and the message is conveyed.

8. Key Pose and In‑betweens

Key poses define crucial moments, while in‑betweens fill the gaps. Combining both frame‑by‑frame and keyframe animation yields the best results.

9. Exaggeration

Adding exaggerated elements prevents animations from feeling dull or overly realistic, capturing user attention.

10. Timing

Timing controls the speed of actions; appropriate speed conveys appropriate emotion, while extreme speeds feel unnatural.

11. Solid Drawing (3‑D Modeling)

Even in 2‑D animation, depicting volume, weight, and shading creates a more vivid, three‑dimensional appearance.

12. Appeal

Appeal is the culmination of all principles—animations must be attractive, varied, and lively to leave a lasting impression on users.

Conclusion

Static Yi Miao emojis lacked emotional depth and had low usage. Adding dynamic effects enhances emotional expression, makes the emojis more lively, and encourages higher user engagement, while also prompting the team to keep up with evolving user scenarios and trends.