Avoid Common SVGA Animation Pitfalls: A Practical Guide for Mobile Developers

Introduction

When creating live‑gift animations for a local version of a dating app, we encountered many difficulties with SVGA animation due to limited documentation. This guide collects the problems we faced and offers solutions to help designers avoid common pitfalls.

What Is SVGA?

SVGA is an open‑source, cross‑platform animation format developed by YY, compatible with iOS, Android, and Web. It stores 2D animation elements (bitmaps, vectors) extracted from Flash or After Effects, along with per‑frame transformations such as position, scale, rotation, and opacity, which are then rendered by a player.

Advantages of SVGA

SVGA uploads all image data to the GPU once before playback, reducing CPU‑GPU exchanges and keeping memory, CPU, and GPU usage optimal. A sequence‑frame animation of several megabytes can be reduced to a few hundred kilobytes while maintaining performance.

Common Issues and Solutions

1. Importing Sequence Frames

Directly importing a PNG sequence caused missing images and black screens. Use the proper import method instead of raw PNG sequences.

2. Automatic Frame Sorting

After importing, manually trimming and sorting frames is tedious. Leverage After Effects’ automatic sorting feature to arrange sequence frames quickly.

3. Export and Resource Optimization

Animating at 30 fps produces many image assets, inflating package size. Reduce resource size by compressing images, choosing appropriate canvas dimensions, and lowering frame rates when possible.

4. Frame Extraction (Keeping Consistent Frame Rate)

For a 40‑frame castle animation (3.8 MB after TinyPNG), we tested dropping every other frame, every two frames, etc., and chose to delete one frame out of two, halving the frame count and adjusting the frame rate from 30 fps to 15 fps to keep the animation duration unchanged.

5. Material Compression

Even after frame extraction, the file remained around 1.3 MB. Further compression (e.g., reducing image dimensions by 50 %) can cut file size by up to 60 % with minimal visual impact.

6. Using Element Composition for Complex Effects

For fireworks, extract a quarter of a symmetric pattern and mirror it to reduce memory usage. Adding different glows creates varied colors without extra assets.

7. Composition Size

Switching from a 750×1334 canvas to 680×1209 produced smaller files while fitting most devices.

8. Official Frame‑Rate Guidelines

SVGA converter forces the output frame rate to a divisor of 60 (e.g., 6, 10, 12, 15, 20, 30, 60). Recommended rates are 15 fps for most gifts, 30 fps for high‑frequency motion, which helps avoid stutter and large files.

9. Composition Depth

Pre‑compositions deeper than two layers caused missing files and black screens. Keep hierarchy shallow and use parent‑child relationships to manage assets.

10. Supported Effects

Bitmap animation and shape layer drawing are supported; complex effects are not recommended.

AE built‑in and third‑party plugin effects cannot be exported.

3D layers, motion blur, and time‑remapping are unsupported.

Blend modes and track masks are unavailable; only additive masks work.

Basic Transform (position, rotation, scale) keyframes are allowed.

Parent‑child relationships and expressions with actual numeric frame changes are usable.

Composition groups are allowed but avoid excessive layers or repeated keyframes.

Minimize empty transparent pixels to save memory.

Conclusion

Many tools exist for live‑gift animations, and some teams even develop proprietary solutions. As technology evolves, more open‑source tools like SVGA will become available, offering developers better options for creating efficient, high‑quality animations.

For the SVGA installation package and supported effect list, send a backend request with the keyword "SVGA".