H5篇：页面中实现动画的几种方式？（附代码）

之前文章《html5篇：实现页面跳转的5种方式（代码分享）》中，带大家了解html5使用现页面跳转的5种方式。下面本篇文章给大家了解一下页面中实现动画的几种方式，我们就来看一下吧！！

wed的动画实现多种多样，随着 H5 的发展，实现动画的方式越来越多了。初步统计实现动画的方式有以下一些方式实现。

一、GIF 动画

通常咱们社交聊天的一些动态表情，大多都是gif动画。GIF(Graphics Interchange Format)的原义是“图像互换格式”，GIF 文件的数据，是一种基于LZW算法的连续色调的无损压缩格式。其压缩率一般在 50%左右，它不属于任何应用程序。GIF 格式可以存多幅彩色图像，如果把存于一个文件中的多幅图像数据逐幅读出并显示到屏幕上，就可构成一种最简单的动画。 GIF分为静态GIF和动画GIF两种，扩展名为.gif，是一种压缩位图格式，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是GIF格式，其实GIF是将多幅图像保存为一个图像文件，从而形成动画，最常见的就是通过一帧帧的动画串联起来的搞笑gif图，所以归根到底GIF仍然是图片文件格式。 GIF 制作方式可以通过PS制作，或者通过图片、视频、FLASH转换

缺点：高清的 gif 体积较大。压缩后的体检较小的会失帧。交互差，实质上他就是一个会动的图片。

二、FLASH 动画 / SilverLight FLASH

Flash非常强大，它们包含丰富的视频、声音、图形和动画。利用Flash可以制作各种各样非常华丽的动画，和视频，但是由于各种原因，2012 年 8 月 15 日，Flash退出Android平台，正式告别移动端。2015 年 12 月 1 日，Adobe将动画制作软Flashprofessional CC2015升级并改名为Animate CC 2015.5，从此与Flash技术划清界限。很早之前在各种企业门户的首页大图轮播基本都是使用flash，早几年 12306 的购票网站首页的顶部的大图也是用的flash，如今都换成了静态的图片。这种技术逐渐淡出了视野，只有在线视频直播如优酷，爱奇艺等视频网站。

缺点：基于 flash 播放器来播放，flash 播放器非常耗性能，经常报各种漏洞。

SilverLight

Microsoft Silverlight是一个跨浏览器的、跨平台的插件，是一种新的Web呈现技术，能在各种平台上运行。借助该技术，您将拥有内容丰富、视觉效果绚丽的交互式体验，而且，无论是在浏览器内、还是在桌面操作系统（如Windows和Apple Macintosh）中，您都可以获得这种一致的体验。

缺点：以浏览器插件的形式来支持动画，开发起来不那么容易。了解下有这个东东就够了哈著作权归作者所有。

三、Javascript + HTML

原理：其主要思想是通过setInterval或setTimeout方法的回调函数来持续调用改变某个元素的CSS样式以达到元素样式变化的效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style type="text/css">
      #animate {
        width: 200px;
        height: 200px;
        background: #ccc;
      }
    </style>
  </head>
  <body>
    <div id="animate"></div>
    <script>
      let elem = document.getElementById("animate");
      let left = 0;
      let timer = setInterval(function () {
        if (left < window.innerWidth - 200) {
          elem.style.marginLeft = left + "px";
          left++;
        } else {
          clearInterval(timer);
        }
      }, 16); //这里的16毫秒
    </script>
  </body>
</html>

Jquery的animate()方法就是这种方式实现的。

缺点：javascript 实现动画通常会导致页面频繁性重排重绘，消耗性能，一般应该在桌面端浏览器。在移动端上使用会有明显的卡顿

16ms 的问题：一般认为人眼能辨识的流畅动画为每秒 60 帧，这里 16ms 比(1000ms/60)帧略小一些，但是一般可仍为该动画是流畅的。在很多移动端动画性能优化时，一般使用 16ms 来进行节流处理连续触发的浏览器事件。例如对touchmove、scroll事件进行节流等。通过这种方式减少持续事件的触发频率，可以大大提升动画的流畅性。

四、SMIL

SMIL 特性：程序以开始，以结束，整个程序由body和head两个部分组成，SMIL要求其标记和标记的属性必须小写！有些标记必须有一斜杠作为结束标记，属性值必须用双引号括起来，SMIL文件的拓展名为*.smil或者*.smi。

<smil>
  <head></head>

  <body>
    <seq>
      <!-- 演示开始进行2秒后开始显示，持续播放5秒 -->
      <img src="/Uploads/1.jpg" dur="5s" begin="2" />
      <!-- 演示开始进行3秒后开始显示，持续播放10秒 -->
      <img src="/Uploads/2.jpg" dur="10s" bengin="3" />
      <!-- 演示开始进行5秒后开始显示，在整个演示播放40秒以后，就结束播放 -->
      <video src="test.rm" begin="5s" end="40s" />
      <!-- 只播放视频文件的第5秒到第10秒，重复播放2次 -->
      <video src="test.rm" clip-begin="5s" clip-end="10s" repeat="2" />
    </seq>
  </body>
</smil>

嵌入 html

向标签添加命名空间定义，添加一个元素，以导入"time"命名空间，添加一个定义"time"类的