导言
之前一直没有总结一下关于前端学习到的动画该怎么实现,这篇文章帮我自己总结一下。
基本概念
在学习动画之前, 我们得先了解一下关于动画的基本概念.
- 帧: 帧是动画的最小单位,一帧也就是一张图片,连续的帧就形成动画。
- 帧数: 帧数就是在 1秒钟时间内传输的图片的多少。通常使用 FPS 表示。据说浏览器 60FPS是最好的。
- 帧时长: 即每一帧静止画面的停留时间,单位一般是ms(毫秒)。 1000 / 60 = 16.666 ms
实现方式
通过,我们前端实现动画有以下几种方式:
- js : 通过定时器( setTimeout , setlterval)来间隔改变元素样式。 或者使用 requestAnimationFrame
- css3 : tranistion ,animation 以及 transform
- html5 : 使用 H5 提供的绘图方式 (canvas , webgl, svg)
requestAnimationFrame
requestAnimation可以说是为 动画量身打造的 setTimeout, 不同的是, requestAnimationFrame 是跟着浏览器内建的刷新频率来执行回调函数,这就是浏览器实现动画的最佳效果。
<div id="demo"
style="position: absolute;width: 100px;height: 100px;background-color: #ccc;left: 0;top: 0;">
</div>
<script>
var demo = document.getElementById('demo');
function reader() {
demo.style.left = parseInt(demo.style.left) + 100 + 'px';// 每一帧向右移动1px
}
var requestID = requestAnimationFrame(function() {
reader();
// 当超过300px 后才停止
if(parseInt(demo.style.left) > 1300) demo.style.left = 0;
requestAnimationFrame(arguments.callee);
})
</script>
Transition
CSS中的 transition 属性允许块级元素中的属性在指定的时间内平滑的改变,简单看下语法规则:
transition : property duration timing-function delay
具体属性值介绍如下:
| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的CSS属性的名称。(none/all/property) |
| transition-duration | 规定完成过渡效果需要多少秒或者毫秒 |
| transition-timing-function | 规定速度效果的速度曲线 |
| transition-delay | 定义过渡效果何时开始。 |
<style>
.demo {
width: 100px;
height: 100px;
background-color: blue;
transition: width 1s ease ;
}
.demo:hover {
width: 300px;
}
</style>
<div class="demo"></div>
animation
类似于 transition ,CSS还提供了一个 animation 属性 ,不过区别于 transition , animation 作用于元素本身而不是样式属性, 可以使用关键帧的概念 , 更加强大。
animation : name duration timing-function delay iteration-count direction
| 值 | 描述 |
|---|---|
| animation-name | 规定需要绑定到选择器的keyframe 名称 |
| animation-duration | 规定完成动画所花费的时间,以秒或毫秒 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟 |
| animation-iteration-count | 规定动画应该播放的次数 |
| animation-direction | 规定是否应该轮流反向播放动画。(normal,alternate) |
.demo {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
<div class="demo"></div>
