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代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
css背景图片的背景裁切、背景透明度、背景变换等效果运用
Dec 24 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
用HTML5.0制作网页的教程
May 30 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
Jun 13 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 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初学者头疼问题总结
2006/10/09 PHP
php网页后退不再出现过期
2007/03/08 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
用ADODB.Stream转换
2007/01/22 Javascript
Javascript 对象的解释
2008/11/24 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
2020/04/20 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
微信小程序开发之IOS和Android兼容的问题
2017/09/26 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
在JS循环中使用async/await的方法
2018/10/12 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python中运行并行任务技巧
2015/02/26 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
python调用百度地图WEB服务API获取地点对应坐标值
2019/01/16 Python
Pytorch中index_select() 函数的实现理解
2019/11/19 Python
python 绘制场景热力图的示例
2020/09/23 Python
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
sort命令的作用和用法
2013/08/25 面试题
新年寄语大全
2014/04/12 职场文书
上海世博会口号
2014/06/19 职场文书
2015年党风廉政承诺书
2015/01/22 职场文书
入学证明
2015/06/23 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL