關鍵幀與動畫 · uView-UI v2.x常見問題整理

# CSS關鍵幀與動畫 ## 動畫的原理即靜態圖片的快速切換，快到人眼分辨不出來的時候就可以產生連續移動動畫的效果。 ## 需要多快對于純靜態圖片來說，需要一秒切換三十張（游戲的CG），對于拍攝來說，需要一秒切換24張（電影）。因為攝像機拍出來的東西并不是純靜態的，它的每一幀包含有它的上一幀和下一幀的部分信息（比如如果說風扇再轉，拍攝出來的效果的每一張截圖都是模糊的，相反賽車游戲，你截屏的每一張都是清晰的風景壁紙） ## 幀通解即最小單元，這個概念在網絡上也同樣適用，在這里就是構成動畫的每一張靜態圖片。 ## 關鍵幀對于早期動畫來說，例如《大鬧天宮》，30幀的動畫幾乎每一幀都是畫出來的，但是現在在計算機的幫助下不需要了，計算機可以自動推算補幀，而你需要給出的是**關鍵幀**，關鍵幀與關鍵幀之間的動畫則由計算機自己腦補。比如第一個關鍵幀說盒子在左邊，第二個關鍵幀說盒子在右邊，那么計算機會自動補齊從左到右的移動過程。 ## 實戰一下 HTML部分 ```html <body> <div class="box"></div> </body> ``` 非常簡單，一個盒子就可以了 css部分 ```css // 設置背景顏色 body { background: #333; } .box { background: #fff; // 設置顯眼的顏色 width: 200px; // 固定寬，為了看的見 height: 200px; // 固定高，為了看的見 position: relative; // 相對定位 animation-name: myanimation; // 動畫名字，指定關鍵幀的名字就可以，細節在下面的定義 animation-duration: 4s; // 動畫持續時間，間接控制速率，越長越慢！ } // 定義關鍵幀 @keyframes myanimation { // 必須。在動畫開始時，關鍵幀的位置 0% { background: #fff; left: 0; top: 0; } // 在動畫四分之一時，關鍵幀的位置 25% { background: #f00; left: 300px; top: 0; } // 在動畫一半時，關鍵幀的位置 50% { background: #0f0; left: 300px; top: 300px; } // 在動畫四分之三時，關鍵幀的位置 75% { background: #00f; left: 0; top: 300px; } // 必須，在動畫結束時，關鍵幀的位置 100% { background: #fff; left: 0; top: 0; } } ``` 更多內容下個篇章見 > 本文作者：不愛喝橙子汁