需求中常见的css3动画

需求中常见的css3动画一般有补间动画(又叫“关键帧动画”)逐帧动画两种,下面分别介绍:

  1. 补间动画/关键帧动画:
    常用于实现位移、颜色(透明度)、大小、旋转、倾斜等变化。一般有TransitionsKeyframes animation两种方法实现补间动画。
    Transitions:用于实现简单的动画,只有起始两帧过渡。多用于页面的交互操作,使交互效果更生动活泼。

    CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。
    这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

    Keyframes animation:用于实现较为复杂的动画,一般关键帧较多。

    设置动画的关键帧规则。
    animationtiming-function设置为easelinearcubic-bezier,它会在每个关键帧之间插入补间动画,产生具有连贯性的动画。

  2. 逐帧动画:

    animation的timing-function默认值为ease,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的。
    除了easelinearcubic-bezier之类的过渡函数都会为其插入补间。
    有些效果不需要补间,只需要关键帧之间的跳跃,这时应该使用steps过渡方式。

    更多详细用法请查看:HTML" target="_blank" rel="external"style="margin: 0px; padding: 0px; border: 0px; outline: 0px; font-style: inherit; font-family: inherit; vertical-align: baseline; color: rgb(51, 51, 51);">《深入理解CSS3 Animation 帧动画》。
    逐帧动画可用于loading动画,但更多的用于Sprite精灵动画(人物运动)。精灵动画把所有帧都放在一起,通过CSS3的animation控制background-position

    下面看一个精灵动画的例子:

    [逐帧动画示例]

    (案例:拍拍无聊者联盟宣传页)

    steps的参数有几个坑,需要特别留意:
    第一个参数number为指定的间隔数,指的是把两个关键帧之间的动画分为n步阶段性展示,而不是keyframes写的变化次数。
    我们将上述案例中hand部分作为例子:由雪碧图可知,手部的摆动一种有两种状态,故keyframes需要写两帧:

    1
    2
    3
    4
    @-webkit-keyframes wave{
    0%{background-position:0 0;}
    50%{background-position:100% 0;}
    }

    设置不同的number值:

    1
    2
    3
    4
    /*将`number`设置为2*/
    .active.share3 .hand{
    -webkit-animation: wave steps(2,end) 2s forwards infinite;
    }
    1
    2
    3
    4
    /*将`number`设置为1*/
    .active.share3 .hand{
    -webkit-animation: wave steps(1,end) 2s forwards infinite;
    }

    [steps中的坑]

    (左图:number为2;右图:number为1)

    第二个参数可选,接受startend两个值:指定在每个间隔的起点或是终点发生阶跃变化。通过W3C中的一张step的工作机制图可以理解:

    [steps中的坑]

    (图片来源:W3C)

    TIPS:

    step-start等同于steps(1,start):动画执行时为开始左侧端点的部分为开始;
    step-end等同于steps(1,end):动画执行时以结尾端点为开始,默认值为end。

    最后安利一个计算帧数的工具:CSS3动画帧数计算器

CSS动画的优缺点

  1. 优点:

    简单、高效
    声明式的
    不依赖于主线程,采用硬件加速(GPU)
    简单的控制keyframe animation播放和暂停

  2. 缺点:

    不能动态修改或定义动画内容
    不同的动画无法实现同步
    多个动画彼此无法堆叠

简单做动画:

总结一下在之前做动画需求时的经验,归纳为以下7个步骤。以此需求为例:

[简单做动画]

(案例:iphone6s推广游戏)

  1. 观察——哪些元素可以动?元素可以怎么动?

    根据视觉稿,分析标题、按钮、人物、背景都可以适当加动画元素。

  2. 沟通——了解设计师的想法,并提出自己的想法。

    这是设计师给出的大致动画过程,具体的过渡及动效没有明确给出,因此可以根据自己的想法与设计师进行沟通。

    [沟通]

  3. 分析——分析动画元素的层次(出现顺序);画出动画时间轴;根据时间轴写出CSS动画时间轴。
    分析该页面动画的出现可以分为四个层次:

    [分析]

    根据前面的分析画出动画时间轴:

    [分析]

    根据时间轴写出CSS动画时间轴:
    方法一:将所有动画元素放在一个时间轴上(适合于元素较少的情况)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    a0{-webkit-animation: a0 2s forwards;}
    @-webkit-keyframes a0{
    0%{……}
    30%{……}
    }
    a1{-webkit-animation: a1 2s forwards;}
    @-webkit-keyframes a1{
    0%,30%{……}
    50%{……}
    }
    a2{-webkit-animation: a2 2s forwards;}
    @-webkit-keyframes a2{
    0%,50%{……}
    75%{……}
    }
    a3{-webkit-animation: a3 2s forwards;}
    @-webkit-keyframes a3{
    0%,75%{……}
    100%{……}
    }

    方法二:同一阶段的动画元素放在一个时间轴上。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    a0{-webkit-animation: a0 0.6s forwards;}
    @-webkit-keyframes a0{
    0%{……}
    100%{……}
    }
    a1{-webkit-animation: a1 0.4s 0.6s forwards;}
    @-webkit-keyframes a1{
    0%{……}
    100%{……}
    }
    a2{-webkit-animation: a2 0.5s 1s forwards;}
    @-webkit-keyframes a2{
    0%{……}
    100%{……}
    }
    a3{-webkit-animation: a3 0.5s 1.5s forwards;}
    @-webkit-keyframes a3{
    0%{……}
    100%{……}
    }
  4. 切图——PS CC 2015修改组/图层名为“*.png”,生成图像资源。
    使用PS CSS 2015切图具体步骤如下:

    [切图]

  5. 定位——适当使用绝对定位;适当使用rem。
    安利一款sublime插件:PX转REM插件。

  6. 实现

    从无到有:

    • 透明度—opacity
    • 位移—translate
    • 宽度—width(少用)

      动起来:

    • 2/3D转换—transform
    • 其他属性
  7. 润色

    后文介绍

TIPS:不要在before,after里加动画!

不止于“动”:

  1. 惯性

    物体没有停在本应该停止的位置上而是靠惯性继续摆动一段时间然后反方向摆回来
    惯性在日常的动画需求中应用相当普遍,元素的高速进入都涉及惯性。

    • 示例:标题快速从左侧划入屏幕中,标题本应停在屏幕左右居中位置,由于惯性的作用,标题到达居中位置后又向右滑行一小段,再反方向滑回。

      [惯性]

      (案例:618 APP返场页H5)
  2. 透视

    物体与观察者的距离远近在静态时通过物体的大小来体现。
    当物体运动时,通过远近物体不同的运动速度来体现,从而形成层次感。近处的物体运动快,远处的物体运动慢

    [透视]

    魔客吧温馨提示:如果您想快速搭建一个企业网站,那么魔客吧推荐大家到 dedecms 频道看看。织梦系统是国内企业站使用最多的CMS系统。