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绘制百度的小度熊
Oct 29 HTML / CSS
css3实现3d旋转动画特效
Mar 10 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
X/HTML5 和 XHTML2
Oct 17 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
详解Canvas实用库Fabric.js使用手册
Jan 07 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
详解CSS玩转图片Base64编码
May 25 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
async和DOM Script文件加载比较
2014/07/20 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
yii数据库的查询方法
2015/12/28 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
MSN消息提示类
2006/09/05 Javascript
JavaScript中的事件处理
2008/01/16 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Python实用日期时间处理方法汇总
2015/05/09 Python
Python实现的Excel文件读写类
2015/07/30 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
EJB3推出JPA的原因
2013/10/16 面试题
商务英语本科生的自我评价分享
2013/11/15 职场文书
运动会邀请函范文
2014/01/31 职场文书
决心书标准格式
2014/03/11 职场文书
市场调查策划方案
2014/06/10 职场文书
幼儿园法制宣传日活动总结
2014/11/01 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
服务员岗位职责范本
2015/04/09 职场文书
公司的力量观后感
2015/06/05 职场文书
横空出世观后感
2015/06/09 职场文书
python自动化八大定位元素讲解
2021/07/09 Python