先前文章《html5篇:實現頁面跳躍的5種方式(程式碼分享)》中,帶大家了解html5使用現頁面跳轉的5種方式。以下這篇文章給大家了解一下頁面中實現動畫的幾種方式,我們就來看看吧! !
wed的動畫實現多種多樣,隨著 H5 的發展,實現動畫的方式越來越多了。初步統計實現動畫的方式有以下一些方式實現。
通常咱們社交聊天的一些動態表情,大多都是gif動畫。 GIF(Graphics Interchange Format)的原義是“影像互換格式”,GIF 檔案的數據,是一種基於LZW演算法的連續色調的無損壓縮格式。其壓縮率一般在 50%左右,它不屬於任何應用。 GIF 格式可以存多幅彩色影像,如果把存於一個檔案中的多幅影像資料逐幅讀出並顯示到螢幕上,就可構成一種最簡單的動畫。 GIF分為靜態GIF和動畫GIF兩種,擴展名為.gif,是一種壓縮點陣圖格式,支援透明背景圖像,適用於多種作業系統,「體型」很小,網路上很多小動畫都是GIF格式,其實GIF是將多幅圖像保存為一個圖像文件,從而形成動畫,最常見的就是通過一幀幀的動畫串聯起來的搞笑gif圖,所以歸根結底GIF仍然是圖片文件格式。 GIF 製作方式可以透過PS製作,或透過圖片、影片、FLASH轉換
缺點:高清的 gif 體積較大。壓縮後的體檢較小的會失幀。交互差,實質上他就是一個會動的圖片。
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)中,您都可以獲得這種一致的體驗。
缺點:以瀏覽器外掛的形式來支援動畫,開發起來不那麼容易。了解下有這個東東就夠了哈 著作權歸作者所有。
原理:其主要想法是透過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 特性: 程式以開始,以結束,整個程式由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
#
標籤新增命名空間定義,新增一個< ;?import>
元素,以導入"time
"命名空間,新增定義"time
"類別的<style></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, 全称是“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 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></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></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></animatecolor>
颜色动画,因为 animate 能实现其功能,所以被废弃了。逝者已矣...
<animatetransform></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></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>
展示的时候是这个样子的
暂停和播放
// svg指当前svg DOM元素 // 暂停 svg.pauseAnimations(); // 重启动 svg.unpauseAnimations();
关于 svg 的之后再写文章详细介绍吧
七、Video
<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 | 设置视频播放器的宽度。 |
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来渲染控制动画的执行。可用于实现较复杂动画
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中文網其他相關文章!