I found in my recent development projects that it takes a lot of animation effects, and there are several implementations so far,

  • 1. Use giFs such as APNG
  • 2. Use video
  • 3. Use CSS to animate frames.

Each scheme is not perfect up front. Each has its own meaning, and I’ll compare them later. This paper focuses on acSS animation.

The biggest problem with this approach is the flash screen in ios and the problem of large image loading.

Here’s the process I’ve summarized:

1. Combine multiple frames into one Sprite image (one Sprite image can solve the flash screen problem)

2. Compress the PNG image. Preferably panda 🐼 compression or something like that

3. Generate CSS files to generate the information of each frame and the playing time

4. Introduce pictures, introduce CSS, set class, after the small program will have animation effect. But there are still a few questions.

5. RPX unit REM causes large Sprite pictures to shake when playing frame animation

6. It is troublesome to control animation playback and stop event processing

At this point, the applet is too difficult to animate frames o(╥﹏╥)o.

Next comes the text. We use the same underlying principles (CSS frame animation). But the tool does a lot of the work for you.

Start by installing a command line tool: win+R Open CMD and type NPM I -g sprite2css

Once installed, you can test whether sprite2CSS-H was installed successfully

If the help information of the command is displayed, the installation is successful.

Next, we CD command line to the folder with sequence frames (PNG files) currently the command only supports PNG sequence frames

Execute the sprite2CSS command and wait for the processing to complete. An ACSS file will appear in the folder

The ACSS file is all the data of the frame animation that we finally generate. The image is packaged into Base64 and stored in it. In this way, there is no need to wait for the image loading time and the animation will turn on in seconds, which will take up the size of the small program package.

The next step is to use this file in your applets project.

1. Copy the file to the applet page. In this document, the file is placed in the directory of the client/ Pages/im-demo page and imported to the anim-demo.acss

2. The project installation component library relies on GM-com

3. Import the animation component Anim to the configuration file on the anim-demo.json page

4. Finally use the component in anim-demo.axml to see the effect.

At the very end,

The purpose of introducing the component is to solve the jitter problem of the frame animation, because the small program uses RPX REM, and the use of RPX on the background positioning will result in the calculation of pixels as decimals, resulting in the position is often rounded and jitter. The solution here is to always use PX positioning inside the component, but do an RPX conversion scaling to achieve accurate positioning. Another function is to encapsulate common event and control properties such as start and end.