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中垂直居中的简单实现方法
Jul 06 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
IE支持HTML5的解决方法
Oct 20 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
AmazeUI的JS表单验证框架实战示例分享
Aug 21 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 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 Curl多线程原理实例详解
2013/11/06 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
Pandas的Apply函数具体使用
2020/07/21 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
自我评价正确写法范文
2013/12/10 职场文书
我的画教学反思
2014/04/28 职场文书
政府会议通知范文
2015/04/15 职场文书
中学社团活动总结
2015/05/07 职场文书
房产电话营销开场白
2015/05/29 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
浅谈Python数学建模之数据导入
2021/06/23 Python
手写实现JS中的new
2021/11/07 Javascript
改造DE1103三步曲
2022/04/07 无线电