前端实现动画效果

文章目录
  1. 1. css3的transition
  2. 2. css3的animation属性
  3. 3. Jquery的animate函数
  4. 4. 原生js动画
  5. 5. 插件
  6. 6. 使用canvas制作动画
  7. 7. 引用gif图片

css3的transition

抓住了所设置变化属性的起始态和完成态，通过设定的速度曲线来完成动画。可以涉及到各种变化的css属性，默认为all，则所有变化的属性都会在出发时，以动画的形式展现出来。这种动画方式是css3的，因此ie9以下是不支持的，其他的浏览器需要加前缀，并且只有两态，不支持自定义中间的状态。

语法：transition: property duration timing-function delay;

property:填写需要变化的css属性如：width,line-height,font-size,color等;
duration:完成过渡效果需要的时间（2s 或者2000ms）
timing-function:完成效果的速度曲线（linear匀速,ease从慢到快再到慢,ease-in慢慢变快,ease-out慢慢变慢等等）
timing-delay:动画效果的延迟触发时间（2s 或者2000ms）。
tips: transform是一种变化属性，该属性允许我们对元素进行旋转、缩放、移动或倾斜。可以作为transition中需要变化的属性。

1
2
3
4
5
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
transform:rotate(9deg);

css3的animation属性

使用animation属性制作动画可以更加灵活的设置动画帧，通过不同keyframe（动画帧）的设置，实现很多优雅的效果，keyframe中的百分数是动画完成总时间的比例。animation是设置总的动画效果，而keyframe中设置上相应的动画名字，然后在keyframe中设置具体的动画效果。当然由于是css3的属性，仍然需要注意它的兼容性，加上必须的前缀。
语法：animation: name duration timing-function delay iteration-count direction;
name:keyframe的名称，也就是定义了关键帧的动画的名称,这个名称用来区别不同的动画。
duration:完成动画所需要的时间（2s 或者 2000ms）
timing-function:完成动画的速度曲线
delay：动画开始之前的延迟
iteration-count：动画播放次数
direction：是否轮流反向播放动画（normal:正常顺序播放，alternate下一次反向播放）如果把动画设置为只播放一次，则该属性没有效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
div
  {
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
  }     
@keyframes mymove
{
  1% {left:0px;}
  20%{left:200px;}
  50% {left:300px;}
  100%{left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
  1% {left:0px;}
  20%{left:200px;}
  50% {left:300px;}
  100%{left:200px;}
}
</style>

Jquery的animate函数

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。可见通过jquery的animation生成动画的过程中可同时使用多个属性，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=，如（height:’+=150px’），还可以使用队列机制进行步骤式的动画,动画就会按照顺序一步一步实现，并且不用考虑兼容性，因为几乎都兼容。但是，animate函数只能够实现一些数值属性，能够实现的变化非常有限制，而且使用这个函数时还要配合stop来使用，在达到某条件时终止动画，设置比较复杂。
语法：$(selector).animate(styles,options)
styles:产生动画的css样式和值；
options={ speed:动画的速度（可选参数：slow,normal,fase） easing：动画的速度函数（可选参数：swing，linear） callback：动画完成之后要执行的函数； queue：是否放置在效果队列中，是布尔值，为false则立即开始 specialEasing:styles参数的一个或多个属性映射及对应的easing函数。}

1
2
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");

原生js动画

原生js动画利用js代码，将动画一步以函数的方式写出来，可以实现多种动画样式，而且可以自己做兼容性处理，自己设立每一步的动画效果，并且能够完成比较复杂的效果，但是代码量很大。setTimeOut\setTimeInterval。

插件

网上可以搜到很多封装好的动画插件，这些插件可以直接引入到页面中，通过初始化和配置的方式进行设定，直接在页面中展示动画。如：waves，textillate.js等等。

使用canvas制作动画

使用canvas在浏览器上画图，并且利用其api，制作动画。canvas使用的地方非常多，尤其是在制作h5小游戏上。同样都是使用编码的方式由前端开发工程师完成动画效果，canvas要比原生js效率高的多，流畅的多。通过画笔的方式，能够轻松的实现更多的动画效果。

引用gif图片

如果在需求特别紧急，而且动画又特别复杂的情况下，自己没有把握按时实现效果，或者代价太大，上gif图片吧，用户的体验是没有影响的~所以，别纠结。

参考: