CSS3动画之逐帧动画

Chase620 等级 676 0 0

CSS3动画开发指南第二弹,剥丝抽茧为你解析逐帧动画,同时放送从实战经验中总结出来的逐帧动画使用技巧。

什么是逐帧动画

要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画。

看一下 维基百科 中的定义:

定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果。

简而言之,实现逐帧动画需要两个条件: (1)相关联的不同图像,即动画帧; (2)连续播放。

我们儿时的记忆,手翻书,他所实现的就是逐帧动画: CSS3动画之逐帧动画

(图片来源: 知乎 )

前端逐帧动画实现方案 在细聊 css3 逐帧动画之前,我们先大致了解下前端实现逐帧动画有哪些方案。

其实不外乎三种技术(视频可以实现所有类型的动画,暂不纳入):gif、JavaScript、CSS3 Animation。

前文提到,实现逐帧动画需要两个条件:(1)动画帧;(2)连续播放。

下面我们仔细自己分析下这三种技术是怎么实现上述条件的:

(1)gif 在触屏页中,gif 常被用来做加载动画。如 《陌陌不孤独饭局》 的加载动画:

gif 可以有多个动画帧,连续播放是其自身属性,是否循环也是由其本身决定的。它往往用来实现小细节动画,成本较低、使用方便。

但其缺点也是很明显的:

画质上,gif 支持颜色少(最大256色)、Alpha 透明度支持差,图像锯齿毛边比较严重; 交互上,不能直接控制播放、暂停、播放次数,灵活性差; 性能上,gif 会引起页面周期性的 paint ,性能较差。 (2)JavaScript JS 与 CSS3,一般是将动画帧放到背景图中。

不同的是, JS 是使用脚本来控制动画的连续播放的:

可以直接改变元素的 background-image 也可以将动画帧合并成雪碧图,通过改变 background-position 来实现 还是 《陌陌不孤独饭局》 的例子:

其中有一个伸手取饭盒的动画,一共有19帧,且在第11帧处有一个交互,将雪碧图放入背景中,通过不同的样式实现不同的 background-position ,使用 JS 改变样式名:

  .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
}
.sprite-rice-1{background-position:-1800px 0}
.sprite-rice-2{background-position:-900px -489px}
…
.sprite-rice-19{background-position:-1200px 0}

使用 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 的背景中:

  .p8 .page_key {
    position: absolute;
    width: 572px;
    height: 586px;
    background-image: url("../img/p8.png");
}

(2)使用 steps 实现动画播放 steps 指定了一个阶梯函数,包含两个参数:

第一个参数指定了函数中的间隔数量(必须是正整数); 第二个参数可选,指定在每个间隔的起点或是终点发生阶跃变化,接受 start 和 end 两个值,默认为 end。 (参考自 W3C )

通过 W3C 中的这张图片来理解 steps 的工作机制:

回到上述的例子,我们在 keyframes 中定义好每个动画帧:

  @-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:

  .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 来完成。


.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)动画帧的计算: $spriteWidth: 140px; // 精灵宽度 @keyframes ani { 100% { background-position: -($spriteWidth * 12) 0; // 12帧 } } (3)适配方案:rem+scale 我们知道,rem 的计算会存在误差,因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话,由于计算的误差,会出现抖动的情况。

那么在触屏页中,如何实现页面的适配?

这里小编提供一个思路:

非逐帧动画部分,使用 rem 做单位; 逐帧动画部分,使用 px 做单位,再结合 js 对动画部分使用 scale 进行缩放。

收藏
评论区

相关推荐

用css3实现惊艳面试官的背景即背景动画(高级附源码
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
《前端实战总结》之使用CSS3实现酷炫的3D旋转透视
3D动画效果现在越来越普及,已经被广泛的应用到了各个平台,比如阿里云,华为云,webpack官网等。它可以更接近于真实的展示我们的产品和介绍,带来极强的视觉冲击感。所以说,为了让自己更加优秀,css3 3D动画必不可少。 你将学到 CSS3 3D 转换的常用API介绍 CSS3 3D 应用场景 CSS3 3D 实现一个立方体 开始 1.CSS
轻松教你使用纯css实现水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特新实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
轻松教你使用纯css实现H5-Doorin编辑器中的水波动画
css3给我们前端开发带来了很便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5Dooring编辑器(https://github.com/MrXujiang/h5Dooring) 中的水波动画. (https://imghelloworld.osscnbeijing.aliy
CSS3动画之逐帧动画
CSS3动画开发指南第二弹,剥丝抽茧为你解析逐帧动画,同时放送从实战经验中总结出来的逐帧动画使用技巧。 什么是逐帧动画 要了解 CSS3 逐帧动画,首先要明确什么是逐帧动画。 看一下 维基百科 中的定义: 定格动画,又名逐帧动画,是一种动画技术,其原理即将每帧不同的图像连续播放,从而产生动画效果。 简而言之,实现逐帧动画需要两个条件: (1)相关联
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
CSS3 文本效果
CSS3 文本效果 --------- CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: * text-shadow * word-wrap * * * 浏览器支持 ----- ![](http://static.oschina.net/uploads/space/2016/0123/124344_Ps
CSS3动画(转自大神制作,很绚丽,纯CSS之作)
绚丽的3D动画(纯CSS实现,代码有点长啊,在这里不知道怎么折叠起来,讲究看看吧) 效果图:[https://bupt-hjm.github.io/css3-3d/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fbupt-hjm.github.io%2Fcss3-3d%2F)(转)
CSS3实现各种表情
 CSS3实现各种表情  效果图:  ![](https://oscimg.oschina.net/oscnet/3e7c1e03814ab2c1df6e3058e39715c9936.jpg)  代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title></title
CSS扩展语言
CSS没有变量?不要诬蔑我们大CSS好不?就像ES一样,你说JS没有模块,ES6给你整一个出来,而在这之前就已经有相关的库出来了。CSS也一样,你说CSS没有变量,CSS3就给你一个var(),变量你值得拥有! // 语法 // <custom-preperty-name> 自定义属性名 // <declaration-value>
H5实现APP和原生方式有多大差距,多少坑?JS才是王道!
纯H5的APP,虽然开发起来要比纯原生开发畅快的多,但最终效果和性能还是和原生比起来还是有很多问题,主要聚集在以下几个方面: 1、动画 动画有很多种,比如侧边栏菜单的滑入滑出、元素的响应动画、页面切换之间的过场等等,在H5之下的众多实现方法都没有办法达到纯原生的性能。一般有这几种不同的选择:css3动画,javascript动画,原生动画。 cs
2016.07 第2周 群问题分享
![](https://oscimg.oschina.net/oscnet/d26128fec4f1a6ac6a9bebb574017bc764c.jpg) **HTML+CSS** ### 移动端中1px的边框如何实现 ![](https://oscimg.oschina.net/oscnet/502ef7f5ea07f51fee8ffef1ffc
CSS预编译器:Sass(入门),更快的前端开发
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码,易于组织和维护。 SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览
Css3 Animation 动画十二原则
##### 前言 > 本文主要介绍了CSS3动画基本原理和常用形式 作为前端的设计师和工程师,我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画,但我们经常做的不过如此。 动效是一个有助于访客和用户理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。 迪士尼经过基础工作练习的长时间