Animation research

Foreword: Animation can be divided into two kinds from the purpose, one is display animation, similar to a GIF, or a video, the other is interactive animation. Both of them have specific application scenarios. For example, in our information flow business, in the process from the drop-down page to the active page, we can completely replace the loading page, which might have only a small circle, with a display entry animation.

Display animation:

Interactive animation (you can see the little gesture on the screen) :

Display animation vs. interactive animation

There are many ways to realize display animation in the actual scene, such as using GIF, Canvas, CSS3 animation, etc., but the final output is not interactive, that is, from the initial state of animation to the end state in one go. Users can perceive this process, but cannot participate in it. For interactive animation, we can trigger corresponding operations at a certain point of animation playback, so that users can participate in it. The most common examples are red envelope rain, or our animation of playing football in the World Cup, which can not only improve user experience, but also enhance the diversity of our products. However, one of the problems that interactive animation often faces is that it is very complex to implement interactive animation through native code, and performance and compatibility are issues that have to be seriously considered. A better solution is to look for related frameworks.

2. Techniques used in animation

  • CSS3 Animation
  • canvas
  • SVG
  • WebGL
  • Use javascript-driven animation

With the development of CSS3, CSS3 transform and @keyframes of animation can be used to complete a lot of cool animation, but CSS3 animation application scenes are only display animation, as long as the animation starts, we can not control the state of animation, and for complex animation, CSS3 is very weak. For javascript-driven animations, these shortcomings can be remedied to some extent, such as the concept of animos.js’s added timeline, which allows more complex animations to be completed by chain execution of each part of the animation. At the same time, the callback function provided by each stage of animation execution also makes it easier for us to control the animation execution state, which provides the possibility of interaction. For canvas, the graph drawn on canvas does not support DOM events. Only the Canvas tag supports DOM event monitoring. Therefore, events of canvas container need to be processed to realize monitoring and processing of corresponding events. WebGL can provide hardware GPU-accelerated rendering for Canvas, so that animation can be displayed more smoothly in mobile terminal by using system GPU.

Iii. Compatibility of related technologies

  • forMost of the animation, the compatibility is as follows:
  • canvasThe compatibility is as follows:
  • WebGLThe compatibility is as follows:

It can be seen that CSS3 animation and Canvas are well supported, but WebGL is not supported at all in Android 4.4 Browser. Later we will mention the PixiJs library, which can adopt WebGL rendering, or gracefully degrade to adopt Canvas rendering

Iv. Several existing schemes

1. AE + bodymovin + Lottie

Applicable scene: mainly display animation

Introduction: Export the animation made in AE into a JSON file through the Bodymovin plug-in on AE, parse the JSON through Lottie, and render the animation in the way of SVG/ Canvas/HTML.

IO/Lottie/Codepen warehouse: Codepen. IO/Collection /…

Advantages:

  • Cross-platform, draw once, convert once, and use anywhere
  • File smaller, get AE exportJSON, finally passedlottieApply colours to a drawing forCanvas/SVG/HTML format
  • Some properties of the animation, such as animation speed, can be manipulated through the API; Add callback functions for each state of the animation
  • The animation is all inAfter EffectsIs created in theBodymovinExport, and native rendering requires no additional engineering work.
  • Liberate the productivity of front-end engineers and improve the freedom of designers to make dynamic effects

Disadvantages:

  • BodymovinThere are still some AE effects that cannot be exported successfully
  • Support for interaction is not very good, more used to display animation
  • Lottie 对 jsonFile support needs to be improved, some of them can be exported successfully at presentjsonFiles don’t work well on mobile devices
  • Many AE effects are not Supported

2. Anime.js

Applicable scene: strong display + weak interactive animation

Brief introduction: Animo.js is a lightweight JS-driven animation library. Its main functions include support for keyframes and connection of multiple animations, support for Timeline, which makes it possible to realize more complex animations, support for playback control, playback, pause and restart of animation states, Search for animations or timelines. – Support animation state callback, provide callback function at animation start, during execution, at animation end – support SVG animation – custom Bezier curve can be set – any DOM attribute containing numeric value can be set animation

GitHub:github.com/juliangarni… Codepen repository: codepen. IO /collection/… Documentation demo: animejs.com/documentati…

Function introduction:

  • Animo.js is also, to some extent, a CSS3 animation library that applies to all CSS attributes, and the @keyframes implementation makes it easier to implement frame animations instead of CSS3’s complicated definition. Define each frame as an array of objects: keyFrames instance

    anime({
    targets: 'div'[{value: 0, duration: 1000, delay: 500, elasticity: 0}, [{value: 0, duration: 1000, delay: 0}}, 500, elasticity: 0} // Second frame elasticity: 0}Copy the code

  • The Timeline provided can achieve more complex animation effects. Through this Timeline, we can maintain the relationship between different animations, and then form a more complex animation through multiple different animations. Poke me: Timeline instance

    var myTimeline = anime.timeline(); // Add the animation mytimeline.add ({targets:'.square',
    translateX: 250
})
.add({
    targets: '.circle',
    translateX: 250
})
.add({
    targets: '.triangle',
    translateX: 250
});
Copy the code

  • Common controls for animation playback are Pause, replay, continue, animation state tracking, auto play, loop count, and Jitter

  • Provides callback functions for animations that are executed at the beginning, during, or during the completion of an animation or timeline. Poke me: Callback instance

    var myAnimation = anime({
    targets: '#begin .el'.translateX: 250.delay: 1000.begin: function(anim) {   // callback
        console.log(anim.began); // true after 1000ms}});Copy the code

  • Promises are supported, and when the animation is over, a call to animo.finished returns a Promise object. Poke me: Promise instance

  • SVG drawing path support, currently does not support Canvas drawing stamp me: SVG instance

  • For element tags with values such as input, you can also animate me with a Anime instance: the DOM ATTRIBUTES instance

    anime({
    targets: input,
    value: 1000, // Animate the input value to 1000
    round: 1 // Remove decimals by rounding the value
});
Copy the code

Advantages:

  • Obviously,anime.jsNot only did it happenCSS 3 animationThe depth of encapsulation, more through THE JS driver to achieve the state of operation animation,timelineThe realization of multiple branch animation management, for the realization of more complex animation provides the possibility
  • throughanime.jsTo provide theplayback controlsandcallbackAt the same time, forpromiseSupport for animation, so that we have room for simple interaction animation
  • Although not supportedcanvas, but supportSVG drawing path, I do not know much about SVG, and I will make a supplement after further study.
  • Browser compatibility is good,Android 4All the above supported

Disadvantages and shortcomings:

  • anime.jsIt is competent to do display animation, but in terms of interactive animation, it still needs to see the scene. It is more suitable for doing some small interactive animation, such as playing football through touch screen.anime.jsNot so much.

3. PixiJs

Applicable scene: interactive animation, animation games

PixiJS is a 2D rendering engine, Pixi is responsible for rendering images. You can create rich interactive graphics, animations, and games without having to dig into the WebGL API or deal with browser and device compatibility issues. PixiJS, meanwhile, has full WebGL support and can seamlessly fall back to HTML5’s canvas if needed. PixiJs uses WebGL rendering by default. You can also specify canvas rendering by declaration. WebGL is not supported by Android 4.4 Browser on mobile, but canvas elegant degradation can be used.

Making: github.com/pixijs/pixi… The official document: pixijs. Download/release/doc… Official website: www.pixijs.com/ Examples: pixijs. IO/Examples /#/…

Features (from official DOCS) :

  • supportWebGL rendering
  • supportCanvas rendering(PixiJS is now officially the fastest canvas rendering)
  • Very simple to useAPI
  • Rich interaction events, such as full mouse and mobile touch events
  • PixiThe use andCanvas DrawingAlmost the same API, but different fromCanvasThe drawing API that uses Pixi to draw graphics is passedWebGLinGPUOn the rendering
  • There are also a number of features that you need to know after learning PixiJs

Advantage:

  • The greatest advantage is passingWebGLTo call the GPU to render animation, which greatly improves performance
  • No need to knowWebGL APIOr is itBrowser compatibility(For the following reason)
  • supportcanvasRollback: The current device does not support rollbackWebGLWhen,PixiJsWill useCanvas renderinganimation
  • The completeDOCSA more active community is conducive to in-depth learning. However, I feel that the cost of learning PixiJs is relatively high

Disadvantages:

  • The first is the compatibility issue, WebGL inThe Android 4.4Is not supported and can only be degraded using canvas
  • Pixi is mainly for rendering, many other features developers have to write or use with other libraries, but so far, it works for our needs.

Performance:

  • For the mobile versionAndroid4.4The above phones, in addition to the code level caused by the performance is insufficient, through WebGL call GPU rendering, performance is guaranteed. However, Android4.4 can only use canvas rendering, performance still depends on the complexity of animation, and code optimization

In live.

For different animation needs, I have summarized three animation libraries in different scenes. For the demonstration animation, we can completely use the first solution, let the design students provide animation, we use the animation exported JSON, animation to SVG /canvas/ HTML. If the scene is interactive or a small game needs to be made, the third scheme PixiJs can be used to render through WebGL to greatly improve performance by utilizing hardware resources. In terms of compatibility, for browsers that do not support WebGL, canvas rendering can be used for smooth rollback. The last type of scene is weak interaction and strong display, in which the user usually clicks to pause the corresponding operation and continues to play the animation when the operation is finished. The second scheme, animo.js, can be adopted in this scenario, where all CSS properties are supported. You can also control each state of animation execution through Timeline, Callback, and Playback controls. And the compatibility meets our needs, in terms of performance, as long as there is no more page backflow and more use of transform operation composite layer, the performance is ok (after more attempts, as far as I see a few examples of good performance). Finally, after analysis from a demand point of view, a simple mini-ranking is made in terms of learning costs: PixiJs > animo.js > Lottie

Animation performance analysis reference

  • Achieve high performance interactive animation up to 60FPS
  • RequestAnimationFrame performs better
  • Check CSS animation performance using browser Developer Tools
  • 60FPS animation using CSS3
  • Hardware acceleration for CSS animation
  • Web animation Performance Guide

Vii. Reference links

  • Main differences between Canvas and SVG
  • Canvas does game practice sharing
  • Progressive animation solution
  • Exploration of interactive dynamic effect of hand washing
  • SegmentFault Technology Weekly Vol.20 – Draw a Starry sky on Canvas
  • Adjust bezier curve
  • Can’t do animation front end is not good development
  • Game practice sharing series