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