Android supply AnimationDrawable to display the frame animation, but which have some pitfalls, for example, AnimationDrawable always load all the children drawable at the loading time, this can take too much memory sometimes
In this article, I demonstrate how to use the vector image to improve the frame animation performance
Use Adobe Illustrator or Vector Magic to convert the raster(png/bitmap/jpg) image to vector image (svg), then import to Android Studio or use some online tool to convert the svg file to Android vector xml drawable
VectorDrawable has a big issue. The initial loading of a vector graphic can cost more CPU cycles than the corresponding raster image. Afterward, memory use and performance are similar between the two. We recommend that you limit a vector image to a maximum of 200 x 200 dp; otherwise, it can take too long to draw.
Use svg-android-2 to convert the SVG file to PictureDrawable. But to use in Android resource, we can use Picture.writeToStream
| Loading time | Memory | Render CPU | Render Size Aware | |
|---|---|---|---|---|
| PNG Animation | High | High | Low | No |
| Vector Animation | High | High | Low | Yes |
| SVG Binary Animation | Low | Low | High | No |
Render Size Aware: whether the memory consumption change with the render size
Android Studio Profiler Snapshot
Loading time comparison
Tips:
- SVG Binary not always a good option for all image, only good for computer-generated but bad for camera-generated image
- To lower the cpu & memory consumption, you should better use the original vector image file from Adobe Illustrator or other vector editor, avoid to use the vector image file converted from raster image file
- AnimatedVectorDrawable is property animation not frame animation.