整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
周在給學(xué)生講授JavaScript課程中setInterval方法時，想到了我們在網(wǎng)上看到的各類GIF動圖比較有意思，就將其引入到教學(xué)中，教學(xué)內(nèi)容設(shè)計如果通過HTML5與JavaScript實(shí)現(xiàn)網(wǎng)頁類似GIF效果的動態(tài)圖。于是在網(wǎng)上搜集了部分gif格式動圖，將每一個Gif動圖分解為一組jpg格式圖片，再采用setInterval與html5 Canvas進(jìn)行動畫的實(shí)現(xiàn)。通過學(xué)習(xí)可以讓學(xué)生進(jìn)一步了解canvas動畫實(shí)現(xiàn)的過程與原理。并將其發(fā)布到頭條，也希望對有興趣的初學(xué)者了解HTML5 Canvas等有所幫助。圖片分組圖片素材如下：
素材一
實(shí)現(xiàn)動畫的素材我們已經(jīng)給出，主要通過gif動圖導(dǎo)出一組圖片，下面對html5動畫實(shí)現(xiàn)過程進(jìn)行簡單說明。
實(shí)現(xiàn)其動畫的基本思路是通過HTML5提供的canvas元素進(jìn)行圖片的繪制與展示，借助setInterval方法實(shí)現(xiàn)間隔指定時間調(diào)用新的圖片實(shí)現(xiàn)重新繪圖。其中繪圖主要使用drawImage方法進(jìn)行繪圖，最終通過圖片依次重繪實(shí)現(xiàn)動畫效果。具體實(shí)現(xiàn)過程如下：
在頁面body部分添加Canva標(biāo)簽，設(shè)置其id屬性為canv，寬度為600，高度為400,編寫代碼描述如下圖：
添加畫布元素
canvas瀏覽效果
使用Canvas借助JavaScript提供的drawImage方法進(jìn)行繪圖，需要提供要繪制的圖片資源即繪圖的坐標(biāo)位置。該方法原型如下：
drawImage方法原型
因此我們需要加載圖片資源，本例由于需要調(diào)用多個img實(shí)現(xiàn)定時不同圖片的繪制，因此我們可以使用數(shù)組存儲所加載的圖片資源。本例圖片數(shù)量為14，因此我們數(shù)組長度為14。使用素組存儲圖片實(shí)現(xiàn)代碼如下：
加載圖片資源代碼
本例設(shè)計在頁面加載時自動播放動畫，因此需要在JavaScript腳本中添加頁面onload事件，在事件中編寫繪圖相關(guān)代碼，主要代碼包括獲取畫布canva與實(shí)例化繪圖對象context。部分代碼描述如下：
onload事件及繪圖初始化
使用setInterval方法實(shí)現(xiàn)動畫主要需要定義回調(diào)函數(shù)與回調(diào)函數(shù)觸發(fā)執(zhí)行的周期，本例中我們使用匿名函數(shù)作為回調(diào)函數(shù)，觸發(fā)周期設(shè)置為100毫秒。setInterval函數(shù)定義如下：
setInterval函數(shù)
在定義完函數(shù)之后可在其匿名函數(shù)函數(shù)體部分寫入繪圖方法dramImage(),實(shí)現(xiàn)周期調(diào)用不同圖片資源進(jìn)行繪圖，最終展示出動畫效果。為了保證循環(huán)調(diào)用14張圖片，我們需要設(shè)置一計數(shù)全局變量i，由于我們圖片采用數(shù)組存儲，下標(biāo)為數(shù)組，且從0-13進(jìn)行編號，因此當(dāng)計數(shù)值小于13時自動+1，指向下一數(shù)組下標(biāo)，當(dāng)為13時，設(shè)置計數(shù)值為0，回到數(shù)組第一元素，最終實(shí)現(xiàn)數(shù)組訪問下標(biāo)的循環(huán)。setInterval實(shí)現(xiàn)完整代碼如下：
setInterval完整代碼
HTML動畫效果展示
本頭條號長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！如需案例完整代碼請關(guān)注并私信，往期前端設(shè)計文章鏈接如下：
多特效代碼請?zhí)砑親TML5前端交流群581549454
廢話不多說，上代碼！
下面是兩段CSS代碼
lib.css
@charset 'utf-8';
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
background-image: -webkit-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -moz-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: -ms-linear-gradient(90deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
background-image: linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
perspective: 1000px;
}
.bg0 {
width: 500px;
height: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url(../images/bg0.png) no-repeat center center;
background-size: 150%;
}
.bg1 {
width: 100%;
height: 100%;
background: url(../images/bg1.png) no-repeat center center;
}
.hx-box {
top: 50%;
left: 50%;
width: 500px;
height: 500px;
transform-style: preserve-3d;
transform: translate(-50%, -50%) rotateY(75deg);
}
.hx-box ul {
width: 500px;
height: 500px;
transform-style: preserve-3d;
animation: hxz 20s linear infinite;
}
@keyframes hxz {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(-360deg);
}
}
.hx-box ul li {
width: 500px;
height: 500px;
border: 4px solid #5ec0ff;
border-radius: 1000px;
}
.hx-box ul li span {
display: block;
width: 100%;
height: 100%;
background: url(../images/hx.png) no-repeat center center;
background-size: 100% 100%;
animation: hx 4s linear infinite;
}
@keyframes hx {
to {
transform: rotate(360deg);
}
}
.hx-k2 {
transform: rotateX(60deg) rotateZ(60deg)
}
.hx-k3 {
transform: rotateX(-60deg) rotateZ(-60deg)
}
tabris.css
@charset 'utf-8';article,aside,details,figcaption,figure,footer,header,hgroup,hr,main,menu,nav,section,summary{display:block}hr,img{border:0}pre,textarea{overflow:auto}hr,legend,td,th{padding:0}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{color:#333;font-size:1em;line-height:1.42857143;font-family:Helvetica,'Hiragino Sans GB','Microsoft Yahei','微軟雅黑',Arial,sans-serif}body,form,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}ol,ul{padding-left:0;list-style-type:none}h1,h2,h3,h4,h5,h6{font-size:1em;font-weight:400}a{text-decoration:none;background-color:transparent;color:inherit}a:active,a:hover{outline:0}li{list-style:none}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}.vm,audio,canvas,iframe,img,svg,video{vertical-align:middle}audio:not([controls]){display:none;height:0}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:1px;border-top:1px solid #ccc;margin:1em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0}textarea{resize:vertical}table{border-collapse:collapse;border-spacing:0}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.dv{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.dv.dvv:active,.dv.dvv:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.dn{display:none}.db{display:block}.fix:after,.fix:before{content:" ";display:table}.fix:after{clear:both}.fl{float:left}.fr{float:right}.pr{position:relative}.pa,.pa0{position:absolute}.pa0{left:0;top:0}.oh{overflow:hidden}.wh{width:100%;height:100%}.bo{border:1px solid red}.mg{margin-left:auto;margin-right:auto}.tc{text-align: center;}.wp{margin:0 auto}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
網(wǎng)站格式代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">
<title>CSS3仿QQ瀏覽器官網(wǎng)彗星動畫背景特效</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel="stylesheet" href="css/tabris.css">
<link rel="stylesheet" href="css/lib.css">
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="bg0 pa">
<div></div>
</div>
<div class="hx-box pa">
<ul>
<li class="hx-k1 pa0">
<span></span>
</li>
<li class="hx-k2 pa0">
<span></span>
</li>
<li class="hx-k3 pa0">
<span></span>
</li>
</ul>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>適用瀏覽器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下瀏覽器。</p>
<p>來源：<a target="_blank">素材</a></p>
</div>
</body>
</html>
事實(shí)證明，F(xiàn)lash 已經(jīng)不再是互聯(lián)網(wǎng)視頻瀏覽的必需……新的開放標(biāo)準(zhǔn)已經(jīng)被創(chuàng)立，比如 HTML5 這樣的標(biāo)準(zhǔn)才會在移動設(shè)備和個人電腦上同樣取得成功。”
喬布斯在 2010年的公開信《關(guān)于 Flash 的一點(diǎn)思考》中說。
在這封公開信中，喬布斯是這樣解釋 HTML5 的：最新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，已經(jīng)為蘋果、谷歌等許多公司所采用，它允許開發(fā)者開發(fā)出更為高級的圖形、印刷和動畫，并且不需要第三方瀏覽器插件（如 Flash ）就能轉(zhuǎn)換。當(dāng)然，也正是蘋果和谷歌這樣的科技公司在推動著 HTML5、CSS 和 JavaScript 等開放標(biāo)準(zhǔn)的普及和發(fā)展。
有關(guān) HTML5 的優(yōu)勢，我在《HTML5是什么鬼？》也進(jìn)行過總結(jié)。
這是2016年朋友圈的新現(xiàn)象：不論是網(wǎng)頁邀請函，節(jié)日游戲，還是品牌廣告，那些被分享出來的 HTML5 頁面不斷嘗試著用更有意思、更流暢的方式來講述每一個事件。
過去一年，幾乎所有人——你的甲方，你最喜歡的品牌，你朋友任職的互聯(lián)網(wǎng)公司，都意識到了 HTML5 的作用。它不是一個簡單的網(wǎng)頁，而是能夠更加有效地組織互聯(lián)網(wǎng)中的信息，讓視頻、音頻等服務(wù)得到更好的支持；并在減輕開發(fā)者的負(fù)擔(dān)的同時，讓你在不同的平臺上有更一致的體驗(yàn)。
對于用戶來說，通過 HTML5 獲得了前所未有的體驗(yàn)，與品牌產(chǎn)生共鳴或是激起好奇心，這才是最重要的。
一個月前的天貓雙十一狂歡節(jié) HTML5 推廣頁面《穿越宇宙來看你》，在全景應(yīng)用的基礎(chǔ)之上，添加了上下滑動預(yù)覽節(jié)目單的功能，用戶在迅速到達(dá)天貓所在舞臺的過程中，還可以看到兩側(cè)會場的各種信息。
相比去年《2015，世界為誰傾倒？》不停180度翻轉(zhuǎn)手機(jī)的折騰，你會發(fā)現(xiàn)，2016年的HTML5頁面則更加簡單、粗暴。
225 張內(nèi)置素材，通過拍攝、合成、3D渲染等制作方式，最后以平面圖片的形式導(dǎo)出 HTML5 頁面，最終網(wǎng)站的總體量卻在5MB以內(nèi)。
Durex GO
杜蕾斯在七夕節(jié)開發(fā)出一款類《Pokemon Go》游戲《Durex GO》，只是將捕捉目標(biāo)更換成喜鵲。用戶在地圖上可以看到自己身邊的喜鵲，不同的喜鵲會在游戲進(jìn)行一段時間后，進(jìn)化為代金券、杜蕾斯產(chǎn)品或是酒店鑰匙等，捕捉成功的用戶可以將其兌換為相應(yīng)的產(chǎn)品。
一個 HTML5 的成功往往得益于更立體的視覺和聽覺感受，與用戶更有趣的互動，就像通過萬花筒來觀察世界一樣，為你呈現(xiàn)出前所未有的景象。
以此為理念，推陳出新的優(yōu)酷萬花筒 HTML5，用萬花筒的成像方式將每一類內(nèi)容中最具代表性的元素進(jìn)行合理地拆分，再重組。在英文中，Kaleidoscope（萬花筒）集合了希臘語 Kalos（美麗），Eidos（形狀）和 Scope（觀看）的意思，這也正是優(yōu)酷想要在這支萬花筒式的 HTML5 中想要傳遞的——豐富的色彩，多樣的表達(dá)。
你不會想到，僅僅在一個 HTML5 中，制作方就使用了 Web Graphics Library（Web GL）3D 繪圖標(biāo)準(zhǔn)完成繪制，它可以為 HTML5 Canvas 提供硬件3D加速渲染，有效地幫助Web開發(fā)人員借助系統(tǒng)顯卡來瀏覽器里更流暢地展示3D場景和模型，甚至是更為復(fù)雜的導(dǎo)航和數(shù)據(jù)的視覺化。
點(diǎn)擊閱讀原文體驗(yàn)這個 HTML5 前你可能還需要知道，它最終展現(xiàn)了優(yōu)酷的“煥新”計劃：如果曾經(jīng)的優(yōu)酷是一家視頻網(wǎng)站，那么現(xiàn)在的優(yōu)酷就要成為一家很酷的視頻網(wǎng)站。
在視頻漸漸成為互聯(lián)網(wǎng)內(nèi)容主流載體的時代到來時，作為用戶的你每時每刻都能夠知曉世界各地正在發(fā)生的事情，視頻幫助我們記錄每一個短暫的、偉大的時刻，也正是這些時刻，帶給你一次次的感動、震撼。
總之，你將逐漸看到一個嶄新的優(yōu)酷。
這個世界當(dāng)然很酷，優(yōu)酷正在做的是努力讓你看到這個很酷的世界、世界的每一面，就像在萬花筒中看到繽紛的顏色、妙不可言的幾何圖形，從內(nèi)心深處被打動。“煥新”計劃或許只是優(yōu)酷作為這個行業(yè)的一份子向前邁出的一小步，但這也讓作為用戶的你看到了，優(yōu)酷想要為你呈現(xiàn)一個更美好的世界的心愿。
一鏡到底的萬花筒，大劇熱綜都藏在里面了，點(diǎn)擊【閱讀原文】，打開音樂，用手指觸碰出一個更炫的世界。
烏 云 裝 扮 者
To see behind walls.To draw closer.To find
each other and to feel.That is the purpose of life.
世界、黑色趣味和明亮內(nèi)心
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
