CSS3序列帧动画

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/joyce_lcy/article/details/78711322

注意:为代码看上去简洁,本文实例中都忽略了前缀,而在实际使用中需加上。

1. 前言

(1)背景

实践当中,很多复杂的动画,一般不要求我们用CSS3变形的方式画出来,而是采用一帧一帧连续播放静态的图片的方式形成动画。

(2)实例

例如让下面图片中的小女孩跑起来。
(图片出处:http://www.zcool.com.cn/work/ZMjE3OTQyMzY=.html,仅用于demo素材,不商用,如有侵权,请及时联系)

这里写图片描述

2. animation

(1) animation简介

内容参考 http://www.css88.com/book/css/properties/animation/index.htm

animation是个复合属性。检索或设置对象所应用的动画特效。如果提供多组属性值,以逗号进行分隔。

它有如下取值:

<' animation-name '>:检索或设置对象所应用的动画名称
<' animation-duration '>:检索或设置对象动画的持续时间
<' animation-timing-function '>:检索或设置对象动画的过渡类型
<' animation-delay '>:检索或设置对象动画延迟的时间
<' animation-iteration-count '>:检索或设置对象动画的循环次数
<' animation-direction '>:检索或设置对象动画在循环中是否反向运动
<' animation-fill-mode '>:检索或设置对象动画时间之外的状态
<' animation-play-state '>:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

[1] animation-name

检索或设置对象所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义

[2] animation-timing-function

linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:等同于 steps(1, start)
step-end:等同于 steps(1, end)
steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。
cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

[3] animation-iteration-count

infinite: 无限循环
<number>: 指定对象动画的具体循环次数

[4] animation-direction

normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行,并持续交替运行
alternate-reverse:动画先反运行再正方向运行,并持续交替运行

[5] animation-fill-mode

即动画完成时,是显示动画开始的状态还是结束时的状态。

none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态

这个地方需要特别注意的是,如果steps(1,end)这样的模式,按照下文所讲,100%处可以为空,不影响动画,但是如果animation-fill-mode设置为forwards时,动画完毕显示的是最后一帧就会出问题。这时需要设置最后两个区间为一样的效果。

[6] animation-play-state

running:运动
paused:暂停

(2) 帧动画

[1] 线性动画与帧动画对比

平时我们接触的是线性动画,例如:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo for animation</title>
        <style>
            div{
               height: 100px;
               width: 100px;
               -webkit-animation: run 3s;
            }
            @-webkit-keyframes run{
               0%{
                   background-color: red;
               }
               50%{
                   background-color: green;
               }
               100%{
                   background-color: blue;
               }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

运行的效果是:块从红色渐变到绿色再渐变到蓝色。期间,会出现棕色靛蓝等过渡色。如果只想出现红绿蓝三种颜色,不过渡。那么这样的方式就是帧动画了。

[2] animation-timing-function中的steps()

上文中介绍了它,帧动画就要靠它实现。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo for animation</title>
        <style>
            div{
                height: 100px;
                width: 100px;
                -webkit-animation: run 1s steps(1,end);
            }
            @-webkit-keyframes run{
                0%{
                    background-color: red;
                }
                50%{
                    background-color: green;
                }
                100%{
                    background-color: blue;
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

运行,咦?怎么只有红、绿两个颜色。

如果把end改为start呢?只有绿、蓝两个颜色了。

W3C上关于step timing functions(https://www.w3.org/TR/css-timing-1/#step-timing-functions)是这样介绍的:

A step timing function is a type of timing function that divides the input time into a specified number of intervals that are equal in length.

同时画出了它的工作机制:

这里写图片描述

steps(<integer>[, [ start | end ] ]?)
以上例进行分析:

1) 参数2 - start和end

对照上图的工作机制可以看出:

参数 0%-50% 50%-100%
start 显示定义在50%时的样式 显示定义在100%时的样式
end 显示定义在0%时的样式 显示定义在50%时的样式

不是线性变化,那么在一个时间段的显示要不以上一帧,要不以下一帧的效果来填充。这个参数就是进行这个指定的。

所以,不同于线性动画的设置,如果希望显示三段红绿蓝,应该将时间段化为三部分,也就是0%-33.333%、33.333%-66.666%、66.666%-100%,如下:

/*-start-*/
div{
    height: 100px;
    width: 100px;
    -webkit-animation: run 1s steps(1,start);
}
@-webkit-keyframes run{
    0%{

    }
    33.333%{
        background-color: red;
    }
    66.666%{
        background-color: green;
    }
    100%{
        background-color: blue;
    }
}
/*-end-*/
div{
    height: 100px;
    width: 100px;
    -webkit-animation: run 1s steps(1,end);
}
@-webkit-keyframes run{
    0%{
        background-color: red;
    }
    33.333%{
        background-color: green;
    }
    66.666%{
        background-color: blue;
    }
    100%{

    }
}

2) 参数1 - integer

首先,我们尝试下将上例中的1改为3:

-webkit-animation: run 3s steps(3,end);

运行后发现,出现了9种颜色。对照上图的工作机制。我们发现,它对每一个时间段进行了插值。例如本来0-33.333%这个时间段内是只显示红色的。设置成3之后,将其分成了三段,分别显示红、棕、褐。而我们只进行了红绿蓝的样式定义。

需要强调的是,这个参数不是用来设置整个动画分为几段,而是将已定义的时间段内进行再分割。

3. 实战

弄清楚了animation中的各种参数设置,特别是steps中如何设置帧动画,我们回到前言中提到的实例进行实战。

(1) 小女孩跑起来

实例中我打算采用61、63、65、67、69、71、72一共7张图来实现跑动的效果。所以需要分为7段,100% / 7 = 14.285%。由于需要连续跑,所以加上了infinite。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo for animation</title>
        <style>
            div{
                background-image: url('image/image.jpeg');
                background-repeat: no-repeat;
                height: 345px;
                width: 235px;
                -webkit-animation: girlRun 1s steps(1,end) infinite;
            }
            @-webkit-keyframes girlRun{
                0%{
                    background-position: 0px 0;
                }
                14.285%{
                    background-position: -180px 0;
                }
                28.571%{
                    background-position: -369px 0;
                }
                42.857%{
                    background-position: -609px 0;
                }
                57.143%{
                    background-position: -35px -424px;
                }
                71.429%{
                    background-position: -235px -424px;
                }
                85.714%{
                    background-position: -435px -424px;
                }
                100%{
                }
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

注:图片使用为相对路径。跑这个demo需要下载图片。

运行后的效果如下(由于不支持上传视频,此处制作了gif进行效果展示)

这里写图片描述

(2) 其他属性尝试

先前提到了很多属性,我们利用这个小女孩奔跑的案例进行尝试。

[1] animation-direction

上文提到这个属性设置运动的方向。

-webkit-animation: girlRun 1s steps(1,end) infinite reverse;

测试下,设置成reverse后小女孩向后倒着跑。

同理,alternate是正着跑再倒着跑,alternate-reverse是倒着跑再正着跑,交替进行。所以,这两个属性需要和infinite连用才会有效果。

[2] animation-play-state

可以取值running和paused,如何使用呢?
增加一个样式:

div:hover{
 animation-play-state: paused;
}

此时,当鼠标移动到图片上时,小女孩停止跑动。

4. 注意

为了兼容IE10等,动画需要使用雪碧图,不可切换图片url。

阅读更多
换一批

没有更多推荐了,返回首页