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 相关文章推荐
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
CSS3实现彩色进度条动画的示例
Oct 29 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
Jun 04 HTML / CSS
html5生成柱状图(条形图)效果的实例代码
Mar 25 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
Dec 24 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中常用编辑器推荐
2007/01/02 PHP
php计算十二星座的函数代码
2012/08/21 PHP
PHP四大安全策略
2014/03/12 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
js模糊查询实例分享
2016/12/26 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
webpack是如何实现模块化加载的方法
2019/11/06 Javascript
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python的Django框架安装全攻略
2015/07/15 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
Python实现ping指定IP的示例
2018/06/04 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
django 取消csrf限制的实例
2020/03/13 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
Calzedonia美国官网:意大利风格袜子、打底裤和沙滩装
2018/07/19 全球购物
车间班组长的职责
2013/12/13 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
工作求职信
2014/07/04 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Oracle使用别名的好处
2022/04/19 Oracle