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 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
Feb 29 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
用canvas显示验证码的实现
Apr 10 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
css中:last-child不生效的解决方法
Aug 05 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
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 ImageMagick windows下安装教程
2015/01/26 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
jquery text()方法取标签中的文本
2014/07/25 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
微信小程序获取用户openId的实现方法
2017/05/23 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
JavaScript实现字符串与HTML格式相互转换
2020/03/17 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
python连接字符串的方法小结
2015/07/13 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
Python3实现个位数字和十位数字对调, 其乘积不变
2020/05/03 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
链表面试题-一个链表的结点结构
2015/05/04 面试题
XML文档面试题
2015/08/05 面试题
市优秀教师事迹材料
2014/02/05 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
办护照工作证明
2014/10/01 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
2014年组织部工作总结
2014/11/14 职场文书
教师外出学习心得体会
2016/01/18 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书