国产成人精品18p,天天干成人网,无码专区狠狠躁天天躁,美女脱精光隐私扒开免费观看

H5頁(yè)面中實(shí)現動(dòng)畫(huà)有哪些方式

發(fā)布時(shí)間：2021-09-04 11:55 來(lái)源：億速云閱讀：0 作者：小新欄目：開(kāi)發(fā)技術(shù)

小編給大家分享一下H5頁(yè)面中實(shí)現動(dòng)畫(huà)有哪些方式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、GIF 動(dòng)畫(huà)

通常咱們社交聊天的一些動(dòng)態(tài)表情，大多都是gif動(dòng)畫(huà)。GIF(Graphics Interchange Format)的原義是“圖像互換格式”，GIF 文件的數據，是一種基于LZW算法的連續色調的無(wú)損壓縮格式。其壓縮率一般在 50%左右，它不屬于任何應用程序。GIF 格式可以存多幅彩色圖像，如果把存于一個(gè)文件中的多幅圖像數據逐幅讀出并顯示到屏幕上，就可構成一種最簡(jiǎn)單的動(dòng)畫(huà)。 GIF分為靜態(tài)GIF和動(dòng)畫(huà)GIF兩種，擴展名為.gif，是一種壓縮位圖格式，支持透明背景圖像，適用于多種操作系統，“體型”很小，網(wǎng)上很多小動(dòng)畫(huà)都是GIF格式，其實(shí)GIF是將多幅圖像保存為一個(gè)圖像文件，從而形成動(dòng)畫(huà)，最常見(jiàn)的就是通過(guò)一幀幀的動(dòng)畫(huà)串聯(lián)起來(lái)的搞笑gif圖，所以歸根到底GIF仍然是圖片文件格式。 GIF 制作方式可以通過(guò)PS制作，或者通過(guò)圖片、視頻、FLASH轉換

缺點(diǎn)：高清的 gif 體積較大。壓縮后的體檢較小的會(huì )失幀。交互差，實(shí)質(zhì)上他就是一個(gè)會(huì )動(dòng)的圖片。

二、FLASH 動(dòng)畫(huà) / SilverLight FLASH

Flash非常強大，它們包含豐富的視頻、聲音、圖形和動(dòng)畫(huà)。利用Flash可以制作各種各樣非常華麗的動(dòng)畫(huà)，和視頻，但是由于各種原因，2012 年 8 月 15 日，Flash退出Android平臺，正式告別移動(dòng)端。2015 年 12 月 1 日，Adobe將動(dòng)畫(huà)制作軟Flashprofessional CC2015升級并改名為Animate CC 2015.5，從此與Flash技術(shù)劃清界限。很早之前在各種企業(yè)門(mén)戶(hù)的首頁(yè)大圖輪播基本都是使用flash，早幾年 12306 的購票網(wǎng)站首頁(yè)的頂部的大圖也是用的flash，如今都換成了靜態(tài)的圖片。這種技術(shù)逐漸淡出了視野，只有在線(xiàn)視頻直播如優(yōu)酷，愛(ài)奇藝等視頻網(wǎng)站。

缺點(diǎn)：基于 flash 播放器來(lái)播放，flash 播放器非常耗性能，經(jīng)常報各種漏洞。

SilverLight

Microsoft Silverlight是一個(gè)跨瀏覽器的、跨平臺的插件，是一種新的Web呈現技術(shù)，能在各種平臺上運行。借助該技術(shù)，您將擁有內容豐富、視覺(jué)效果絢麗的交互式體驗，而且，無(wú)論是在瀏覽器內、還是在桌面操作系統（如Windows和Apple Macintosh）中，您都可以獲得這種一致的體驗。

缺點(diǎn)：以瀏覽器插件的形式來(lái)支持動(dòng)畫(huà)，開(kāi)發(fā)起來(lái)不那么容易。了解下有這個(gè)東東就夠了哈著(zhù)作權歸作者所有。

三、Javascript + HTML

原理：其主要思想是通過(guò)setInterval或setTimeout方法的回調函數來(lái)持續調用改變某個(gè)元素的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()方法就是這種方式實(shí)現的。

缺點(diǎn)：javascript 實(shí)現動(dòng)畫(huà)通常會(huì )導致頁(yè)面頻繁性重排重繪，消耗性能，一般應該在桌面端瀏覽器。在移動(dòng)端上使用會(huì )有明顯的卡頓

16ms 的問(wèn)題：一般認為人眼能辨識的流暢動(dòng)畫(huà)為每秒 60 幀，這里 16ms 比(1000ms/60)幀略小一些，但是一般可仍為該動(dòng)畫(huà)是流暢的。在很多移動(dòng)端動(dòng)畫(huà)性能優(yōu)化時(shí)，一般使用 16ms 來(lái)進(jìn)行節流處理連續觸發(fā)的瀏覽器事件。例如對touchmove、scroll事件進(jìn)行節流等。通過(guò)這種方式減少持續事件的觸發(fā)頻率，可以大大提升動(dòng)畫(huà)的流暢性。

四、SMIL

SMIL 特性：程序以開(kāi)始，以結束，整個(gè)程序由body和head兩個(gè)部分組成，SMIL要求其標記和標記的屬性必須小寫(xiě)！有些標記必須有一斜杠作為結束標記，屬性值必須用雙引號括起來(lái)，SMIL文件的拓展名為*.smil或者*.smi。

<smil>
  <head></head>

  <body>
    <seq>
      <!-- 演示開(kāi)始進(jìn)行2秒后開(kāi)始顯示，持續播放5秒 -->
      <img src="1.jpg" dur="5s" begin="2" />
      <!-- 演示開(kāi)始進(jìn)行3秒后開(kāi)始顯示，持續播放10秒 -->
      <img src="2.jpg" dur="10s" bengin="3" />
      <!-- 演示開(kāi)始進(jìn)行5秒后開(kāi)始顯示，在整個(gè)演示播放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>標簽添加命名空間定義，添加一個(gè)<?import>元素，以導入"time"命名空間，添加一個(gè)定義"time"類(lèi)的<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循環(huán)次數 -->
    <time:seq repeatCount="indefinite">
      <img class="time" src="image1.jpg" dur="3s" />
      <img class="time" src="image2.jpg" dur="3s" />
    </time:seq>
  </body>
</html>

缺點(diǎn)：一看就知道只支持 IE。沒(méi)啥好說(shuō)的

五、APNG

APNG, 全稱(chēng)是“Animated Portable Network Graphics”, 是PNG的位圖動(dòng)畫(huà)擴展，他和 gif 的區別在于：圖片質(zhì)量,gif最多支持 256 種顏色，不支持Alpha透明通道?？梢苑Q(chēng)之為色彩豐富支持Alpha透明通道體積大小和 gif 甚至更小的 gif。 2007 年 4 月 20日，PNG組織投票以 10:8 否決APNG進(jìn)入官方標準。也就是PNG不認可他。

缺點(diǎn)：Chrome 59 之后，只有 IE 不支持。

APNG的制作：http://littlesvr.ca/apng/

六、Javascript + SVG

SVG的動(dòng)畫(huà)元素是和SMIL開(kāi)發(fā)組合作開(kāi)發(fā)的。SMIL開(kāi)發(fā)組和SVG開(kāi)發(fā)組合作開(kāi)發(fā)了SMIL動(dòng)畫(huà)規范，在規范中制定了一個(gè)基本的XML動(dòng)畫(huà)特征集合。SVG吸收了SMIL動(dòng)畫(huà)規范當中的動(dòng)畫(huà)優(yōu)點(diǎn)，并提供了一些SVG繼承實(shí)現。

特性

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來(lái)定義用于網(wǎng)絡(luò )的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì )有所損失
SVG 是萬(wàn)維網(wǎng)聯(lián)盟的標準
SVG 與諸如 DOM 和 XSL 之類(lèi)的 W3C 標準是一個(gè)整體

SVG animation最強大的地方在于：? 只要在頁(yè)面放幾個(gè)animate元素，沒(méi)有任何CSS, 沒(méi)有任何JS，頁(yè)面上的元素就像是沒(méi)吃草的馬兒一樣，愉快地跑起來(lái)了。你會(huì )發(fā)現，我勒個(gè)去，原來(lái)要實(shí)現個(gè)動(dòng)畫(huà)效果這么簡(jiǎn)單。什么CSS3動(dòng)畫(huà)，哪邊涼快哪邊呆著(zhù)吧！

<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>此元素沒(méi)有動(dòng)畫(huà)效果,可以在特定時(shí)間之后修改某個(gè)屬性值（也可以是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>基礎動(dòng)畫(huà)元素。實(shí)現單屬性的動(dòng)畫(huà)過(guò)渡效果

<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秒開(kāi)始，總時(shí)長(cháng)3秒，x值從160到60，（repeatCount）不間斷循環(huán) -->
      <animate
        attributeName="x"
        from="160"
        to="60"
        begin="0s"
        dur="3s"
        repeatCount="indefinite"
      />
    </text>
  </g>
</svg>

<animateColor>顏色動(dòng)畫(huà)，因為 animate 能實(shí)現其功能，所以被廢棄了。逝者已矣...

<animateTransform>實(shí)現 transform 變換動(dòng)畫(huà)效果的,與 CSS3 的 transform 變換是一個(gè)套路

