关键帧与动画 · 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; } } ``` 更多内容下个篇章见 > 本文作者：不爱喝橙子汁