How to realize the special effects of WeChat 8.0 explosion and fireworks expression?

Lottie is a well-known cross-platform animation effect solution, which supports iOS, Android, Web and React Native (so our designers are also very familiar with it). The animation designed by the designer using Adobe After Effects is exported to json format. Through Lottie, each platform can use this JSON to realize the designer's animation effect without having to write complicated animation logic separately, which also saves a lot of communication costs.

According to Lottie's Android source code, its general principle is:

Parsing JSON-& gt；; Mapping of layer objects->; The layer object constructs various paths for layerview, etc. ->; All the data is ready, that is, the draw method of view is continuously executed to complete the drawing.

The implementation of Android is based on Drawable, and ultimately is the operation of canvas. The BuildCompositionLayer in lottieDrawable's setComposition method begins to really parse and draw the layer.

The corresponding relationship between the types of layers and the layers in AE is:

Lottie-Easily achieve complex animation effects

Lottie source code analysis

[github: Android address] (/airbnb/lottie-android)

[github: IOS address] (]/Airbnb/Lottie-IOS/tree/Lottie/Objective C)

Such a cool animation with sound effects is equivalent to transparent video. How to play transparent video on mobile devices? Generally, MP4 format video has no transparent channel. You can separate the Alpha channel, and then mix the Alpha channel and RGB channel again through OpenGL ES, so that you can play transparent video on the end.

This scheme, ByteDance and Penguin E-sports, is used for the animation of giving gifts in the live broadcast room. Both companies' open source solutions are here, and the principle is exactly the same:

ByteDance: [/ByteDance/Alpha Player] (/ByteDance/Alpha Player)

Penguin esports:/Tencent /vap

The player of AlphaPlayer is based on exoPlayer, and vap is a custom decoder. For the sake of compatibility, I prefer to choose AlphaPlayer. But later it was found that vap was more perfect. Advantages over AlphaPlayer are:

All right.

Lotttie scheme has achieved the effect of "fireworks" and "firecrackers" in our products. But the effect of art propaganda is not good. We still achieved it. While playing animation, we also created an audio player to play sound effects.

Fireworks:

The limitation of this scheme are:

Advantages compared with Lottie scheme:

How to use:

AE exports the final composition to png sequence, and then uses the tools provided by VPA to synthesize MP4 video with transparent channel data.

Effect:

It's consistent with Lottie's plan for the time being. (Connected) Because the same AE material is temporarily used for the outlet. However, it is obvious that it can be done more finely and the resources may be greater. At present, the sound effect of mp4 plus 2s is only 400k. ..

Here is another picture to compare the effect of this scheme. Smoke effect Bilotti's scheme is much more realistic.

After Effects CC complete introductory tutorial/video/bv1at 411i7yz? p = 6 & ampt=645

The application of AE in our project includes the above-mentioned special effects animation and ve video editing template. VE video editing scheme is a video processing scheme integrating AE(Adore After Effects) and Pr(Premiere) software functions. From the perspective of video special effects, it is a layer-based video processing architecture and a special effects plug-in system similar to After Effects. From the perspective of video editing, it is similar to a multi-track video editing system, including video filters, stickers, text animation, track animation, video special effects, video transitions and video animation.

Analysis template configuration data json (exported by VE tool).

Attachment super_mosaic_config.json

Analyze the json data of the above chat dedicated fireworks (exported by ae plug-in of lotttie).

Attachment yanhua _ chenghong _750×750.json

Analyze json data structure from the following questions