中字幕一区二区三区乱码,自偷自拍亚洲综合精品

3-2 精靈動(dòng)畫的實(shí)現(xiàn)
收藏

第3章小男孩的動(dòng)作的分解
編程：3-1 布局的自適應(yīng)動(dòng)態(tài)調(diào)整
編程：3-2 精靈動(dòng)畫的實(shí)現(xiàn)
編程：3-3 走路的實(shí)現(xiàn)
編程：3-4 運(yùn)動(dòng)的狀態(tài)控制
編程：3-5 路徑動(dòng)畫的處理

第8章背景音樂
編程：8-1 HTML5 audio

精靈動(dòng)畫的實(shí)現(xiàn)

CSS Sprites在國內(nèi)很多人叫CSS精靈，其實(shí)這個(gè)技術(shù)不新鮮，原理就是：靠不斷的切換圖片讓人感覺視覺上不斷在變化，例如gif動(dòng)畫之類的效果

那么前端如何實(shí)現(xiàn)精靈效果？

傳統(tǒng)的就是靠定時(shí)器不斷去改變一個(gè)元素的background-image屬性了，簡(jiǎn)單的來說就是靠不斷的替換圖片，但是值得注意的問題就是圖片如果很多，加載會(huì)比較慢，會(huì)占用大量網(wǎng)絡(luò)資源

大多數(shù)的做法就是把圖片都合成一張大圖再利用CSS的以下屬性

background-image
background-repeat
background-position

組合進(jìn)行背景定位，background-position可以用數(shù)字精確的定位出背景圖片的位置

這里我將采用最新的CSS3的動(dòng)畫實(shí)現(xiàn)。通過 CSS3我們能夠創(chuàng)建動(dòng)畫，這可以在許多網(wǎng)頁中取代動(dòng)畫圖片、Flash 動(dòng)畫以及 JavaScript。

新增一個(gè)class類slowWalk，在這個(gè)類中定義一個(gè)animation，通過關(guān)鍵幀keyframes定義一些規(guī)則，就是如何取圖片坐標(biāo)

slowWalk樣式，用于定義一些動(dòng)畫參數(shù)，比如執(zhí)行的時(shí)間、方式、算法、次數(shù)等等
@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果

右邊代碼區(qū)域所示，為方便理解，解讀一下樣式的slowWalk類定義規(guī)則：

定義一個(gè)名為person-slow的@keyframes規(guī)則，@keyframes用百分比來規(guī)定變化發(fā)生的時(shí)間， 0% 是動(dòng)畫的開始，100% 是動(dòng)畫的完成，規(guī)則中有4個(gè)百分比值的變化，每個(gè)比值分別通過position獲取一張圖片，分別是0%,25%,50%,75%,100%。在950毫米內(nèi)從0%-100%發(fā)生4次變化，采用的算法是steps(1, start)一幀一幀的切換，通過設(shè)置infinite參數(shù)每950毫秒不斷循環(huán)

通過點(diǎn)擊開始動(dòng)畫按鈕，我們可以看到最終效果，完全靠CSS實(shí)現(xiàn)，非常nice!!!!

任務(wù)

打開index.html文件，在代碼的23行填入相應(yīng)代碼，通過定義個(gè)CCS3的樣式規(guī)則，讓人物開始進(jìn)行幀動(dòng)畫切換

    /*規(guī)定 @keyframes 動(dòng)畫的名稱。*/
    -webkit-animation-name: person-slow; 
    /*規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0*/
    -webkit-animation-duration: 950ms;
    /*規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。 infinite(循環(huán)播放)*/
    -webkit-animation-iteration-count: infinite;
    /*動(dòng)畫切換的方式是一幀一幀的改變*/
    -webkit-animation-timing-function: steps(1, start);
    -moz-animation-name: person-slow;
    -moz-animation-duration: 950ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: steps(1, start)

?不會(huì)了怎么辦

||

