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.
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.
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.
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.
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 the tag, add a < ;?import> element to import the "time" namespace and add a
Copy after login
Disadvantages: You can tell at a glance that it only supports IE. Nothing to say
APNG, 全称是“Animated Portable Network Graphics”, 是PNG的位图动画扩展，他和 gif 的区别在于：图片质量,gif最多支持 256 种颜色，不支持Alpha透明通道。可以称之为色彩丰富支持Alpha透明通道体积大小和 gif 甚至更小的 gif。 2007 年 4 月 20日，PNG组织投票以 10:8 否决APNG进入官方标准。也就是PNG不认可他。
缺点：Chrome 59 之后，只有 IE 不支持。
APNG的制作：http://littlesvr.ca/apng/
SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。
特性
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG animation最强大的地方在于：™ 只要在页面放几个animate元素，没有任何CSS, 没有任何JS，页面上的元素就像是没吃草的马儿一样，愉快地跑起来了。你会发现，我勒个去，原来要实现个动画效果这么简单。什么CSS3动画，哪边凉快哪边呆着吧！
元素
展示的时候是这个样子的
暂停和播放
// svg指当前svg DOM元素 // 暂停 svg.pauseAnimations(); // 重启动 svg.unpauseAnimations();
关于 svg 的之后再写文章详细介绍吧
七、Video
是HTML 5的新标签
相关属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| height | pixels | 设置视频播放器的高度。 |
| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |
| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的视频的 URL。 |
| width | pixels | 设置视频播放器的宽度。 |
canvas作为H5新增元素，是借助Web API来实现动画的。 结合setInterval或者requestAnimationFrame可以实现各种样的动画，下面的例子展示了一个 7 色圆的颜色过度
JS Bin
复制下面链接在线看demo：
https://jsbin.com/piwihur/edit?html,js,output
cavans有些复杂，一时半会消化不了。之后再写详细的文章研究。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画
transition
transition是过度动画。但是transition并不能实现独立的动画，只能在某个标签元素样式或状态改变时进行平滑的动画效果过渡，而不是马上改变。
在移动端开发中，直接使用transition动画会让页面变慢甚至卡顿。所以我们通常添加transform:translate3D(0,0,0)或transform:translateZ(0)来开启移动端动画的GPU加速，让动画过程更加流畅。
animation
animation算是真正意义上的CSS3动画。通过对关键帧和循环次数的控制，页面标签元素会根据设定好的样式改变进行平滑过渡。而且关键帧状态的控制是通过百分比来控制的。
CSS3最大的优势是摆脱了js的控制，并且能利用硬件加速以及实现复杂动画效果。
有一篇文章做了简单的介绍，点这里
假如用CSS3来实现上面的Canvas7 彩颜色过渡的话，就非常简单了
@keyframes color {
0% {
background-color: red;
}
7% {
background-color: orange;
}
17% {
background-color: yellow;
}
22% {
background-color: green;
}
42% {
background-color: cyan;
}
82% {
background-color: blue;
}
90% {
background-color: purple;
}
}当然并不是用CSS3做动画比Canvas牛逼，只是使用场景不一样吧。 知道的就这些了，之后再补充吧。
[完]
推荐学习：SVG视频教程
The above is the detailed content of H5 article: How many ways to implement animation on the page? (with code). For more information, please follow other related articles on the PHP Chinese website!
what is h5
How to implement h5 to slide up and load the next page on the web side
Introduction to SSL detection tools
What are the methods to implement operator overloading in Go language?
How to turn two pages into one word document
How to execute scheduled tasks in java
How to modify element.style
How to learn python programming from scratch
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
