Use of SVGA in the front end

<script src="js/svga.min.js"></script>
Copy the code

2. Declare a DOM object

<div id="demo" style="width: 100%; height: 100%;" ></div>Copy the code

3. Play SVGA

var player = new SVGA.Player('#demo');
var parser = new SVGA.Parser('#demo'); 
parser.load('**/**.svga', function(item) {
    player.loops = 2;
    player.clearsAfterStop = false;
    player.setVideoItem(item);
    player.startAnimation();
    player.onFrame(function (i) {    });
})
Copy the code

Is the feeling flow very familiar! That’s the feeling!

As for svgaPlayer, just check out the API description! This is a process that no API learning can save, fortunately svgaPlayer API is not many can be read in a short time, not to mention here, SVGA SVGAWeb.

The essence of svgaPlayer

The essence of svgaPlayer is actually canvas encapsulation application, which frees up various compatibility problems of Canvas animation. Just like the jQuery library encapsulates a variety of JS methods, make JS become so easy!

2. Svga application

Simple dynamic effect

Live gift dynamic effect, page cool background effect,……

interactions

If you have seen the API methods provided by SVGAPlayer, you will find that SvagPlayer can control the start of play, play a frame, play the end of the whole process for you to interact with the dynamic process! Details can be found on SVGAWeb.

Problems and solutions in application

1. Animation loading problems, especially on mobile terminals, affect the loading of complex animation files after packaging;

A simple example, such as a treasure chest open the treasure chest animation (of course may not be appropriate, for example here an idea scheme), tend to have an open the treasure box to open the treasure box to prepare moving (we’ll prepare dynamic effect), open the repeated the same paragraph of preparation before moving effect, and then open the treasure chest open dynamic effect (we’ll open the dynamic effect), It is common to make these two parts into an SVGA, which controls animation playback in segments, but what if the entire packaged SVGA is very large and the display chest experiences delays due to loading the SVGA? Svga unpacking segmented control Because the preparatory effect is a relatively simple and repetitive effect, we can make SVGA separately into SVGA and load it as needed, so that the preparatory effect can be loaded quickly and the real-time interactive rendering effect of the page can be improved.

2. On the other hand, it is the prefetch preloading scheme, which makes use of the prefetch preloading function of REL attribute in H5 (the use of prefetch preloading in other aspects can be learned by Internet search);

The idea is to use the browser’s free time to download the content specified by the user, and then cache it so that the user can load it directly from the cache the next time, making it more efficient. The method is simple as follows

<link rel="prefetch" href="****.svga" as="fetch">
Copy the code

3. Designers should pay special attention to file optimization in the process of SVGA animation file production, no matter in terms of material or frame rate, it will not be detailed here.

4. Svga advantages

GIF, CSS3, JS implementation of dynamic characteristics

GIF: GIF widely supports Internet standards, lossless compression and transparency, but GIF only supports 256 color palette, loss of image color information, especially the transparency of the support slightly less.

Css3: CSS3 is perfect in the dynamic display effect of writing elements, but for complex animation, it cannot meet the interactive behavior, and the communication cost of animation has increased, which requires constant modification to design confirmation modification and then design confirmation.

Js animation: Whether writing native JS or using JS libraries (usually jQuery and other basic effects), the biggest problem is resource consumption and performance consumption.

Characteristics of svGA dynamic effect

1. Visible visual improvement and controllable animation quality; 2. Invisible performance improvements; 3. The use of SVGA makes the development division clearer; What designers think is done, design the effect directly export SVGA file, reduce the design and front-end debugging animation effect of communication costs, so that the front developers can focus on logic development! 4. Svga supports audio playback; This point because there is no actual need to use this function, temporarily haven’t tried the effect of the function.

5. Explore behind SVGA

One outstanding feature is that SVGA supports audio playback. Consider whether you can convert video to SVGA to simulate the effect of video.