index.html
Swipe.js
pageA.css
style.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕課七夕主題</title> <link rel='stylesheet' href='style.css' /> <link rel='stylesheet' href='pageA.css' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="Swipe.js"></script> </head> <style type="text/css"> .charector { position: absolute; left: 6%; top: 55%; width: 151px; height: 291px; background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat; } .slowWalk { /* 填入動(dòng)畫樣式規(guī)則 */ } /* 普通慢走 */ @-webkit-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } @-moz-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } </style> <body> <div id='content'> <ul class='content-wrap'> <li> <div class="a_background"> <div class="a_background_top"></div> <div class="a_background_middle"></div> <div class="a_background_botton"></div> </div> </li> <li> 頁面2 </li> <li> 頁面3 </li> </ul> <div id="boy" class="charector"></div> <div class="button"> <button>點(diǎn)擊開始動(dòng)畫</button> </div> </div> <script type="text/javascript"> var swipe = Swipe($("#content")); // 獲取數(shù)據(jù) var getValue = function(className) { var $elem = $('' + className + ''); // 走路的路線坐標(biāo) return { height: $elem.height(), top: $elem.position().top }; } // 路的Y軸 var pathY = function() { var data = getValue('.a_background_middle'); return data.top + data.height / 2; }(); var $boy = $("#boy"); var boyHeight = $boy.height(); // 修正小男孩的正確位置 $boy.css({ top: pathY - boyHeight + 25 }); // ========================== // 增加精靈動(dòng)畫 // ========================== $('button').click(function(){ // 增加走路的CSS3關(guān)鍵幀規(guī)則 $boy.addClass('slowWalk'); }); </script> </body> </html>

///////// //頁面滑動(dòng) // ///////// /** * [Swipe description] * @param {[type]} container [頁面容器節(jié)點(diǎn)] * @param {[type]} options [參數(shù)] */ function Swipe(container) { // 獲取第一個(gè)子節(jié)點(diǎn) var element = container.find(":first"); var swipe = {}; // li頁面數(shù)量 var slides = element.find("li"); // 獲取容器尺寸 var width = container.width(); var height = container.height(); // 設(shè)置li頁面總寬度 element.css({ width: (slides.length * width) + 'px', height: height + 'px' }); // 設(shè)置每一個(gè)頁面li的寬度 $.each(slides, function(index) { var slide = slides.eq(index); // 獲取到每一個(gè)li元素 slide.css({ width: width + 'px', height: height + 'px' }); }); // 監(jiān)控完成與移動(dòng) swipe.scrollTo = function(x, speed) { // 執(zhí)行動(dòng)畫移動(dòng) element.css({ 'transition-timing-function' : 'linear', 'transition-duration' : speed + 'ms', 'transform' : 'translate3d(-' + x + 'px,0px,0px)' }); return this; }; return swipe; }

/*背景圖*/ .a_background { width: 100%; height: 100%; position: absolute; } .a_background_top{ width: 100%; height: 71.6%; background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png"); background-size: 100% 100%; } .a_background_middle{ width: 100%; height: 13.1%; background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png"); background-size: 100% 100%; } .a_background_botton{ width: 100%; height: 15.3%; background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png"); background-size: 100% 100%; }

* { padding: 0; margin: 0; } ul, li { list-style-type: none; } /*主體部分*/ #content { width: 100%; height: 100%; /* top: 20%; */ overflow: hidden; position: absolute; } .content-wrap { position: relative; } .content-wrap > li { float: left; overflow: hidden; position: relative; } button { width: 100px; height: 50px; } .button { position: absolute; bottom: 0; }

提問題

提交

其他問答

查看更多本節(jié)問答

寫筆記

公開筆記

提交

||

全屏

請(qǐng)驗(yàn)證，完成請(qǐng)求

由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求

打開微信掃碼自動(dòng)綁定

您還未綁定服務(wù)號(hào)

綁定后可得到

· 粉絲專屬優(yōu)惠福利
· 大咖直播交流干貨
· 課程更新,問題答復(fù)提醒
· 賬號(hào)支付安全提醒

使用 Ctrl+D 可將網(wǎng)站添加到書簽

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

3-2 精靈動(dòng)畫的實(shí)現(xiàn)

精靈動(dòng)畫的實(shí)現(xiàn)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

3-2 精靈動(dòng)畫的實(shí)現(xiàn)

熱搜

最近搜索清空

精靈動(dòng)畫的實(shí)現(xiàn)

任務(wù)

提問題

其他問答

寫筆記

您還未綁定服務(wù)號(hào)

收藏課程后，能更快找到我哦～

手記推薦