CSS入门笔记5(浏览器渲染,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

paint

可以看到方框内一直都是绿色,说明浏览器一直在渲染,repaint不断地重复画删画删的操作。–》加重了性能负担

  • 第二种方式:用transform做动画* (只经过最后composite,浏览器渲染会说到)

具体代码可以查看http://js.jirengu.com/dukek/1/edit?html,css,js,output

again

可以看到只有开始和结束时是绿的,说明浏览器并没有repaint–》两相对比说明比用left性能更👍。


iii.和动画息息相关的是浏览器的渲染

那就来了解一下浏览器的渲染吧。

参考自google团队,详细了解可以点击下面文字(查看具体链接地址可以用开发者工具查看)

1) 浏览器渲染过程

步骤:

  • 根据HTML构建HTML树(DOM)

  • 根据CSS构建CSS树(CSSOM)

  • 将两颗树合并成一颗渲染树(render tree)

  • Layout布局(文档流、盒模型、计算大小和位置)–》“素描”

  • Paint绘制(把边框颜色、文字颜色、阴影等画出来)–》“填色”

  • Compose合成(根据层叠关系展示画面)–》“所有层拍平变成一层东西显示屏幕上”

三棵树有个图

tree

相同节点和起来就是渲染树(render tree)

2)怎么更新样式呢?

一般用JS来跟新样式

比如div.styel.background = ‘red’

div.style.display = ‘none’

div.classList.add(‘red’) *

div.remove()直接删掉节点

3)这些方式有三种不同的渲染方式*

  1. JS / CSS > 样式 > 布局 > 绘制 > 合成

1

如果修改了元素的“layout”属性,也就是改变了元素的几何属性(例如宽度、高度、左侧或顶部位置等),那么浏览器将必须检查所有其他元素,然后“自动重排”页面。任何受影响的部分都需要重新绘制,而且最终绘制的元素需进行合成。
算style,可能还要走Layout,Paint,Conposite三步合成

  1. JS / CSS > 样式 > 绘制 > 合成

2

如果修改了“paint only”属性(例如背景图片、文字颜色或阴影等),即不会影响页面布局的属性,则浏览器会跳过布局,但仍将执行绘制。

  1. JS / CSS > 样式 > 合成

3

如果您更改一个既不要布局也不要绘制的属性,比如transform,则浏览器将跳到只执行合成。

4)三种更新方式

需要用到开发者工具上面所说renderng-paint flash

  • 第一种,全走

div.remove()会触发当前消失,其他元素relayout

具体代码http://js.jirengu.com/fewij/1/edit?html,css,js,output

效果如下

remove1

可以看到三个方框删掉第一个空白框框后,三个框框原本位置都绿了–》证明浏览器经过了布局,绘制和合成

  • 第二种,跳过layout

改变背景颜色,直接repaint + composite

具体代码http://js.jirengu.com/sovoq/1/edit?html,css,js,output

可以看到效果如下

跳过layout

可以看到第一个方框改变颜色为红时变绿了其他没有变色–》跳过了layout,直接paint和composite

  • 第三种,跳过layout和paint

改变transform,直接composite

具体代码http://js.jirengu.com/pabegi/1/edit?html,css,js,output

效果如下

composite

可以看到只有开始和结束被绘制,中间没有被repaint(重新绘制)–》直接composite

5)每个属性触发哪个流程推荐网站

要想知道哪个属性触发哪个流程除了自己试一遍别无他法,有个网站把所有属性都试过了

推荐看网站https://csstriggers.com/

可以告诉你每一种属性到底触发的什么流程,相同属性不同浏览器可能触发的流程不同。


iv.CSS动画优化

推荐去看google的文章里面详细讲了每个步骤的优化,太长不想看可以看TL;DR(太长不想读)。


v.transform(变形)全解

推荐看transform MDN,他会把每一个属性都给你一个列子动画,并且告诉你怎么用。

transform有四个常用的功能

  • translate-位移
  • scale-缩放
  • rotate-旋转
  • skew-倾斜

一般都需要配合transition过渡

inline元素不支持transform,需要先变成block

1. translate-移动

常用写法


                
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值