CSS动画
要说的话
本文主要记录学习css动画的过程,主要讲浏览器渲染原理,translate
平移,transition
过渡,animation
动画,最后还有个小实践-跳动的💗,本文源码都有的。–资料来源饥人谷
i.动画是什么呢?
定义:
动画是一种通过定时拍摄一系列多个静止的固态图像(帧)以一定频率连续变化、运动(播放)的速度(如每秒16张)而导致肉眼的视觉残象产生的错觉——而误以为图画或物体(画面)活动的作品及其影片技术。–来自维基百科
ii.怎么写出动画效果呢?
查看动画渲染重画过程可以通过F12(或者想要查看的位置鼠标右键检查)进入开发者工具,在任意地方按esc,可以弹出一个控制台,点击控制台旁边的三个竖点(more tools),选择Rendring,勾选Paint Flashing,屏幕不断出现绿色就是浏览器在不断渲染。
- 第一种方式:
用left做动画(会经过浏览器全部步骤,浏览器渲染会介绍)
具体代码可以查看http://js.jirengu.com/kejop/1/edit?html,css,js,output
可以看到方框内一直都是绿色,说明浏览器一直在渲染,repaint不断地重复画删画删的操作。–》加重了性能负担
- 第二种方式:用transform做动画* (只经过最后composite,浏览器渲染会说到)
具体代码可以查看http://js.jirengu.com/dukek/1/edit?html,css,js,output
可以看到只有开始和结束时是绿的,说明浏览器并没有repaint–》两相对比说明比用left性能更👍。
iii.和动画息息相关的是浏览器的渲染
那就来了解一下浏览器的渲染吧。
参考自google团队,详细了解可以点击下面文字(查看具体链接地址可以用开发者工具查看)
1) 浏览器渲染过程
步骤:
-
根据HTML构建HTML树(DOM)
-
根据CSS构建CSS树(CSSOM)
-
将两颗树合并成一颗渲染树(render tree)
-
Layout布局(文档流、盒模型、计算大小和位置)–》“素描”
-
Paint绘制(把边框颜色、文字颜色、阴影等画出来)–》“填色”
-
Compose合成(根据层叠关系展示画面)–》“所有层拍平变成一层东西显示屏幕上”
三棵树有个图
相同节点和起来就是渲染树(render tree)
2)怎么更新样式呢?
一般用JS来跟新样式
比如div.styel.background = ‘red’
div.style.display = ‘none’
div.classList.add(‘red’) *
div.remove()直接删掉节点
3)这些方式有三种不同的渲染方式*
- JS / CSS > 样式 > 布局 > 绘制 > 合成
如果修改了元素的“layout”属性,也就是改变了元素的几何属性(例如宽度、高度、左侧或顶部位置等),那么浏览器将必须检查所有其他元素,然后“自动重排”页面。任何受影响的部分都需要重新绘制,而且最终绘制的元素需进行合成。
算style,可能还要走Layout,Paint,Conposite三步合成
- JS / CSS > 样式 > 绘制 > 合成
如果修改了“paint only”属性(例如背景图片、文字颜色或阴影等),即不会影响页面布局的属性,则浏览器会跳过布局,但仍将执行绘制。
- JS / CSS > 样式 > 合成
如果您更改一个既不要布局也不要绘制的属性,比如transform,则浏览器将跳到只执行合成。
4)三种更新方式
需要用到开发者工具上面所说renderng-paint flash
- 第一种,全走
div.remove()会触发当前消失,其他元素relayout
具体代码http://js.jirengu.com/fewij/1/edit?html,css,js,output
效果如下
可以看到三个方框删掉第一个空白框框后,三个框框原本位置都绿了–》证明浏览器经过了布局,绘制和合成
- 第二种,跳过layout
改变背景颜色,直接repaint + composite
具体代码http://js.jirengu.com/sovoq/1/edit?html,css,js,output
可以看到效果如下
可以看到第一个方框改变颜色为红时变绿了其他没有变色–》跳过了layout,直接paint和composite
- 第三种,跳过layout和paint
改变transform,直接composite
具体代码http://js.jirengu.com/pabegi/1/edit?html,css,js,output
效果如下
可以看到只有开始和结束被绘制,中间没有被repaint(重新绘制)–》直接composite
5)每个属性触发哪个流程推荐网站
要想知道哪个属性触发哪个流程除了自己试一遍别无他法,有个网站把所有属性都试过了
可以告诉你每一种属性到底触发的什么流程,相同属性不同浏览器可能触发的流程不同。
iv.CSS动画优化
推荐去看google的文章里面详细讲了每个步骤的优化,太长不想看可以看TL;DR(太长不想读)。
v.transform(变形)全解
推荐看transform MDN,他会把每一个属性都给你一个列子动画,并且告诉你怎么用。
transform有四个常用的功能
- translate-位移
- scale-缩放
- rotate-旋转
- skew-倾斜
一般都需要配合transition过渡
inline元素不支持transform,需要先变成block
1. translate-移动
常用写法