preface

In order to meet the needs of business growth, we need to create H5 as a bearer to enhance the fun of the app and increase user retention. If we summarize the creative H5, we can find that it can be divided into game class and main interaction class. This article will compare the technical selection of the creative H5 of main interaction class, and throw a brick to introduce valuable information.

Technology selection – What are our options?

The mode of web end action

  • The design provides static images (JPG/JPEG/PNG (static)/ SVG), which are dictated by the design or made as giVs, by creation-Keyframe-Animation or by handwriting, and by CSS/Canvas.

    • Advantages: Flexible, all dynamic effects are in the development of the master.
    • Disadvantages: long development time, high communication cost, it is difficult for the design students to describe the desired dynamic effect, but also limited by the level of development.

  • Gifs are provided for design and embedded for development in the form of images.

    • Advantages: Low development cost and communication cost.
    • Disadvantages: GIF is generally relatively large, relatively small noise is too obvious, the performance price ratio is not high; Transparency is not supported; It can only be played on a loop, which is rather rigid.

  • Design provides APNG, and development is embedded in the form of images.

    • Advantages: With GIF, the volume is smaller than GIF, can be compared with the size of WebP, performance and cost performance is relatively high
    • Disadvantages: Only loop, relatively rigid.

  • Sprite diagram sequence frame, designed to provide a composite Sprite diagram (static), developed through the way of sequence frame action operation.

    • Advantages: Medium development cost, small communication cost.
    • Disadvantages: Composite Sprite images are large files and can be distorted at different screen resolutions.

  • Video, designed to provide unequal number of video files, by playing the video to achieve the effect of action

    • Advantages: Can easily operate sequence frame, small development cost, compared to GIF smaller volume
    • Disadvantages: The video playback experience of mobile terminal is different in different apps, different models and different systems, especially in apps, which requires some processing on the side.

  • Using Lottie, I designed students to give JSON files and picture folders, and developed students to introduce Lottie plug-in to parse JSON.

    • Advantages: the development cost is medium, the effect is not limited by the development level of students, as long as the design is drawn, the development can be realized; Flexible, the base element can be positioned as a normal DOM node, and the entire animation can be played, stopped, or even played backwards, or started from a frame (see the API documentation for details). The flexibility is very high.
    • Disadvantages: The frame nodes and playback speed are different between the development level and the design level, which requires continuous communication and coordination, resulting in high communication cost; Lottie plug-ins pack the first 400+ KB and then 200+ KB, significantly increasing the size of the project.

  • Using SVGA, design students to give. Svga file, the development of the introduction of SVGA plug-in, its analysis.

    • Advantages: Theoretically similar to Lottie
    • Disadvantages: In the actual introduction, there is the problem of “clearing canvas without reason”, and the instability is very high. It is recommended to use it only in the scene of pure playback.

    At present, our animation is basically implemented through a mixture of create-Keyframe-Animation + CSS, Lottie, CSS + APNG. Below we briefly describe these three options.

    Plan outlining the

    create-keyframe-animation+css

    Create-keyframe-animation is a simple animation library that simplifies the code complexity of dynamically inserting CSS.

    Here’s an example:

In this dynamic effect, the user chooses a different card, which means the starting position is different. If you use create-Keyframe-Animation, you just need to write a description of the code ↓ and register it.

const animation = {
  0: {
    width: `${startWidth}px`.height: `${startHeight}px`.transform: `translate(${startLeft-targetLeft}px,${startTop - targetTop}px) rotateY(-20deg) rotateX(20deg) rotateZ(12deg)`
  },
  17: {
    width: `${startWidth * 1.5}px`.height: `${startHeight * 1.5}px`,},100: {
    width: `${targetWidth}px`.height: `${targetHeight}px`.transform: RotateY ` translate (0, 0) (360 deg) rotateX (0) rotateZ ` (0)}}Copy the code

lottie

What is Lottie?

  • It is a dynamic effect plug-in produced by Airbnb. It now supports Web /RN/Android/ios/Mac OS on the development side and AE on the design side.
  • The document address on the Web is web-lottie Docs

How to use Lottie?

npm install lottie-web --save-dev
Copy the code
// Take vue as an example
import lottie from 'lottie-web'
Vue.prototype.$lottie = lottie
// Load the animation (following the vUE declaration cycle, this call is made after the DOM node has been loaded, i.e., mounted)
let machineNormal = document.querySelector('#machineNormal')
this.normalAni = this.$lottie.loadAnimation({
    container: machineNormal, // the dom element
    renderer: 'canvas'.// canvas / svg / html
    loop: true./ / the loop
    autoplay: true.// Auto play
    path: 'static/machine_normal.json'.// the animation data
})
Copy the code

What should I pay attention to when using Lottie?

During the introduction

  1. Lottie animation loading requires a DOM node that can be manipulated in any position. When the animation is loaded, the width and height of the entire DOM will be filled with the width and height of the animation, which is the widest and highest value in the animation design.
  2. Also because Lottie animation loads require a DOM node, the method to load the animation needs to be called at or after the declaration cycle when the DOM loads.
  3. If you use the path parameter to import a JSON file:

File locally:

  • Images should also be placed locally. You can customize the name of the image folder by modifying the U attribute of each item in assets of the. Json file.

Such as:

{
"v": "5.5.8"."fr": 24."ip": 1."op": 53."w": 662."h": 827."nm": ""."ddd": 0."assets": [{"id": "image_0"."w": 662."h": 827."u": "machine_img/"./* This is the name of the folder */
		"p": "img_0.png"."e": 0]}},Copy the code
  • If vue-cli2 is used, you are advised to use the static folder to save it. If vue-cli 3 is used, put it in the public folder and write path to the desired file name, for example:
