H5篇：頁面中實作動畫的幾種方式？（附代碼）-H5教程-PHP中文網

先前文章《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="1.jpg" dur="5s" begin="2" / alt="H5篇：頁面中實作動畫的幾種方式？ （附代碼）" >
      <!-- 演示开始进行3秒后开始显示，持续播放10秒 -->
      <img  src="2.jpg" dur="10s" bengin="3" / alt="H5篇：頁面中實作動畫的幾種方式？ （附代碼）" >
      <!-- 演示开始进行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

#<html>標籤新增命名空間定義，新增一個&lt ;?import>元素，以導入"time"命名空間，新增定義"time"類別的<style>元素

<html xmlns:time="urn:schemas-microsoft-com:time">
  <head>
    <?import namespace="time" implementation="#default#time2">
    <style>
      .time {
        behavior: url(#default#time2);
      }
    </style>
  </head>

  <body>
    <!-- repeatCount循环次数 -->
    <time:seq repeatCount="indefinite">
      <img  class="time" src="image1.jpg" dur="3s" / alt="H5篇：頁面中實作動畫的幾種方式？ （附代碼）" >
      <img  class="time" src="image2.jpg" dur="3s" / alt="H5篇：頁面中實作動畫的幾種方式？ （附代碼）" >
    </time:seq>
  </body>
</html>

登入後複製

缺點：一看就知道只支援IE。沒啥好說的

五、APNG

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/

六、Javascript + SVG

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 width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      哈哈
    </text>
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="10s"
      type="rotate"
      from="0 160 160"
      to="360 160 160"
      repeatCount="indefinite"
    />
  </g>
</svg>

登入後複製

元素

<set>此元素没有动画效果,可以在特定时间之后修改某个属性值（也可以是CSS属性值）

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      测试
      <!-- 3秒后把x值改为60 -->
      <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </text>
  </g>
</svg>

登入後複製

<animate>基础动画元素。实现单属性的动画过渡效果

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">
      测试
      <!-- 从0秒开始，总时长3秒，x值从160到60，（repeatCount）不间断循环 -->
      <animate
        attributeName="x"
        from="160"
        to="60"
        begin="0s"
        dur="3s"
        repeatCount="indefinite"
      />
    </text>
  </g>
</svg>

登入後複製

<animateColor>颜色动画，因为 animate 能实现其功能，所以被废弃了。逝者已矣...

<animateTransform>实现 transform 变换动画效果的,与 CSS3 的 transform 变换是一个套路

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="microsoft yahei" font-size="80" y="100" x="100">
      测试
    </text>
    <!-- 从0秒开始，总时长3秒，变换类型为scale（缩放），值从1到1.5，repeatCount）不间断循环  -->
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="3s"
      type="scale"
      from="1"
      to="1.5"
      repeatCount="indefinite"
    />
  </g>
</svg>

登入後複製

<animateMotio>元素可以让 SVG 各种图形沿着特定的 path 路径运动~

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
  <text font-family="microsoft yahei" font-size="30" x="0" y="0" fill="green">
    动
    <!-- 从0秒开始,总时长3秒，不间断循环，沿着路径path运动 -->
    <animateMotion
      path="m124.067754,67.21128c39.580339,-101.001223 194.657404,0 0,129.858716c-194.657404,-129.858716 -39.580339,-230.859939 0,-129.858716z"
      begin="0s"
      dur="5s"
      rotate="auto"
      repeatCount="indefinite"
    />
  </text>
  <path
    d="m124.067754,67.21128c39.580339,-101.001223 194.657404,0 0,129.858716c-194.657404,-129.858716 -39.580339,-230.859939 0,-129.858716z"
    stroke-width="1.5"
    stroke="#cd0000"
    fill="none"
  />
</svg>

登入後複製

展示的时候是这个样子的

H5篇：頁面中實作動畫的幾種方式？（附代碼）

暂停和播放

// svg指当前svg DOM元素
// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations();

登入後複製

关于 svg 的之后再写文章详细介绍吧

七、Video

<video>是HTML 5的新标签

<video src="movie.ogg" controls="controls">
  您的浏览器不支持 video 标签。
</video>

登入後複製

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

八、Javascript + Canvas

canvas作为H5新增元素，是借助Web API来实现动画的。结合setInterval或者requestAnimationFrame可以实现各种样的动画，下面的例子展示了一个 7 色圆的颜色过度

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>JS Bin</title>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      function colorPalette(gradient) {
        var canvas = document.createElement("canvas");
        canvas.width = "1";
        canvas.height = "256";
        // document.body.appendChild(canvas); // debug
        var ctx = canvas.getContext("2d"),
          grad = ctx.createLinearGradient(0, 0, 1, 256);
        gradient.forEach(function (item) {
          grad.addColorStop(item[0], item[1]);
        });
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, 1, 256);
        return ctx.getImageData(0, 0, 1, 256).data;
      }

      (function () {
        var palette = colorPalette([
          [0, "red"],
          [0.7, "orange"],
          [0.17, "yellow"],
          [0.22, "green"],
          [0.42, "cyan"],
          [0.82, "blue"],
          [0.9, "purple"],
        ]);

        // Canvas元素
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext("2d");
        var width = canvas.width,
          height = canvas.height;
        var start = Date.now();
        // 绘制方法
        var draw = function () {
          context.clearRect(0, 0, width, height);
          // 计算偏移
          var offset = Math.floor((Date.now() - start) / (3300 / 256)) % 256;
          context.fillStyle =
            "rgba(" +
            [
              palette[offset * 4 + 0],
              palette[offset * 4 + 1],
              palette[offset * 4 + 2],
              palette[offset * 4 + 3],
            ] +
            ")";
          context.arc(width / 2, height / 2, height / 2, 0, 2 * Math.PI);
          context.fill();
          // 持续变化
          requestAnimationFrame(draw);
        };
        draw();
      })();
    </script>
  </body>
</html>

登入後複製

复制下面链接在线看demo：
https://jsbin.com/piwihur/edit?html,js,output

cavans有些复杂，一时半会消化不了。之后再写详细的文章研究。Canvas主要优势是可以应对页面中多个动画元素渲染较慢的情况，完全通过javascript来渲染控制动画的执行。可用于实现较复杂动画

九、CSS3 transition/animation

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视频教程

以上是H5篇：頁面中實作動畫的幾種方式？（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！