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五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
Nov 18 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 HTML / CSS
AmazeUI 导航条的实现示例
Aug 14 HTML / CSS
详解CSS开发过程中的20个快速提升技巧
May 21 HTML / CSS
html form表单基础入门案例讲解
Jul 21 HTML / CSS
css3 选择器
May 11 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
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
Jquery异步请求数据实例代码
2011/12/28 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python机器学习之贝叶斯分类
2018/03/26 Python
Python如何调用外部系统命令
2019/08/07 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
Python3常见函数range()用法详解
2019/12/30 Python
html5 video标签屏蔽右键视频另存为的js代码
2013/11/12 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
健身场所或家用健身设备:Life Fitness
2017/11/01 全球购物
10条PHP编程习惯
2014/05/26 面试题
护理专科毕业推荐信
2013/11/10 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
小学语文业务学习材料
2014/06/02 职场文书
跑操口号
2014/06/12 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
Vue+Flask实现图片传输功能
2022/04/01 Vue.js
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
JS函数式编程实现XDM一
2022/06/16 Javascript