css3中用animation的steps属性制作帧动画


Posted in HTML / CSS onApril 25, 2019

昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用css 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到,直接就给了我一个雪碧图,并告诉我在photoshop中可以用帧动画来播放几张图片,达到类似gif的效果,程序上实现也大抵如此吧。

卧槽真是个神奇的UI boy。

  于是我顺着他的思路,用上了animation在timing-function中的steps属性。

先来看看UI给的图吧,是这样的:(注:图片宽度1200px)

css3中用animation的steps属性制作帧动画

如果要播放这张图片的话,很明显是分为五个帧,然后定义一个动画,background-position从(0,0)到(-图片的宽度,0)。首先要明白background-position的数值指的是背景图的左上角顶点到容器左上角顶点的x,y距离。x,y正数值越大,背景图越向右下角偏移。

所以动画的代码如下:

css3中用animation的steps属性制作帧动画

我们先来播放一下看看效果,设置animation:spinning 2s linear infinite,效果如下:

css3中用animation的steps属性制作帧动画

可以看到是从左到右依次播放:2,3,4,5,6,2,3,4,5,6....。类似跑马灯的效果,既然说到这里就顺便提一下alternate,众所周知infinite linear定义的是0 -> 100 ->0 -> 100 -> 0 -> 100......(始终正向)。而infinite alternate定义的是0 -> 100 -> 100 ->0 -> 0 -> 100......(一下正向一下反向)。修改animation:spinning 2s alternate infinite,效果如下:

css3中用animation的steps属性制作帧动画

但是这都不是我们需要的效果,因为帧动画的关键在于“瞬变”。在animation的timing-function中,有一个steps(n)属性。表示将动画分为n帧。比如说,这里我们定义animation:spinning 2s steps(5) infinite。它在这个例子中表示的效果如下:

css3中用animation的steps属性制作帧动画

在0~400ms时,position:0 0;400ms~800ms,position:-240px 0。800ms~1200ms,position:-480px 0,以此类推。需要注意的是,比如400ms时position为0 0,在401ms时position就突变成-240px 0,即是说position是瞬变的。这个位置变化没有过渡效果,这就是steps的特点:阶跃性。

此时效果如下:

css3中用animation的steps属性制作帧动画

400ms一帧当然太慢了,我们把时间适当压缩一下。比如总动画时长为300ms,那就是60ms一帧,分5帧播放完,这样看起来就会流畅不少。最终效果如下:

 css3中用animation的steps属性制作帧动画

总结

以上所述是小编给大家介绍的css3中用animation的steps属性制作帧动画 ,希望对大家有所帮助!

HTML / CSS 相关文章推荐
CSS3的resize属性使用初探
Sep 27 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS3实现莲花绽放的动画效果
Nov 06 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
h5使用canvas画布实现手势解锁
Jan 04 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
css3 中实现炫酷的loading效果
Apr 26 #HTML / CSS
使用 css3 transform 属性来变换背景图的方法
May 07 #HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 #HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 #HTML / CSS
CSS3 translate导致字体模糊的实例代码
Aug 30 #HTML / CSS
CSS3实现类似翻书效果的过渡动画的示例代码
Sep 06 #HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 #HTML / CSS
You might like
通过php添加xml文档内容的方法
2015/01/23 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
js实现文字无缝向上滚动
2017/02/16 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
微信小程序向Java后台传输参数的方法实现
2020/12/10 Javascript
[29:16]完美世界DOTA2联赛决赛日 Inki vs LBZS 第三场 11.08
2020/11/10 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
用python实现一个简单的验证码
2020/12/09 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
介绍一下UNIX启动过程
2013/11/14 面试题
总裁岗位职责
2013/12/04 职场文书
简历自我评价怎么写好呢?
2014/01/04 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
工作检讨书500字
2014/10/19 职场文书
县委务虚会发言材料
2014/10/20 职场文书
教师学习群众路线心得体会
2014/11/04 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL