做有态度的前端团队

网易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》》》

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

已有 72 条评论

  1. 0KeeTeam

    0KeeTeam

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

    gffipfzxgwsjobphypgt

  5. qcqbiuavvfnxkrqcwdfi

    0KeeTeam

  6. 0KeeTeam

    0KeeTeam

  7. 0KeeTeam

    0KeeTeam

  8. 0KeeTeam

    0KeeTeam
    expr 874249262 + 838317904

  9. 0KeeTeam

    0KeeTeam
    CRLF-Header:CRLF-Value

  10. 0KeeTeam

    0KeeTeam

  11. Crawlergo

    Crawlergo

  12. Crawlergo

    Crawlergo

  13. Crawlergo

    Crawlergo

  14. Crawlergo

  15. test

    test

  16. test

    test

  17. xctefdfqjtphzjodatvz

    test

  18. test

    test

  19. test

    test

  20. test

    test

  21. test

    test

  22. test

    test

  23. test

    test

  24. test

    /1/{{851633493+921759300}}

  25. test

    ${821317062+882671238}

  26. test

    test
    CRLF-Header:CRLF-Value

  27. test

    test

  28. test

    test

  29. test

    test

  30. test

    test

  31. test

    test

  32. test

    test

  33. test

    test

  34. test

    test

  35. 1

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

  36. 1

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

  37. 1

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

  38. 1

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

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

  44. 1

    1

  45. 1

    1

  46. 1

    1

  47. 1

    1

  48. 1

    1

  49. 1

    1

  50. 1

    1

  51. 1

    1

  52. 1

    1

添加新评论

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