this.lottie = this.$lottie.loadAnimation({
    container: document.querySelector('#BindDom'), // the dom element that will contain the animation
    renderer: 'svg'.loop: true.autoplay: true.path: 'data.json' // the path to the animation json
})
Copy the code

File placed in CDN:

Note that the image folder should be in the same directory as the JSON file, for example:

./btn_gain.json
./btn_gain_img/img_0.png
Copy the code

Animation running process

  1. Lottie provides a life cycle to sense the loading state of an animation at the time of animation initialization, providing the following:
  • complete
  • loopComplete
  • enterFrame
  • segmentStart
  • config_ready (when initial config is done)
  • data_ready (when all parts of the animation have been loaded)
  • DOMLoaded (when elements have been added to the DOM)
  • destroy

Where DOMLoaded is theoretically the last period that can be sensed, i.e., “animation loading is complete.” But in practice, only when the canvas loading action is used, this event will be all the images loaded. In other cases (SVG, HTML), it’s just “start pulling the image,” or it shows the user the entire process of loading the image.

Moreover, even if canvas loading is used, if THE JSON file and the corresponding image folder are pulled in the form of cloud, that is, CDN, the loading process of all images still cannot be perceived. Therefore, if there is a strong demand and the user is not aware of the image loading, it is recommended to place the file locally and load it in the form of canvas.

  • Lottie provides the Destroy API to clean up the canvas, but during the destroy old animation -> Load new animation, there is a very noticeable full screen flash due to the time it takes to regenerate the canvas. It is recommended to use the DOM explicit toggle rather than the canvas destroy to toggle the different states of the same block action.
  • You can use onComplete’s event listener freely, and no event rebinding will occur.
  • Lottie does not provide a native slow stop event, but it does provide the setSpeed method to adjust the speed in multiple segments to achieve the slow stop effect.

APNG

What is APNG

This is from Wikipedia

Animated Portable Network Graphics (APNG) is a file format which extends the Portable Network Graphics (PNG) specification to permit animated images that work similarly to animated GIF files, while supporting 24-bit images and 8-bit transparency not available for GIFs. It also retains backward compatibility with non-animated PNG files.

The first frame of an APNG file is stored as a normal PNG stream, so most standard PNG decoders are able to display the first frame of an APNG file. The frame speed data and extra animation frames are stored in extra chunks (as provided for by the original PNG specification). APNG competes with Multiple-image Network Graphics (MNG), a comprehensive format for bitmapped animations created by the same team as PNG. APNG’s advantage is the smaller library size and compatibility with older PNG implementations.

In a comparison made between GIF, APNG and WebP, it was shown that APNG kept lower file size while keeping at least equal quality.

Animated Portable Network Graphics (APNG) is a file format inherited from portable Network Graphics (PNG). It allows giFs to be played like GIF files, and has 24-bit images and 8-bit transparency that GIF does not support. It also retains backward compatibility with non-animated PNG files.

The first frame of an APNG file is stored as a normal PNG stream, so most standard PNG decoders are able to display the first frame of an APNG file. Frame speed data and additional animation frames are stored in additional chunks (as specified in the original PNG specification). APNG’s competitor is multi-image Network Graphics (MNG), a comprehensive format for bitmap animation created by the PNG team. APNG has the advantage of smaller storage size and full compatibility with older PNGS.

By comparing GIF, APNG, and WebP, we can see that APNG has a smaller volume for the same mass.

  • APNG is a moving PNG.
  • The APNG extension is.png or.apng. Yes, of course.png could be an APNG file.

Apng compatibility

As of now, April 2021, APNG compatibility is as follows:

You can see that 99% of browsers are compatible, so you can use it with confidence.

For incompatible browsers, APNG is shown as the first frame of the animation.

The advantage of apng

As the link in the introduction above shows, APNG is smaller than webP. The comparison data comes from: littlesvr.ca/apng/gif_ap…

GIF = 43 920 bytes APNG = 34 210 byte
WebP = 41 064 bytes Lossy WebP = 73 774 bytes
GIF = 43 132 bytes APNG = 30 823 bytes
WebP = 55 968 bytes Lossy WebP = 114 518 bytes
GIF = 200 700 bytes APNG = 168 411 bytes
WebP = 424 752 bytes Lossy WebP = 394 118 bytes

Basic use on the page

Just like a simple PNG, an IMG tag is enough, but can be tricky, as you’ll see below.

Use of animation on the page

The img tag is simple, but it has several problems:

  1. Apng can only play once on a page, so if an animation needs to be played repeatedly, you need to time stamp the animation connection each time to make the browser think of it as a new connection
  2. There is a gap between the performance of APNG on Android and ios. For example, apNG plays once on Android and twice on ios
  3. Apng animation time can not be controlled, it is difficult to achieve midway pause, cohesion and other operations

As mentioned above, we can use apNG-canvas, turn it into a canvas, and then use it as a canvas. For the analysis of the principle of APNg-Canvas, please refer to the article of netease Cloud Front-end Team: Implementation Principle of APNG Playback on the Web Side. We have made magic changes on the basis of APNg-Canvas, and added some control ability of canvas playback, for example: Control apNG playback speed and number of playback times, listen for completed playback events, and so on to make it easier to use. Here’s our cool snap-twitch effect as an example of APNG with CSS:

Refer to instructions

APNG things: aotu. IO/Notes /2016/… Implementation principle of APNG playback on the Web juejin.cn/post/685767…

Article | water path

Focus on object technology, hand in hand to the cloud of technology