css动画帧动画效果,CSS3动画之逐帧动画
什么是逐帧动画
要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画。
看一下维基百科中的定义:
定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果。
简而言之,实现逐帧动画需要两个条件:(1)相关联的不同图像,即动画帧;(2)连续播放。
我们儿时的记忆,手翻书,他所实现的就是逐帧动画:
逐帧动画
(图片来源:知乎)
前端逐帧动画实现方案
在细聊 css3 逐帧动画之前,我们先大致了解下前端实现逐帧动画有哪些方案。
其实不外乎三种技术(视频可以实现所有类型的动画,暂不纳入):gif、JavaScript、CSS3 Animation。
前文提到,实现逐帧动画需要两个条件:(1)动画帧;(2)连续播放。
下面我们仔细自己分析下这三种技术是怎么实现上述条件的:
(1)gif
在触屏页中,gif 常被用来做加载动画。如《陌陌不孤独饭局》的加载动画:
gif
gif 可以有多个动画帧,连续播放是其自身属性,是否循环也是由其本身决定的。它往往用来实现小细节动画,成本较低、使用方便。
但其缺点也是很明显的:
画质上,gif 支持颜色少(最大256色)、Alpha 透明度支持差,图像锯齿毛边比较严重;
交互上,不能直接控制播放、暂停、播放次数,灵活性差;
性能上,gif 会引起页面周期性的 paint ,性能较差。
(2)JavaScript
JS 与 CSS3,一般是将动画帧放到背景图中。
不同的是, JS 是使用脚本来控制动画的连续播放的:
可以直接改变元素的 background-image
也可以将动画帧合并成雪碧图,通过改变 background-position 来实现
还是《陌陌不孤独饭局》的例子:
其中有一个伸手取饭盒的动画,一共有19帧,且在第11帧处有一个交互,将雪碧图放入背景中,通过不同的样式实现不同的 background-position ,使用 JS 改变样式名:
1
2
3
4
5
6
7
.sprite-rice-1,
.sprite-rice-2,
…
.sprite-rice-19{
background-image:url(http://7xnvb2.com2.z0.glb.qiniucdn.com/img/rice.jpg);
background-repeat:no-repeat
}
1
2
3
4
.sprite-rice-1{background-position:-1800px 0}
.sprite-rice-2{background-position:-900px -489px}
…
.sprite-rice-19{background-position:-1200px 0}
sprite
使用 JS 的优点是兼容性佳,交互灵活。
(3)CSS3 Animation
CSS3 实际上是使用 animation-timing-function 的阶梯函数 steps(number_of_steps, direction) 来实现逐帧动画的连续播放的。
在移动端,CSS3 Animation 兼容性良好,相对于 JS,CSS3 逐帧动画使用简单,且效率更高,因为许多优化都在浏览器底层完成。
因此在触屏页面中 CSS3 逐帧动画使用广泛,下文将对其进行详细介绍。
CSS3 逐帧动画的实现
(1)将动画帧合并为雪碧图
在触屏页面中,动画往往承担页面样式实现的角色(即不需要替换),因此我们会将图片放到元素的背景中(background-image)。
逐帧动画有不同的动画帧,我们可以通过更改 background-image 的值实现帧的切换,但多张图片会带来多个 HTTP 请求,且不利于文件的管理。
比较合适的做法,是将所有的动画帧合并成一张雪碧图(sprite),通过改变 background-position 的值来实现动画帧切换。因此,逐帧动画也被称为“精灵动画(sprite animation)”。
以京东到家的触屏页面《年货送到家》为例:
这个动画一个有三帧,将3个动画帧合并,并放到 .p8 .page_key 的背景中:
1
2
3
4
5
6
.p8 .page_key {
position: absolute;
width: 572px;
height: 586px;
background-image: url("../img/p8.png");
}
(2)使用 steps 实现动画播放
steps 指定了一个阶梯函数,包含两个参数:
第一个参数指定了函数中的间隔数量(必须是正整数);
第二个参数可选,指定在每个间隔的起点或是终点发生阶跃变化,接受 start 和 end 两个值,默认为 end。
(参考自W3C)
通过W3C中的这张图片来理解 steps 的工作机制:
steps
回到上述的例子,我们在 keyframes 中定义好每个动画帧:
1
2
3
4
5
6
@-webkit-keyframes p8{
0%{background-position: 0 0;}
33.33%{background-position: 0 -586px;}
66.66%{background-position: 0 -1172px;}
100%{background-position: 0 -1758px;}
}
然后,给他加上 animation:
1
2
3
.p8 .page_key{
-webkit-animation: p8 steps(1,end) 1.5s infinite;
}
为什么第一个参数是1?
前文中提到,steps 是 animation-timing-function 的一个属性值,在 W3C 中有如下说明:
For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.
也就是说,animation-timing-function 应该于两个 keyframes 之间,而非整个动画。在上面的 keyframes 中,我们已经把每个帧都写出来了,所以两个 keyframes 之间的间隔是1。
更加简便的写法?
既然说 steps 第一个参数是指函数的间隔数量,那么我们就可以把 keyframes 的计算直接交给 steps 来完成。
1
2
3
4
5
6
.p8 .page_key{
-webkit-animation: p8 steps(3,end) 1.5s infinite;
}
@-webkit-keyframes p8 {
100% {background-position: 0 -1758px;}
}
以上两种写法效果是等同的。
CSS3 逐帧动画使用技巧
(1)step-start 与 step-end
除了 steps 函数,animation-timing-function 还有两个与逐帧动画相关的属性值 step-start 与 step-end:
step-start 等同于 steps(1,start):动画执行时以开始端点为开始;
step-end 等同于 steps(1,end):动画执行时以结尾端点为开始。
(2)动画帧的计算:
1
2
3
4
5
6
$spriteWidth: 140px; // 精灵宽度
@keyframes ani {
100% {
background-position: -($spriteWidth * 12) 0; // 12帧
}
}
(3)适配方案:rem+scale
我们知道,rem 的计算会存在误差,因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话,由于计算的误差,会出现抖动的情况。
那么在触屏页中,如何实现页面的适配?
这里小编提供一个思路:
非逐帧动画部分,使用 rem 做单位;
逐帧动画部分,使用 px 做单位,再结合 js 对动画部分使用 scale 进行缩放。
感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2016/05...)
css动画帧动画效果,CSS3动画之逐帧动画相关推荐
- html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
- css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
- android 张口逐帧动画,Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 实现 首先准备一组不同表情的照片,放在res/drawable下,然后在此目录下新建动画资源文件fairy.xml 这 ...
- CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- html帧动画效果,利用css3-animation实现逐帧动画效果
本文分享了用css3-animation来制作逐帧动画的实现方法,供大家参考,具体内容如下 常见用法: CSS Code复制内容到剪贴板 :hover{ animation:mymove 4s ea ...
- html css动画自动旋转,使用CSS3 backface-visibility属性制作翻转动画效果
使用CSS3 backface-visibility属性我们可以制作出许多有趣的动画效果.当你翻转一个元素的时候,你看到的是什么?通常情况下,我们应该看到的是元素的背面,这是正常的情况,但是有时候我们 ...
- css3 线条出现动画效果,CSS3实现的线条波浪动画效果
HTML结构 该css3线条波浪动画效果的HTML结构如下: CSS样式 然后通过下面的CSS代码来制作线条波浪动画效果. @keyframes move_wave { 0% { transform: ...
- html动画加载效果,CSS3 实现 Loading(加载)动画效果
看到不少 App 下拉刷新时,都有加载动画,于是,也想给微信小程序加一个动画特效.正好,这里有不少纯 CSS3 实现的动画效果. Loading 动画效果 HTML代码 CSS代码 .spinner ...
- php动画缩放,分享一个CSS3圆圈放大缩小循环动画的效果代码
CSS3圆圈动画放大缩小循环动画效果,特效简单又漂亮,看着听不错的,感兴趣的朋友们可以来看一下 代码如下: CSS3圆圈动画放大缩小循环动画效果 .dot { margin:150px auto; w ...
最新文章
- OpenCV二值图像分析之形态学应用技巧
- electron 剪贴板 截图_用electron开发了一个屏幕截图工具
- iOS适配问题 键盘变大 整个界面被拉伸
- 不再为DataGrid生成的表格的单无格中的内容过长、自动折行、表格撑开等问题而烦恼----一个很久以前的做品...
- 如何成为国内敏捷BI领跑者?这家企业的经验值得借鉴
- background 旋转_基于HTML5 Canvas 实现矢量工控风机叶轮旋转
- 一篇文章教你学会使用SpringBoot实现文件上传和下载
- 【转】flannel网络的VXLAN及host-gw
- linux信号量简介
- 今天整理了一些老作品
- C语言中利用switch语句和 if--else 语句输出,,闰年或平年,及每月对应的天数。
- mysql 事务 select_mysql 多个select需要放入一个事务吗?
- CVE-2020-1472复现与完整利用
- 如何保存PPT的背景图片
- 手机linux发短信的命令,在Linux中使用飞信发送手机短信
- 手动打开与关闭软键盘
- python scatter设置随机颜色_python – Matplotlib Scatter plot根据列表中的值更改颜色...
- win10家庭版优化
- 2021-10-27 基于电影数据库的简单查询(数据库第二次实验)
- 计算机毕业设计php+vue基于微信小程序的房屋租赁小程序