Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod)-Tutorial H5-php.cn

Dalam artikel sebelumnya "html5: 5 cara untuk melaksanakan lompatan halaman (perkongsian kod) ", saya akan menunjukkan kepada anda 5 cara menggunakan html5 untuk melompat ke halaman semasa. Artikel berikut akan memberi anda idea tentang beberapa cara untuk melaksanakan animasi pada halaman. !

Rabu mempunyai pelbagai pelaksanaan animasi Dengan pembangunan H5, terdapat lebih banyak cara untuk melaksanakan animasi. Perangkaan awal menunjukkan cara-cara melaksanakan animasi adalah seperti berikut.

1. Animasi GIF

Biasanya beberapa ekspresi dinamik dalam sembang sosial kami kebanyakannya animasi GIF. Maksud asal GIF (Graphics Interchange Format) ialah "Format Pertukaran Imej". Data fail GIF ialah format pemampatan tanpa kehilangan nada berterusan berdasarkan algoritma LZW. Kadar mampatannya biasanya sekitar 50%, dan ia bukan milik mana-mana aplikasi. Format GIF boleh menyimpan berbilang imej berwarna Jika berbilang data imej yang disimpan dalam fail dibacakan satu persatu dan dipaparkan pada skrin, salah satu animasi yang paling mudah boleh dibentuk. GIF terbahagi kepada dua jenis: GIF statik dan GIF animasi Sambungan ialah .gif Ia adalah format bitmap termampat yang menyokong imej latar belakang telus dan sesuai untuk pelbagai sistem pengendalian animasi kecil di Internet adalah Format GIF, sebenarnya, GIF menyimpan berbilang imej ke dalam satu fail imej untuk membentuk animasi yang paling biasa ialah gambar gif lucu yang disambungkan melalui bingkai animasi, jadi dalam analisis akhir, GIF adalah masih dalam format fail gambar. Pengeluaran GIF boleh dilakukan melalui PS, atau melalui penukaran imej, video atau FLASH

Kelemahan: Gif definisi tinggi bersaiz lebih besar. Pemeriksaan fizikal termampat akan kehilangan bingkai jika ia lebih kecil. Interaksi adalah buruk.

2. Animasi FLASH / SilverLight FLASH

Flash sangat berkuasa, ia mengandungi video, bunyi, grafik dan animasi yang kaya. Flash boleh digunakan untuk mencipta pelbagai animasi dan video yang sangat cantik Namun, atas pelbagai sebab, Flash keluar dari platform Android pada 15 Ogos 2012 dan secara rasmi mengucapkan selamat tinggal kepada terminal mudah alih. Pada 1 Disember 2015, Adobe telah menaik taraf perisian pengeluaran animasi Flashprofessional CC2015 dan menamakan semula Animate CC 2015.5, sekali gus melukis garisan yang jelas dengan teknologi Flash. Dahulu kala, karusel imej besar di laman utama pelbagai portal korporat pada asasnya menggunakan kilat Pada tahun-tahun awal, imej besar di bahagian atas laman web pembelian tiket 12306 juga menggunakan kilat Kini semuanya digantikan dengan imej statik. Teknologi ini telah beransur-ansur hilang dari pandangan, dan hanya siaran langsung video dalam talian seperti Youku, iQiyi dan tapak web video lain tersedia.

Kelemahan: Ia dimainkan berdasarkan pemain denyar sangat memakan prestasi dan sering melaporkan pelbagai kelemahan.

SilverLight

Microsoft Silverlight ialah pemalam silang pelayar, pemalam merentas platform dan teknologi pemaparan web baharu , boleh dijalankan pada pelbagai platform. Dengan teknologi ini, anda mempunyai pengalaman interaktif yang kaya dan menakjubkan secara visual yang konsisten sama ada dalam penyemak imbas atau merentas sistem pengendalian desktop seperti Windows dan Apple Macintosh .

Kelemahan: Menyokong animasi dalam bentuk pemalam penyemak imbas bukanlah mudah untuk dibangunkan. Ia cukup untuk memahami bahawa perkara ini ada di sana Hak cipta milik pengarang.

3. HTML Javascript

Prinsip: Idea utama adalah untuk terus memanggil dan menukar gaya CSS sesuatu elemen melalui fungsi panggil balik kaedah setInterval atau setTimeout untuk mencapai kesan gaya elemen berubah.

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

Salin selepas log masuk

Kaedah animate() Jquery dilaksanakan dengan cara ini.

Kelemahan: Melaksanakan animasi dalam JavaScript biasanya menghasilkan pengaliran semula dan lukis semula halaman yang kerap, yang menggunakan prestasi biasanya dalam penyemak imbas desktop. Akan terdapat ketinggalan yang jelas apabila digunakan pada terminal mudah alih

Masalah 16ms: Secara umumnya dipercayai bahawa animasi licin yang boleh dikenali oleh mata manusia ialah 60 bingkai sesaat, di sini nisbah 16ms (1000ms/60) Bingkainya lebih kecil sedikit, tetapi animasi umumnya masih lancar. Apabila mengoptimumkan prestasi banyak animasi mudah alih, 16ms biasanya digunakan untuk pendikit dan memproses peristiwa penyemak imbas yang dicetuskan secara berterusan. Contohnya, pendikitan gerakan sentuh dan acara tatal. Dengan mengurangkan kekerapan mencetuskan peristiwa berterusan dengan cara ini, kelancaran animasi boleh dipertingkatkan dengan lebih baik.

4. SMIL

Ciri-ciri SMIL: Program bermula dengan dan berakhir dengan Keseluruhan program terdiri daripada dua bahagian: badan dan kepala SMIL memerlukan tag dan atribut tagnya mestilah huruf kecil. Sesetengah teg mesti mempunyai garis miring sebagai teg penutup, nilai atribut mesti disertakan dalam petikan berganda dan sambungan fail SMIL ialah *.smil atau *.smi.

<smil>
  <head></head>

  <body>
    <seq>
      <!-- 演示开始进行2秒后开始显示，持续播放5秒 -->
      <img  src="1.jpg" dur="5s" begin="2" / alt="Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod)" >
      <!-- 演示开始进行3秒后开始显示，持续播放10秒 -->
      <img  src="2.jpg" dur="10s" bengin="3" / alt="Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod)" >
      <!-- 演示开始进行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>

Salin selepas log masuk

Benamkan html

Tambah takrif ruang nama pada teg <html>, tambahkan elemen <?import> untuk mengimport "time" ruang nama, tambah elemen time yang mentakrifkan kelas "<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="Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod)" >
      <img  class="time" src="image2.jpg" dur="3s" / alt="Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod)" >
    </time:seq>
  </body>
</html>

Salin selepas log masuk

Kelemahan: Anda boleh melihat sekilas pandang bahawa ia hanya menyokong IE. Tiada apa-apa untuk dikatakan

五、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>

Salin selepas log masuk

元素

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

展示的时候是这个样子的

Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod)

暂停和播放

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

// 重启动
svg.unpauseAnimations();

Salin selepas log masuk

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

七、Video

<video>是HTML 5的新标签

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

Salin selepas log masuk

属性	值	描述
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>

Salin selepas log masuk

复制下面链接在线看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;
  }
}

Salin selepas log masuk

当然并不是用CSS3做动画比Canvas牛逼，只是使用场景不一样吧。知道的就这些了，之后再补充吧。

[完]

推荐学习：SVG视频教程

Atas ialah kandungan terperinci Artikel H5: Berapa banyak cara untuk melaksanakan animasi pada halaman? (dengan kod). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!