<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秒開(kāi)始，總時(shí)長(cháng)3秒，變換類(lèi)型為scale（縮放），值從1到1.5，repeatCount）不間斷循環(huán)  -->
    <animateTransform
      attributeName="transform"
      begin="0s"
      dur="3s"
      type="scale"
      from="1"
      to="1.5"
      repeatCount="indefinite"
    />
  </g>
</svg>

<animateMotio>元素可以讓 SVG 各種圖形沿著(zhù)特定的 path 路徑運動(dòng)~

<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">
    動(dòng)
    <!-- 從0秒開(kāi)始,總時(shí)長(cháng)3秒，不間斷循環(huán)，沿著(zhù)路徑path運動(dòng) -->
    <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>

展示的時(shí)候是這個(gè)樣子的

暫停和播放

// svg指當前svg DOM元素
// 暫停
svg.pauseAnimations();

// 重啟動(dòng)
svg.unpauseAnimations();

關(guān)于 svg 的之后再寫(xiě)文章詳細介紹吧

七、Video

<video>是HTML 5的新標簽

<video src="movie.ogg" controls="controls">
  您的瀏覽器不支持 video 標簽。
</video>

相關(guān)屬性

八、Javascript + Canvas

canvas作為H5新增元素，是借助Web API來(lái)實(shí)現動(dòng)畫(huà)的。結合setInterval或者requestAnimationFrame可以實(shí)現各種樣的動(dòng)畫(huà)，下面的例子展示了一個(gè) 7 色圓的顏色過(guò)度

<!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>

復制下面鏈接在線(xiàn)看demo：
https://jsbin.com/piwihur/edit?html,js,output

cavans有些復雜，一時(shí)半會(huì )消化不了。之后再寫(xiě)詳細的文章研究。Canvas主要優(yōu)勢是可以應對頁(yè)面中多個(gè)動(dòng)畫(huà)元素渲染較慢的情況，完全通過(guò)javascript來(lái)渲染控制動(dòng)畫(huà)的執行?？捎糜趯?shí)現較復雜動(dòng)畫(huà)

九、CSS3 transition/animation

transition

transition是過(guò)度動(dòng)畫(huà)。但是transition并不能實(shí)現獨立的動(dòng)畫(huà)，只能在某個(gè)標簽元素樣式或狀態(tài)改變時(shí)進(jìn)行平滑的動(dòng)畫(huà)效果過(guò)渡，而不是馬上改變。

在移動(dòng)端開(kāi)發(fā)中，直接使用transition動(dòng)畫(huà)會(huì )讓頁(yè)面變慢甚至卡頓。所以我們通常添加transform:translate3D(0,0,0)或transform:translateZ(0)來(lái)開(kāi)啟移動(dòng)端動(dòng)畫(huà)的GPU加速，讓動(dòng)畫(huà)過(guò)程更加流暢。

animation

animation算是真正意義上的CSS3動(dòng)畫(huà)。通過(guò)對關(guān)鍵幀和循環(huán)次數的控制，頁(yè)面標簽元素會(huì )根據設定好的樣式改變進(jìn)行平滑過(guò)渡。而且關(guān)鍵幀狀態(tài)的控制是通過(guò)百分比來(lái)控制的。

CSS3最大的優(yōu)勢是擺脫了js的控制，并且能利用硬件加速以及實(shí)現復雜動(dòng)畫(huà)效果。

有一篇文章做了簡(jiǎn)單的介紹，點(diǎn)這里

假如用CSS3來(lái)實(shí)現上面的Canvas7 彩顏色過(guò)渡的話(huà)，就非常簡(jiǎn)單了

@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做動(dòng)畫(huà)比Canvas牛逼，只是使用場(chǎng)景不一樣吧。知道的就這些了，之后再補充吧。

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系QQ:712375056 進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。

上一篇新聞：
上一篇：如何使用CSS3實(shí)現動(dòng)畫(huà)效果
下一篇新聞：
下一篇：xmlplus組件設計之按鈕的示例分析

優(yōu)惠

云主機8折虛擬主機6折

紅包可用于（云服務(wù)器、高防服務(wù)器、裸金屬服務(wù)器、高防IP、云數據庫、CDN加速）購買(mǎi)和續費

領(lǐng)取優(yōu)惠卷

Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技特網(wǎng)云版權所有　珠海市特網(wǎng)科技有限公司　粵ICP備16109289號

域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)）域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司中國互聯(lián)網(wǎng)舉報中心增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2

建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站

QQ咨詢(xún)
請選擇客服進(jìn)行咨詢(xún)
微信咨詢(xún)
電話(huà)咨詢(xún)
請選擇客服進(jìn)行咨詢(xún)
- 0756-2113031
備案
工單
TOP

少妇厨房愉情理伦BD在线观看| 天堂一区人妻无码| 在线精品自偷自拍无码中文| 中国女人和老外的毛片| 又大又粗欧美成人网站| 久久久久99精品成人片三人毛片|