H5 article: How many ways to implement animation on the page? (with code)

In the previous article "html5 articles: 5 ways to achieve page jump (code sharing)", we will show you the 5 ways to use html5 to jump to the current page. The following article will give you an idea of several ways to implement animation on the page. Let’s take a look! !

wed has various animation implementations. With the development of H5, there are more and more ways to implement animation. Preliminary statistics show that the ways to implement animation are as follows.

1. GIF animation

Usually some of the dynamic expressions in our social chats are mostly GIF animations. The original meaning of GIF (Graphics Interchange Format) is "Image Interchange Format". The data of the GIF file is a continuous-tone lossless compression format based on the LZW algorithm. Its compression rate is generally around 50%, and it does not belong to any application. The GIF format can store multiple color images. If the multiple image data stored in a file are read out one by one and displayed on the screen, one of the simplest animations can be formed. GIF is divided into two types: static GIF and animated GIF. The extension is .gif. It is a compressed bitmap format that supports transparent background images. It is suitable for a variety of operating systems. Its "body size" is small. Many small animations on the Internet are GIFs. Format, in fact, GIF saves multiple images into one image file to form an animation. The most common one is a funny gif picture connected through a frame of animation, so in the final analysis, GIF is still a picture file format. GIF production can be done through PS, or through image, video, or FLASH conversion

Disadvantages: High-definition gifs are larger in size. The compressed physical examination will lose frames if it is smaller. The interaction is poor. In essence, it is a moving picture.

2. FLASH animation / SilverLight FLASH

Flash is very powerful, they contain rich videos, sounds, graphics and animations. Flash can be used to create a variety of very gorgeous animations and videos. However, due to various reasons, Flash exited the Android platform on August 15, 2012 and officially bid farewell to the mobile terminal. On December 1, 2015, Adobe upgraded the animation production software Flashprofessional CC2015 and renamed it Animate CC 2015.5, thus drawing a clear line with Flash technology. A long time ago, the large picture carousels on the homepages of various corporate portals basically used flash. In the early years, the large pictures at the top of the homepage of 12306's ticket purchase website also used flash, but now they are all replaced by static pictures. This technology has gradually faded out of sight, and only online video live broadcasts such as Youku, iQiyi and other video websites are available.

Disadvantages: It is played based on flash player. Flash player is very performance-consuming and often reports various vulnerabilities.

SilverLight

Microsoft Silverlight is a cross-browser, cross-platform plug-in and a new Web rendering technology , can run on various platforms. With this technology, you have a rich, visually stunning interactive experience that is consistent whether within a browser or across desktop operating systems such as Windows and Apple Macintosh .

Disadvantages: Supporting animation in the form of browser plug-ins is not easy to develop. It’s enough to understand that this stuff is there Copyright belongs to the author.

3. Javascript HTML

Principle: The main idea is to continuously call and change the CSS style of an element through the callback function of the setInterval or setTimeout method to achieve the effect of changing the element style.

Jquery’s animate() method is implemented in this way.

Disadvantages: Implementing animations in JavaScript usually results in frequent page rearrangements and redraws, which consumes performance. Generally, it should be used in desktop browsers. There will be obvious lag when used on the mobile terminal.

16ms problem: It is generally believed that the smooth animation that the human eye can recognize is 60 frames per second, here the 16ms ratio is (1000ms/60) The frames are slightly smaller, but the animation is still generally smooth. When optimizing the performance of many mobile animations, 16ms is generally used to throttle and process continuously triggered browser events. For example, throttling touchmove and scroll events. By reducing the triggering frequency of continuous events in this way, the smoothness of animation can be greatly improved.

4. SMIL

SMIL features: The program starts with and ends with. The entire program consists of two parts: body and head. SMIL requires that its tags and tag attributes must be lowercase! Some tags must have a slash as the closing tag, the attribute value must be enclosed in double quotes, and the extension of the SMIL file is *.smil or *.smi.

Embed html

Add a namespace definition to thetag, add a< ;?import>element to import the "time" namespace and add a

Copy after login