简体中文 | English
The gift animations widely uesd in live broadcast industries are getting more and more awesome nowadays. However, animation designers are not able to fully express their creative ideas due to the limitation of the designing tools or the devices performence。In the past 10 years, the animation solutions used by YY had changed from frame-by-frame animation、SVGA、MP4 to YYEVA(YY Effect Video Animate), the lastest solution which supports inserting customized elements into the static MP4 resources during runtime.YYEVA(YY Effect Video Animate) can not only allow designers to unleash their imaginations, making What-You-See-Is-What-You-Get possible ,but also achieve a perfect balance between the performence and the fille size. This document will explain the implementaion principles of the commonly used animation solutions and YYEVA solution, meanwhile, provide comparisons and analyze the pros and cons, making it convenient for developers to choose the right solution.
the implementation principles of the commonly used animation solutions can be summed up in the following three kinds:
- The first principle is based on purely process-oriented animation recording. This principle used by mainstream solutions like Lottie from Airbnb and PAG that recently have been open-sourced by Tencent is to record every elements as well as their movement processes into data of a particular form, which can be later used by the developers to reproduce the animation.In addition to a smaller animation file size, the advantage of this solution is that it can implement most animations with basic special effects or transformations, whereas, its advantage is that it does not support more complex special effects (such as 3D effects, etc.) and has relatively poor playback performence, because as described above,an animation recording process indicates an animation reproducing process and a rendering process which both contain complex computation on the elements.This extra computation causes a certain amount of performance loss compared with other solutions
Lottie Animation Example:
- The second principle is based on half-process-oriented,half-result-oriented animation recording. This principle used by mainstream solutions like SVGA and Y2A from YY is to record every elements created by the designers as well as their characteristics(such as shape, size, position, alpha, etc.)at each frame.The advantage of SVGA is that it supports more complex animations and has better playback performence than the first solution mentioned above.However,it makes the resource files size bigger and also can't support complex special effects (such as 3D effects, etc.). The reason why this solution supports more complex animations and is better than the first one mentioned above is that it reduces the necessary computation cost by recording every characteristics into the file which in return have increased the file size.By virtue of the zlib compression and base64 encoding, the compression rate of the SVGA file can reach 85%~90% so that the file size is consequently not so much bigger than the one created by the first solution. Therefore, the solution based on this principle relatively has better overall performence than the former one.
For example,let's assume we need to record the animation process of a man driving from Guangzhou to Beijing.The way how Lottie record is like: "there is a X*X*X(length*width*height) car driving from Guangzhou to beijing in 30 days(frames) at a constant speed."The way how SVGA record is like:"there is a X*X*X(length*width*height) car driving from Guangzhou to beijing. The first it's in GuangZhou. The second day it's in ShaoGuan. The third day it's in Ganzhou.. The 30th day it's in Beijing." When reproducing the process, Lottie has to compute the locations(diving the distance from Guangzhou to Beijing by time and find out the location according to the result) for each day(frame), while SVGA doesn't have to compute the locations for each day(frame) as they're all already recorded in the svga file. In this example, the SVGA file size is bigger than the Lottie file, however it has better playback performence.
For another example，now we try to record the a figure skating process. What Lottie records will be: "the skater slide to the left for y meter, make a quadruple jump followed by a Cantilever "and then make a reverse quadruple jump again."To reproduce this aniamtion, Lottie has to do a complicated computaion which needs to compute all the states(shape, size, position,etc.) of the skaters based on how many spins they had made before rendering.This kind of animations are laggy while playing because of the massive computaion cost. Unlike Lottie, What SVGA records will be: "the first frame characteristics(shape, size, position,etc.), the second frame characteristics...... the n frame characteristics。" By doing so, the complexity remains the same yet SVGA player can omit the computation cost for the characteristics which in return help s playing the animation smoothly.
-
the third principle is based on result-oriented animation recording. Frame-by-frame PNG picture animation and MP4 animation with alpha channel are designed according to this principle.The main idea of this principle is to record all the pixel values of every pixel in each frame in order to make "what you see is what you get". Since it is a pixel-accurate solution, it can supports whatever animation effects created by the designers, including 3D effect, which will significantly unleash designers' imaginations.While the frame-by-frame PNG pictures animation solution however has been used by less and less developers due to its big space usage、poor performence and so on, the MP4 animation with alpha channel solution achieves a relatively better balance between space usage and performance.The MP4 animation has even smaller size if it's encoded with H.265. This is the solution YY is using now when playing complex animations are needed. YYEVA, developed by YY company itself, has provided both designers and developers with a complete tool chain, which includes AE plugins that allow to designers to insert customized elements into the static file and to export a H.265 encoded MP4 file with just a single click and animation player that allow developers to set data to the MP4 animation during runtime.
This solution unavoidably will make the resource file size bigger than those created by the first two solutions under the same circumstance, however we can reduce the file size by encoding it with H.265. Though it causes a bit of performence loss,it is worthwhile for mid-to-high-end devices to exchange the negligible loss for the great animation experience. The main difficulty in this MP4 animation solution lies in inserting or replacing elements in the MP4 static file during runtime.Generally speaking, MP4 file record only result so that the elements used in the animation created by the animation designers as well as the elements' movements can't be recorded into the file, therefore, there is no way we can replace any element in the MP4 animation.In order to solve this problem, The YYEVA solution starts with enhancing the animation designing tool to allow designers to decide which element should be replaced later while they're designing their animations.As AE(After Effect) is the most commonly used animation design tool, we decide to develop an AE plugin.This plugin is able to record the information of the replaceable elements decided by the designers themselves into the MP4 file as Metadata.By extracting these metadata from the MP4 files while playing them,the client can use these data to replace specific elements and reproduce the entire animation process.So much more text is needed if we want to explain everything in detail so that we have just explained the principle roughly here.we will analyze our YYEVA solution in detail in another document.
From the first to the third solution, the complexity of the animation that can be achieved gets higher and higher.**
- the first solution supports only common effect, like UI animation, transition, user entrance, scoring and so on.
- In addition to all the effects supported by the first solution,the second solution supports more complex effects, for example complex gift effect, awesome ride effect and so on
- The third solution supports whatever effects that can be created by the designers.Space usage increase on each solution，the first solution cost the least.Conversely, it has the worst performence, cosuming more CPU and GPU resources.
So which solution to use depends on your scenario. When you need only simple animations, consider using Lottie or PAG. If more complex gift animations are needed, we suggest using SVGA or MP4 animation.
All the solutions have been mentioned above, including Lottie、PAG、SVGA and YYEVA, provide what-you-see-is-what-you-get animation preview tool for designers to check the animations they create without needing them to code.Compared with the traditional solution which needs developers to reproduce the animation by programing based on the animation description file created by designer, these solutions are highly efficient, because developers don't need to repeatly tweak their code to refine the animations in order to pass designers' repeated check.Why these solutions can completely represent everything created by the designers? Here we have to appreciate the Flash as one of the best software in the PC era. Whether it is Lottie, SVGA, PAG or YYEVA, the developers of these solutions have experience in Flash designing and developing. Being one of the only few softwares that can be used to design animation and develop application or game, Flash had been frequently used by both flash animation designers and flash Programmers. As a result, some users turned out to be both designers and developers. Some among these people became mobile developers later and they had created all these excellent animation solutions ,the principle of which have something in common with Flash.
After seeing everything have been discuss about above, you may wonder, which solution should I use? My suggestion is that if all your animation effects can be achieved by SVGA , just choose SVGA. If not(for example containing 3D effect or complex filter effect), then choose YYEVA. Using SVGA in combination with YYEVA benefit both animation effect and performence and is actually the solution being used by YY no.This solution has another advantage for designer because both SVGA and YYEVA provide complete tool chain which supports animation preview、exporting SVGA or MP4 file by using their AE plugins. YYEVA also allows designers to choose whether using h264 or h265 encoding, helping them to find a better balance between the performence and the file size.