Optimise Gift Animations for Android, iOS and Flutter Apps

A gift can look smooth on a quiet desktop and still interrupt a busy mobile room. Test it alongside the video, audio, chat and UI work that your app performs, on each platform you ship: gift animations for Android, iOS and Flutter apps meet different players and memory limits. The public previews in the gift gallery are reduced evaluation copies; measure the original asset you intend to ship.

Establish a useful baseline

Pick a lower-end device from your audience and a representative room. Record call quality, memory and responsiveness without gifts. Then play one animation and compare. Repeat with a warm cache and a first-time download so network delay and decoding are not confused.

Write down acceptable limits for your product. A small audio-room reaction and a full-screen celebration need different dimensions and timing. There is no single file-size target that makes every animation suitable for every app.

Match the asset to its display size

Avoid decoding a much larger canvas than the interface uses. Check the original dimensions and whether your player allocates intermediate textures or stores many frames. Compression saves transfer bytes; it does not necessarily reduce decoded pixels.

For a gift picker, use still thumbnails and defer the motion file until a preview or event needs it. If you create your own source assets, evaluate the current settings in SVGA Maker, then inspect the output in your player. Conversion alone is not a guarantee of better performance.

Bound the amount of work

Set a limit for simultaneous animations and queued events. Define what happens when a queue is full: combine acknowledgements, expire old visual effects or show a compact summary. Preserve the event's meaning even if the large animation is skipped.

Release players and object URLs when their view is destroyed. Stop room effects when the room closes. On web, decide how background tabs behave so returning to the page does not unleash a long backlog of old celebrations.

Test accessible fallbacks

Provide a still or textual acknowledgement for reduced motion and a visible way to stop previews. Keep text readable on both dark and light room surfaces. Test that a large gift does not cover mute, leave, reporting controls or captions.

The animation should not be the only record of a successful action. A user with a slow connection or an unavailable asset should still receive an understandable result.

Platform notes for the web, Android, iOS and Flutter

Each platform plays a gift through the player or image component your app includes, so test the same original file on all of them. Open-source SVGA players exist for the web, Android, iOS and Flutter; check that the one you choose supports the features a gift uses, such as masks and vector shapes. Animated WebP support depends on the image component: confirm that it animates, rather than assuming that still-WebP support includes motion.

On Android and iOS, watch decoded memory on an older phone while the call runs. In Flutter, check how your player is disposed when a route or room closes. On the web, a hidden tab should not build up a queue of old effects. The animated gifts overview compares SVGA, animated WebP and still images.

Repeat a small test matrix

Check first playback, repeated playback, several simultaneous events, a backgrounded app, an expired asset address and a slow connection. Watch memory over many cycles, not only a single effect. Compare SVGA or WebP candidates using the same devices and scenarios.

Use the format guide to narrow your choices and the RTC integration guide to handle the event lifecycle. Keep the measurements with your release notes so future asset changes can be assessed consistently.