前端知识归纳(3)-- HTML/CSS(part2 CSS动画)

目录概览:

  • transition
  • animation
  • 常见CSS动画库
  • 动画性能优化

一、transition

屏幕快照 2018-02-27 22.05.08.png

屏幕快照 2018-02-27 22.06.10.png

屏幕快照 2018-02-27 22.41.38.png

屏幕快照 2018-02-27 22.52.36.png

概述

transform 本意是变形,变换之意,在 CSS 中使用该属性可对元素进行移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)等效果。因其有着各种特效及优良的性能,所以成为动画的标配。

在学习之前,我们可以简单欣赏下几个案例:

二维(2D)变换

translate

其语法为:transform: translate(tx[, ty])。其中 tx 表示 x 方向偏移,ty 表示 y 方向偏移,如果 ty 没有指定值则为0。

还可以分拆为:transform: translateX(tx)transform: translateY(ty)

简单示例如下(虚线框表示原先位置):

.box {
    transform: translate(50px, 30px);
}

[图片上传失败...(image-76ce1d-1547687082749)]

注:tx,ty 如果为百分比值的话,其参考计算的是元素本身的宽和高,而不是父元素的宽和高。所以经常使用该方法设置定位居中,代码如下:

.demo {
  position: absolute;
  top: 50%; /* 父元素高度的一半位置 */
  left: 50%; /* 父元素宽度的一半位置 */
  transform: translate(-50%, -50%); /* 元素本身的一半宽、高 */
}

scale

其语法为:transform: scale(sx[, sy])。其中 sx 表示 x 方向的缩放比例,sy 表示 y 方向的缩放比例,如果 sy 没有指定值则与 sx 相等。

同样也可以分拆为:transform: scaleX(sx)transform: scaleY(sy)

简单示例如下:

.box {
    transform: scale(1.2);
}

[图片上传失败...(image-a21737-1547687082749)]

rotate

其语法为:transform: rotate(angle)。angle 表示顺时针角度。

简单示例如下:

.box {
    transform: rotate(15deg);
}

[图片上传失败...(image-5019af-1547687082748)]

skew

其语法为:transform: skew(ax[, ay])。其中 ax 表示 x 方向的顺时针角度,ay 表示 y 方向的顺时针角度,如果 ay 没有指定值则 y 方向没有倾斜。

简单示例如下:

.box {
    transform: skew(30deg);
}

[图片上传失败...(image-afcd62-1547687082748)]

复合变换

上面几个变换,都可以自由组合形成更复杂的复合变换。

简单示例如下:

.box {
    transform: translate(30px) rotate(10deg) skew(0, 5deg);
}

[图片上传失败...(image-401ba8-1547687082748)]

以上所有示例在线查看地址: transform 简单 demo

变换中心点

默认上面所有的变换都是以元素的中心位置为参考原点的,不过我们可以通过属性 transform-origin 来改变参考原点。

其语法为:transform-origin: ox oy。其中 ox 表示 x 方向的位置,可使用 leftrightcenter<length><percentage>,oy 表示 y 方向的位置,可使用topbottomcenter<length><percentage>。如果只传入一个值,则另一个值默认为 50%

简单示例如下(在线 demo):

.box {
    transform: rotate(15deg);
}
.box-origin-top-left {
    transform-origin: left top;
}
.box-origin-right {
    transform-origin: right; /* 设置一个值,则另一个为50% */
}
.box-origin-px {
    transform-origin: 200px 80%;
}

[图片上传失败...(image-797765-1547687082748)]

[图片上传失败...(image-ca724d-1547687082748)]

[图片上传失败...(image-f038c7-1547687082748)]

trasform 2D 的本质 —— 矩阵变换

上面我们已经简单了解了 transform 2D 的基本语法,接下来简单探讨下 transform 2D 的本质。

transform 2D 除了以上的四种基本语法(translate、rotate、scale、skew)外,还有一个矩阵语法,如下:

transform: matrix(a, b, c, d, e, f);

上面 matrix(a, b, c, d, e, f) 的形式用矩阵符号表示,是这样的:

[图片上传失败...(image-85b08e-1547687082748)]

需要注意的是,第三行是固定的,都是 0,0,1 ,所以 CSS 语法中省去了这一行。因为涉及到 xy 及旋转,所以二维变换需要三个变量来表示。

下面我们具体以实例了解下矩阵是如何用来表示变换的,以上面的 translate 为例:

.box {
    transform: translate(50px, 30px);
}

上面 css 代码的意思是说,把所有点都相对于 原点 (通过 transform-origin 指定,默认为中心点),往 x 正方向平移 50px,往 y 正方向平移 30px。用数学表达式表示就是:

