做有态度的前端团队

网易FEG前端团队

css3逐帧动画-飘动旗子

写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是使用连贯性的ease动画。我们熟悉的animation动画有·ease·、·ease-in·、·ease-out·、·linear·、·cubic-bezier·等过段函数,当然还有我们可能不是很熟悉的·steps·跳帧函数。我们在做一些特殊的动画,比如一个飘动的旗子、一个奔跑的小人,这些动画不需要补间,这时候需要的是跳帧·steps·。

逐帧动画实现方法:

  • 1、把动画帧切图合并在一起

  • 2、通过CSS3的animation控制background-position

方法很简单,这里使用到的就是前面提到的过度函数steps

steps介绍:

·steps· 函数指定了一个阶跃函数,第一个参数指定了时间函数中的间隔数量(必须是正整数);第二个参数可选,接受 startend 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end

比如:steps(1,start)steps(1,end)或者steps(1)

这样讲很抽象,即使记住了,真正在做动画的时候也可能搞混

逐帧动画实例:

下面通过一个数字(1—5)变化动画来看看到底startend两个会有什么不同的效果:

1、steps(1,start)效果

先看下背景合并图:

背景合并图

代码(这里只写webkit的前缀,其它的兼容前缀在实际项目中自己补全):

.ani1{
    height:200px;
    width:200px;
    background:url(img/bg.png) no-repeat 0 0;
    -webkit-animation:num_ani 2s steps(1,start) infinite;/*效果1*/
}
.ani2{
    height:200px;
    width:200px;
    background:url(img/bg.png) no-repeat 0 0;
    -webkit-animation:num_ani 2s steps(1) infinite;/*效果2*/
}
 
@-webkit-keyframes num_ani{
    0% {
        background-position:0;
    }
    20% {
       background-position:-200px 0;
    }
    40% {
       background-position:-400px 0;
    }
    60% {
       background-position:-600px 0;
    }
    80% {
       background-position:-800px 0;
    }
    100% {
       background-position:-1000px 0;
    }
}

效果gif截图:

截图

从上面的gif可以看出,效果一里面的数字‘1’没有显示出来,而且后面那个边空白了,效果二达到预期效果。

通过上面的栗子,相信已经明白了steps的第二个参数的区别了。再看看上面keyframes的设置,我们要的效果其实是5个变化,但是我们写了6帧的时间点。我们的第五个数字的背景是 background-position:-800px 0,为什么上面的帧要写到background-position:-1000px 0;

一开始,我们可能按照以前连贯的动画写法,但是这里是以跳帧的形式运行动画的。比如说,我们要见到数字1(也是0%-20%之间),那么我们应该显示0到-200px之间的背景。也就是说我们的逐帧动画的帧数应该加1的。

点击在线demo:

css3逐帧动画DEMO》》》

旗子飘动例子:

细心的童鞋可以看到,上面例子的steps的第一个参数都是取值1,取值为1的意思是指动画在一步完成,然后具体的跳帧是需要我们自己在keyframes里面设置。

旗子飘动代码:

.ani3{
    height:55px;
    width:60px;
    margin:100px;
    background:url(images/flag.png) no-repeat 0 0;
    -webkit-animation:flag_ani 0.8s steps(5) infinite;
}
 
@-webkit-keyframes flag_ani{
    100% {
       background-position:0 -282px;
    }
}

从上面可以看到,keyframes代码比数字变化的动画写法简单了很多,这是因为用了steps(5),整个旗子的变化由5张图组成,下面是背景图的雪碧图:

截图

steps里面指定动画的步数,然后在keyframes里面指定整个背景的position,像上面的旗子雪碧图的高度就是282px,然后steps函数就会把他平均分成5份,也就是282/5。平均这个词很重要,也是他和前面steps(1)的主要区别。前面我们把整个动画看做一步完成,然后在keyframes里面具体的定义各个帧。而steps(5)是代码帮你平均分,如果你的雪碧图合拼的间距不一致,会出现动画错位的问题。

效果gif截图:

截图

点击在线demo:

css3逐帧动画DEMO》》》

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif