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

逐帧动画实现方法:

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

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

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

steps使用:

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

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

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

逐帧动画实例:

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

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截图:

分析:效果一里面的数字‘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》》》

css3逐帧动画的更多相关文章

  1. css3 animation实现逐帧动画

    css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...

  2. css3 实现逐帧动画

    css3 实现逐帧动画 实现逐帧动画需要使用到的是Animation动画,该CSS3的Animation有八个属性:分别是如下:1: animation-name2: animation-durati ...

  3. CSS3 animation属性中的steps实现GIF动图(逐帧动画)

    相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...

  4. animation中的steps()逐帧动画

    在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...

  5. 利用css3-animation来制作逐帧动画

    前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...

  6. 使用node.js开发一个生成逐帧动画小工具

    在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...

  7. Android动画效果之Frame Animation(逐帧动画)

    前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...

  8. Android 逐帧动画

    原理: 逐帧动画是最简单的一种动画.原理就是把几张图片连续显示出来,以达到动画的效果.就相当于下面这种手绘翻页动画啦~ 实现: 1.需要建立一个animation-list来设置静态图片资源.持续时间 ...

  9. 逐帧动画(Frame-by-frame Animations)

    1.这一类动画可以创建一个Drawable序列,这些Drawable可以按照指定的时间间歇一个一个的显示. xml定义方法 <animation-list xmlns:android=" ...

随机推荐

  1. 《TensorFlow2深度学习》学习笔记(三)Tensorflow进阶

    本篇笔记包含张量的合并与分割,范数统计,张量填充,限幅等操作. 1.合并与分割 合并 张量的合并可以使用拼接(Concatenate)和堆叠(Stack)操作实现,拼接并不会产生新的维度,而堆叠会创建 ...

  2. shell 脚本监控linux

    [root@dn3 data]# cat monitor.sh #!/bin/bash cpu_idle=$(top -n2|grep 'Cpu'|tail -n 1|awk '{print $8}' ...

  3. hdu3486Interviewe(二分是错的)(ST算法RMQ + 判定上下界枚举)

    题目大意是找最小的m使得前m段中每一段的最大值相加严格大于k,每一段长度为[n/m](n/m向下取整,多余的后半部分部分n-m*[n/m]不要) 先给一段我一开始的思路,和网上许多题解思路一样,但其实 ...

  4. 自动化测试常用断言的使用方法(python+selenium)

    自动化测试常用断言的使用方法(python) 自动化测试中寻找元素并进行操作,如果在元素好找的情况下,相信大家都可以较熟练地编写用例脚本了,但光进行操作可能还不够,有时候也需要对预期结果进行判断. 这 ...

  5. app安全测试初级

    分析方法:静态分析 主要是利用apktool.dex2jar.jd-gui.smali2dex等静态分析工具对应用进行反编译,并对反编译后的java文件.xml文件等文件进行静态扫描分析,通过关键词搜 ...

  6. jq function return value

    所有 JS  函数 都会返回值 假如 没有 return  则返回 undefined

  7. 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中

    Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...

  8. test20190901 NOI2019 模拟赛

    0+0+0=0.还是太菜,看不出题型. Masodik 你要从 (0,0) 点走到 (n,m),每次只能往 x 轴或者 y 轴正方向移动一个单位距离.从 (i,j) 移动到 (i,j+1) 的代价为 ...

  9. Fiddler抓包工具介绍

    Fiddler官网 https://www.telerik.com/download/fiddler Fiddler原理 当你打开Fiddler工具的时候你会发现你浏览器的代理服务器被添加了127.0 ...

  10. Python的私有变量与装饰器@property的用法

    Python的私有变量是在变量前面加上双横杠(例如:__test)来标识, Python私有变量只能在类内部使用,不被外部调用,且当变量被标记为私有后,调用时需再变量的前端插入类名,在类名前添加一个下 ...