[图片上传失败...(image-e06a5b-1547687082747)]

这里 tx = 50px ,ty = 30px。稍微变换一下,x' 和 x,y 都相关,写成如下的形式:

[图片上传失败...(image-76f482-1547687082747)]

把两行的x、y系数取出来,再补充一行(为什么多了一行?为了运算方便,看下图也许就清楚了),得下面的语法形式—— 矩阵运算

[图片上传失败...(image-93e4ad-1547687082747)]

那么,变换的本质是什么?就是把一组 (x, y) 通过算术运算,变为新的坐标 (x',y') ,刚好 矩阵 这种数学工具就可以用来描述这种数学变换。通用的二维矩阵变换就是:

[图片上传失败...(image-650dc4-1547687082746)]

常见的二维变换

上面公式的最左边的矩阵,通常是如下几种基本形式组合而成:

[图片上传失败...(image-581a6c-1547687082746)]

如果每个变换,都用 matrix 语法来表示,要写很多参数,显然这样是不合理的。所以有了四个基本的简化写法:

[图片上传失败...(image-b423a5-1547687082746)]

三维(3D)变换

3D 变换大概有如下几种使用方法:

transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);

3D 变换的复杂性及可以创造的特效远超 2D 变换。由于篇幅有限且深入掌握的话需要一定的想象力,这里就做不详细介绍了。

推荐两篇高质量入门文章如下:

参考资料

二、animation

屏幕快照 2018-02-27 23.03.37.png

三、常见 CSS 动画库

自从 CSS3 有了动画功能,从此 Web 页面就迈进“忽如一夜春风来,千页万页动画开”的盛况。 所以 CSS 动画除了是炫技之选更是一项基本技能,当然也就有无数前辈为之呕心沥血总结经验了。这里我们站在巨人肩上,为大家推荐一些常见且十分好用的 CSS 动画库,既可以用来学习也可用来提高工作效率。

Animate.css

Animate.css 是最早的也是目前最流行和最易于使用的CSS动画库之一,其包含了60多款不同类型的 CSS 动画如晃动、闪动、淡出淡出效果等,如果你想快速的使用各种 CSS 动画特效的话,你可以选择它。

[图片上传失败...(image-94f1dd-1547687274155)]

Magic CSS3 Animation

Magic CSS3 Animations 是一个特殊效果的 CSS 动画库,你可以免费用于你的 Web 项目,简单的引用 CSS 样式:magic.css 或 magic.min.css (压缩版)即可。该项目提供了一个特别酷的演示应用程序。与 animate.css 相比,Magic CSS3 Animation 的大小适中,它的特色动画,如魔法效果,愚蠢的效果和炸弹效果十分出众和特别。

  • 创作者:Christian
  • 发行:2014年
  • 当前版本:1.1.0
  • 人气:GitHub上有4700+的star
  • 未压缩大小:20.5kb
  • GitHub:https://github.com/miniMAC/magic

[图片上传失败...(image-68b0c7-1547687274153)]

Hover CSS

Hover.css 是一个 CSS 动画库,专为您的网站中的按钮和其他 UI 元素而设计。它具有非常好的2D转换,以及许多其他精心制作的动画。

  • 创作者: Ian Lunn
  • 发行:2013年
  • 当前版本:2.1.1
  • 人气:GitHub上有16000+的star
  • 未压缩大小:100+kb
  • GitHub:https://github.com/IanLunn/Hover

[图片上传失败...(image-a99e-1547687274152)]

Effeckt

Effeckt.css 是一个集合了众多新鲜而又实用的的 CSS/jQuery 动画效果,这些都适用于网站或是移动 APP 的网页,比如一些 AJAX 弹出框动画、菜单动画、图片标题展示等等,这些特效动画都能给你的网站提升一定用户体验,而且简单实用。

[图片上传失败...(image-e8ab06-1547687274152)]

Single Element CSS Spinners

在页面中,我们时常需要使用 gif 图片来实现比较炫酷的 loading 动画。Single Element CSS Spinners是一个CSS螺旋加载动画的集合。使用Single Element CSS Spinners 来替代 gif 来实现螺旋加载动画,不仅减少了请求图片的次数,同时还能够通过代码来灵活地修改动画的参数。

[图片上传失败...(image-60cde5-1547687274150)]

注:一般不建议全部拿来使用,而是使用哪个动画效果就拷贝对应的样式。

四、动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

60fps 与设备刷新率

目前大多数设备的屏幕刷新率为60fps(Frame per Second),即每秒60帧。因此,如果在页面中有一个动画或渐变效果,或者用户正在滚动页面,那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致,即每一帧要在16毫秒(1S/60 = 16.66ms)之内完成。如果无法完成,由于帧率的下降会导致内容在屏幕上抖动。 此现象通常称为卡顿,会对用户体验产生负面影响

浏览器渲染

在讲性能之前,我们需要先对浏览器渲染页面有一个基础的理解。

CSS 图层

浏览器在渲染一个页面时,会将页面分为很多个图层,图层有大有小,每个图层上有一个或多个节点。需要注意的是,如果图层中某个元素需要重绘,那么整个图层都需要重绘(关于重绘下面会讲到)。

渲染过程

简单来说,浏览器的渲染过程其实就是将页面转换成像素显示到屏幕上,大致有如下几个步骤:

[图片上传失败...(image-ea62b7-1547687322300)]

  • Javascript操作: 一般来说,我们会使用 JavaScript 来实现一些交互操作。比如用往页面里添加一些元素,切换显示隐藏等
  • style 样式计算: 该过程根据 CSS 选择器,获取每个元素匹配的 CSS 样式并计算其最终应用样式
  • Layout 布局:该过程计算元素要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素,例如 <body> 元素的宽度一般会影响其子元素的宽度以及树中各处的节点,因此对于浏览器来说,布局是经常发生的
  • Paint 绘制:本质上就是填充像素的过程。包括绘制文字、颜色、图像、边框和阴影等。也就是绘制元素所有的可视效果
  • Composite 渲染层合并:在每个层上完成绘制过程之后,浏览器会将所有层按照合理的顺序合并成一个图层,然后显示在屏幕上

如果我们需要提高动画的性能,需要做的就是减少浏览器在动画运行时所需要做的工作。当 CSS 在进行动画时,其不同属性值引起的改变,重新渲染可能会有三种执行路径:

  • A:layout -> paint -> composite
  • B:paint -> composite
  • C:composite

很明显,最短路径的 C 动画性能是最高的,所以我们在使用动画的时候就得考虑使用什么属性,以尽量减少执行路径。

动画属性

CSS 的属性大致分为三类:布局类(layout),绘制类(paint),合成类(composite)。

重排(reflow)

由元素的布局类属性改变所触发的行为过程,我们称为 reflow,也叫做 relayout(重新布局)。当某个节点 reflow 时会重新计算节点的尺寸和位置,还可能会引起其它节点的 reflow。

该系列属性的改变,会执行路径 A 进行重新渲染,所以性能是最差的。(这充分说明,重排会引起重绘)

触发重排的属性

盒子模型相关属性会触发重布局:

  • width
  • height
  • padding
  • margin
  • display
  • border-width
  • border
  • min-height

定位属性及浮动也会触发重布局:

  • top
  • bottom
  • left
  • right
  • position
  • float
  • clear

改变节点内部文字结构也会触发重布局:

  • text-align
  • overflow-y
  • font-weight
  • overflow
  • font-family
  • line-height
  • vertival-align
  • white-space
  • font-size

重绘(repaint)

由绘制类属性改变触发节点重新绘制其可视效果的过程,我们称为 repaint。

该系列属性的改变,会执行路径 B,所以性能一般。

触发重绘的属性

修改时只触发重绘的属性有:

  • color
  • border-style
  • border-radius
  • visibility
  • text-decoration
  • background
  • background-image
  • background-position
  • background-repeat
  • background-size
  • outline-color
  • outline
  • outline-style
  • outline-width
  • box-shadow

上面的属性由于不会修改节点的大小和位置,因此不会触发重排,其只是改变了节点内部的渲染效果,所以只会进行重绘以下的步骤。

composite

目前只有两个属性属于 composite 类:

  • transform
  • opactiy

该系列属性的改变,会执行路径 C,所以性能最佳。

如果想了解更多 CSS 中会影响 Layout、Paint 和 Composite 的属性,可参考:CSS Triggers

优化技巧

减少动画元素

减少动画元素,是动画性能优化中首先需要完成的。通过审查页面动画 DOM 元素结构,去除不必要的动画元素,减少元素的数量,相应地会减少布页面局和绘制的时间。

尽量使用 fixed、absolute 定位

对于动画元素,尽量使用用 fixed、absolute 定位方式,避免影响到其他节点重排。

尽量只改变transform和opacity

能用 transform、opacity 优先使用,其属性的改变不会发生重排和重绘。如位移操作的,可以使用translate 来实现,渐隐渐现效果可以使用 opacity 属性来实现。

恰当开启硬件加速效果

对动画元素应用transform: translate3d(0, 0, 0)will-change: transform 等来开启硬件加速。通常开启硬件加速可以让动画变得更加流畅。但这里需注意,在不需要的时候需去掉避免过多的内存消耗。

transform: translate3d(0, 0, 0);

transform: translateZ(0);

will-change: transform;

更多阅读

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容