HTML partįirst of all to see HTML part, From the renderings :
![wechat emoji making wechat emoji making](https://is2-ssl.mzstatic.com/image/thumb/Purple60/v4/63/55/7a/63557ab3-35b4-a09b-c11e-bdf904d0d5fa/source/512x512bb.jpg)
![wechat emoji making wechat emoji making](https://image5.sixthtone.com/image/5/34/988.jpg)
I wanted to skip HTML/CSS part, But think of CSS It's probably the weakness of most people, So I decided to write down the idea of realizing the interface, If you want to see the core part, you can jump to : Two 、 Send a normal message part. In addition to using lottie Outside the library, It's all native HTML/CSS/JavaScript Realized, So whether you are React、Vue Or other engineers, Can quickly grasp. Īfter finishing this project, I feel that my front-end reserves have been enriched, In the future, when dealing with complex special effects, there are new ideas, If you want to further improve your front-end development skills, You can follow this article to practice. The designer is After Effects in, utilize Bodymovin The plug-in exports the animation as JSON After the format, Developers will be able to use the SDK Play it. Lottie yes Airbnb Produced 、 The whole platform (Web、Android、IOS、React Native) The animation library, Its feature is that it can be played directly Adobe After Effects Animation made. The core of the project is to use lottie Animation library. After a long time, The results are as follows : In the spirit of being a front-end Engineer, I just want to see if I can achieve a similar special effect.
![wechat emoji making wechat emoji making](https://cdn.shopify.com/s/files/1/2711/4238/products/1_963a0728-c0e0-484a-b183-4bc72864d64d_600x.jpg)
Wechat emoji making update#
WeChat 8.0 One of the features of the update is that it supports animated expressions, If you send a message with only one built-in emoticon, This expression will have a simple animation, Some special expressions and full screen effects, For example, fireworks expression has the special effect of full screen fireworks, The expression of the bomb has an explosion animation, and the message and the avatar will vibrate with it.