溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下H5頁面中實(shí)現(xiàn)動(dòng)畫有哪些方式，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
通常咱們社交聊天的一些動(dòng)態(tài)表情，大多都是gif動(dòng)畫。GIF(Graphics Interchange Format)的原義是“圖像互換格式”，GIF 文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在 50%左右，它不屬于任何應(yīng)用程序。GIF 格式可以存多幅彩色圖像，如果把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡(jiǎn)單的動(dòng)畫。 GIF分為靜態(tài)GIF和動(dòng)畫GIF兩種，擴(kuò)展名為.gif，是一種壓縮位圖格式，支持透明背景圖像，適用于多種操作系統(tǒng)，“體型”很小，網(wǎng)上很多小動(dòng)畫都是GIF格式，其實(shí)GIF是將多幅圖像保存為一個(gè)圖像文件，從而形成動(dòng)畫，最常見的就是通過一幀幀的動(dòng)畫串聯(lián)起來的搞笑gif圖，所以歸根到底GIF仍然是圖片文件格式。 GIF 制作方式可以通過PS制作，或者通過圖片、視頻、FLASH轉(zhuǎn)換
缺點(diǎn)：高清的 gif 體積較大。壓縮后的體檢較小的會(huì)失幀。交互差，實(shí)質(zhì)上他就是一個(gè)會(huì)動(dòng)的圖片。
Flash非常強(qiáng)大，它們包含豐富的視頻、聲音、圖形和動(dòng)畫。利用Flash可以制作各種各樣非常華麗的動(dòng)畫，和視頻，但是由于各種原因，2012 年 8 月 15 日，F(xiàn)lash退出Android平臺(tái)，正式告別移動(dòng)端。2015 年 12 月 1 日，Adobe將動(dòng)畫制作軟Flashprofessional CC2015升級(jí)并改名為Animate CC 2015.5，從此與Flash技術(shù)劃清界限。 很早之前在各種企業(yè)門戶的首頁大圖輪播基本都是使用flash，早幾年 12306 的購票網(wǎng)站首頁的頂部的大圖也是用的flash，如今都換成了靜態(tài)的圖片。這種技術(shù)逐漸淡出了視野，只有在線視頻直播如 優(yōu)酷，愛奇藝等視頻網(wǎng)站。
缺點(diǎn)：基于 flash 播放器來播放，flash 播放器非常耗性能，經(jīng)常報(bào)各種漏洞。
SilverLight
Microsoft Silverlight是一個(gè)跨瀏覽器的、跨平臺(tái)的插件，是一種新的Web呈現(xiàn)技術(shù)，能在各種平臺(tái)上運(yùn)行。借助該技術(shù)，您將擁有內(nèi)容豐富、視覺效果絢麗的交互式體驗(yàn)，而且，無論是在瀏覽器內(nèi)、還是在桌面操作系統(tǒng)（如Windows和Apple Macintosh）中，您都可以獲得這種一致的體驗(yàn)。
缺點(diǎn)：以瀏覽器插件的形式來支持動(dòng)畫，開發(fā)起來不那么容易。了解下有這個(gè)東東就夠了哈 著作權(quán)歸作者所有。
原理：其主要思想是通過setInterval或setTimeout方法的回調(diào)函數(shù)來持續(xù)調(diào)用改變某個(gè)元素的CSS樣式以達(dá)到元素樣式變化的效果。
<!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í)現(xiàn)的。
缺點(diǎn)：javascript 實(shí)現(xiàn)動(dòng)畫通常會(huì)導(dǎo)致頁面頻繁性重排重繪，消耗性能，一般應(yīng)該在桌面端瀏覽器。在移動(dòng)端上使用會(huì)有明顯的卡頓
16ms 的問題：一般認(rèn)為人眼能辨識(shí)的流暢動(dòng)畫為每秒 60 幀，這里 16ms 比(1000ms/60)幀略小一些，但是一般可仍為該動(dòng)畫是流暢的。 在很多移動(dòng)端動(dòng)畫性能優(yōu)化時(shí)，一般使用 16ms 來進(jìn)行節(jié)流處理連續(xù)觸發(fā)的瀏覽器事件。例如對(duì)touchmove、scroll事件進(jìn)行節(jié)流等。通過這種方式減少持續(xù)事件的觸發(fā)頻率，可以大大提升動(dòng)畫的流暢性。
SMIL 特性： 程序以開始，以結(jié)束，整個(gè)程序由body和head兩個(gè)部分組成，SMIL要求其標(biāo)記和標(biāo)記的屬性必須小寫！有些標(biāo)記必須有一斜杠作為結(jié)束標(biāo)記，屬性值必須用雙引號(hào)括起來，SMIL文件的拓展名為*.smil或者*.smi。
<smil> <head></head> <body> <seq> <!-- 演示開始進(jìn)行2秒后開始顯示，持續(xù)播放5秒 --> <img src="1.jpg" dur="5s" begin="2" /> <!-- 演示開始進(jìn)行3秒后開始顯示，持續(xù)播放10秒 --> <img src="2.jpg" dur="10s" bengin="3" /> <!-- 演示開始進(jìn)行5秒后開始顯示，在整個(gè)演示播放40秒以后，就結(jié)束播放 --> <video src="test.rm" begin="5s" end="40s" /> <!-- 只播放視頻文件的第5秒到第10秒，重復(fù)播放2次 --> <video src="test.rm" clip-begin="5s" clip-end="10s" repeat="2" /> </seq> </body> </smil>
嵌入 html
向<html>標(biāo)簽添加命名空間定義，添加一個(gè)<?import>元素，以導(dǎo)入"time"命名空間，添加一個(gè)定義"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循環(huán)次數(shù) -->
<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。沒啥好說的
APNG, 全稱是“Animated Portable Network Graphics”, 是PNG的位圖動(dòng)畫擴(kuò)展，他和 gif 的區(qū)別在于：圖片質(zhì)量,gif最多支持 256 種顏色，不支持Alpha透明通道。可以稱之為色彩豐富支持Alpha透明通道體積大小和 gif 甚至更小的 gif。 2007 年 4 月 20日，PNG組織投票以 10:8 否決APNG進(jìn)入官方標(biāo)準(zhǔn)。也就是PNG不認(rèn)可他。
缺點(diǎn)：Chrome 59 之后，只有 IE 不支持。
APNG的制作：http://littlesvr.ca/apng/
SVG的動(dòng)畫元素是和SMIL開發(fā)組合作開發(fā)的。SMIL開發(fā)組和SVG開發(fā)組合作開發(fā)了SMIL動(dòng)畫規(guī)范，在規(guī)范中制定了一個(gè)基本的XML動(dòng)畫特征集合。SVG吸收了SMIL動(dòng)畫規(guī)范當(dāng)中的動(dòng)畫優(yōu)點(diǎn)，并提供了一些SVG繼承實(shí)現(xiàn)。
特性
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會(huì)有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
SVG animation最強(qiáng)大的地方在于：? 只要在頁面放幾個(gè)animate元素，沒有任何CSS, 沒有任何JS，頁面上的元素就像是沒吃草的馬兒一樣，愉快地跑起來了。你會(huì)發(fā)現(xiàn)，我勒個(gè)去，原來要實(shí)現(xiàn)個(gè)動(dòng)畫效果這么簡(jiǎn)單。什么CSS3動(dòng)畫，哪邊涼快哪邊呆著吧！
<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>此元素沒有動(dòng)畫效果,可以在特定時(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"> 測(cè)試 <!-- 3秒后把x值改為60 --> <set attributeName="x" attributeType="XML" to="60" begin="3s" /> </text> </g> </svg>
<animate>基礎(chǔ)動(dòng)畫元素。實(shí)現(xiàn)單屬性的動(dòng)畫過渡效果
<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"> 測(cè)試 <!-- 從0秒開始，總時(shí)長(zhǎ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)畫，因?yàn)?animate 能實(shí)現(xiàn)其功能，所以被廢棄了。逝者已矣...
<animateTransform>實(shí)現(xiàn) transform 變換動(dòng)畫效果的,與 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"> 測(cè)試 </text> <!-- 從0秒開始，總時(shí)長(zhǎng)3秒，變換類型為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 各種圖形沿著特定的 path 路徑運(yùn)動(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秒開始,總時(shí)長(zhǎng)3秒，不間斷循環(huán)，沿著路徑path運(yùn)動(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指當(dāng)前svg DOM元素 // 暫停 svg.pauseAnimations(); // 重啟動(dòng) svg.unpauseAnimations();
關(guān)于 svg 的之后再寫文章詳細(xì)介紹吧
七、Video
<video>是HTML 5的新標(biāo)簽
<video src="movie.ogg" controls="controls"> 您的瀏覽器不支持 video 標(biāo)簽。 </video>
相關(guān)屬性
canvas作為H5新增元素，是借助Web API來實(shí)現(xiàn)動(dòng)畫的。 結(jié)合setInterval或者requestAnimationFrame可以實(shí)現(xiàn)各種樣的動(dòng)畫，下面的例子展示了一個(gè) 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);
// 計(jì)算偏移
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();
// 持續(xù)變化
requestAnimationFrame(draw);
};
draw();
})();
</script>
</body>
</html>復(fù)制下面鏈接在線看demo：
https://jsbin.com/piwihur/edit?html,js,output
cavans有些復(fù)雜，一時(shí)半會(huì)消化不了。之后再寫詳細(xì)的文章研究。Canvas主要優(yōu)勢(shì)是可以應(yīng)對(duì)頁面中多個(gè)動(dòng)畫元素渲染較慢的情況，完全通過javascript來渲染控制動(dòng)畫的執(zhí)行?？捎糜趯?shí)現(xiàn)較復(fù)雜動(dòng)畫
transition
transition是過度動(dòng)畫。但是transition并不能實(shí)現(xiàn)獨(dú)立的動(dòng)畫，只能在某個(gè)標(biāo)簽元素樣式或狀態(tài)改變時(shí)進(jìn)行平滑的動(dòng)畫效果過渡，而不是馬上改變。
在移動(dòng)端開發(fā)中，直接使用transition動(dòng)畫會(huì)讓頁面變慢甚至卡頓。所以我們通常添加transform:translate3D(0,0,0)或transform:translateZ(0)來開啟移動(dòng)端動(dòng)畫的GPU加速，讓動(dòng)畫過程更加流暢。
animation
animation算是真正意義上的CSS3動(dòng)畫。通過對(duì)關(guān)鍵幀和循環(huán)次數(shù)的控制，頁面標(biāo)簽元素會(huì)根據(jù)設(shè)定好的樣式改變進(jìn)行平滑過渡。而且關(guān)鍵幀狀態(tài)的控制是通過百分比來控制的。
CSS3最大的優(yōu)勢(shì)是擺脫了js的控制，并且能利用硬件加速以及實(shí)現(xiàn)復(fù)雜動(dòng)畫效果。
有一篇文章做了簡(jiǎn)單的介紹，點(diǎn)這里
假如用CSS3來實(shí)現(xiàn)上面的Canvas7 彩顏色過渡的話，就非常簡(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;
}
}當(dāng)然并不是用CSS3做動(dòng)畫比Canvas牛逼，只是使用場(chǎng)景不一樣吧。 知道的就這些了，之后再補(bǔ)充吧。
以上是“H5頁面中實(shí)現(xiàn)動(dòng)畫有哪些方式”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