移动web网页开发——动画
生活随笔
收集整理的這篇文章主要介紹了
移动web网页开发——动画
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、動(dòng)畫
1.1 動(dòng)畫
使用animation添加動(dòng)畫效果?
思考：過渡可以實(shí)現(xiàn)什么效果？
答：實(shí)現(xiàn)2個(gè)狀態(tài)間的變化過程
動(dòng)畫效果：實(shí)現(xiàn)多個(gè)狀態(tài)間的變化過程，動(dòng)畫過程可控（重復(fù)播放、最終畫面、是否暫停）
- 動(dòng)畫的本質(zhì)是快速切換大量圖片時(shí)在人腦中形成的具有連續(xù)性的畫面
- 構(gòu)成動(dòng)畫的最小單元：幀或動(dòng)畫幀?
1.2 動(dòng)畫的實(shí)現(xiàn)步驟
實(shí)現(xiàn)步驟
1、定義動(dòng)畫
兩個(gè)狀態(tài)之間的變化：
@keyframes 動(dòng)畫名稱 {from {}to {} }?多個(gè)狀態(tài)之間的變化：
@keyframes 動(dòng)畫名稱 {/* 百分比指的是動(dòng)畫時(shí)長(zhǎng)的百分比 */0% {}10% {}15% {}100% {} }?2、使用動(dòng)畫
animation:動(dòng)畫名稱 動(dòng)畫花費(fèi)時(shí)長(zhǎng);?
?1.3 動(dòng)畫屬性
animation: 動(dòng)畫名稱 動(dòng)畫時(shí)長(zhǎng) 速度曲線 延遲時(shí)間 重復(fù)次數(shù) 動(dòng)畫方向 執(zhí)行完畢時(shí)狀態(tài);注意：
- 動(dòng)畫名稱和動(dòng)畫時(shí)長(zhǎng)必須賦值
- 取值不分先后順序
- 如果有2個(gè)時(shí)間值，第一個(gè)時(shí)間表示動(dòng)畫時(shí)長(zhǎng)，第二個(gè)時(shí)間表示延遲時(shí)間
速度曲線
linear： 勻速
steps(n)：分步動(dòng)畫
?延遲時(shí)間
?重復(fù)次數(shù)
?動(dòng)畫方向alternate
帶有反方向執(zhí)行的效果
?執(zhí)行完畢之后的狀態(tài)
backwards:動(dòng)畫停留在最初的狀態(tài)
forwards:動(dòng)畫停留在最后的狀態(tài)
?animation復(fù)合屬性的拆分屬性（了解）
1.3 動(dòng)畫屬性
使用steps實(shí)現(xiàn)逐幀動(dòng)畫（配合精靈圖的動(dòng)畫都是逐幀動(dòng)畫，其他的全是補(bǔ)間動(dòng)畫）
| animation-timing-function | 速度曲線 | steps(數(shù)字) |
逐幀動(dòng)畫：幀動(dòng)畫。開發(fā)中，一般配合精靈圖實(shí)現(xiàn)動(dòng)畫效果
animation-timing-function:steps(N); 將動(dòng)畫過程等分成N份
?精靈動(dòng)畫制作步驟
- 準(zhǔn)備顯示區(qū)域
- 設(shè)置盒子尺寸是精靈圖中一張小圖的尺寸，背景圖為當(dāng)前精靈圖
- 定義動(dòng)畫
- 改變背景圖的位置（移動(dòng)的距離就是精靈圖的寬度）?
- 使用動(dòng)畫
- 添加速度曲線steps(N)，N與精靈圖上小圖的個(gè)數(shù)相同
- 添加無(wú)限重復(fù)效果?
?
多組動(dòng)畫
思考：如果想讓小人跑遠(yuǎn)一些，該如何實(shí)現(xiàn)？
答：精靈動(dòng)畫的同時(shí)添加盒子位移動(dòng)畫
animation:動(dòng)畫1,動(dòng)畫2,動(dòng)畫N ; <style>.box {/* 1680/12:保證顯示區(qū)域的尺寸和一個(gè)精靈小圖的大小相等 */width: 140px;height: 140px;border: 1px solid #000;background-image: url(./images/bg.png);animation:move 1s steps(12) infinite,run 1s forwards;}@keyframes move {/* from {background-position: 0 0;} */to {background-position: -1680px 0;}}@keyframes run {/* 動(dòng)畫的開始狀態(tài)和盒子的默認(rèn)樣式相同的，可以省略開始狀態(tài)的代碼 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style> <body><div class="box"></div> </body>案例——走馬燈
無(wú)縫動(dòng)畫
?原本是七張圖片 小框中一次能顯示三張圖片 如果是保持七張圖片的話，到了5、6、7張圖片時(shí)，再向左移后面會(huì)露白，所以后面再補(bǔ)上1、2、3張圖片 然后再?gòu)念^播放
<style>* {padding: 0;margin: 0;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {/* 十張圖片的寬度 */width: 2000px;animation: move 5s infinite linear;}.box li {float: left;}@keyframes move {to {transform: translateX(-1400px);}}.box:hover ul {animation-play-state: paused;}</style><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><!-- 防止第七張圖片放完了之后會(huì)留白 --><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div> </body>?
?綜合案例——全民出游記
注意點(diǎn)：
- 設(shè)置網(wǎng)頁(yè)背景大圖片的時(shí)候，要將html和body的高度都設(shè)置為100%，瀏覽器默認(rèn)高度是0
- 因?yàn)楸尘皥D的大小不可能和瀏覽器大小正好，所以要適量設(shè)置背景圖縮放background-size
總結(jié)
以上是生活随笔為你收集整理的移动web网页开发——动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： (14)雅思屠鸭第十四天：大作文优缺点类
- 下一篇： App定时提醒（AlarmManager