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