导言

之前一直没有总结一下关于前端学习到的动画该怎么实现,这篇文章帮我自己总结一下。

基本概念

在学习动画之前, 我们得先了解一下关于动画的基本概念.

帧: 帧是动画的最小单位,一帧也就是一张图片,连续的帧就形成动画。
帧数: 帧数就是在 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>