css动画2张图过渡_CSS 渲染与动画

最新推荐文章于 2022-07-13 15:56:13 发布

weixin_39989862

最新推荐文章于 2022-07-13 15:56:13 发布

阅读量139

点赞数

文章标签： css动画2张图过渡

渲染器渲染原理

有兴趣的小伙伴可以点击下面链接阅读Google团队写的关于渲染器的文章

渲染树构建、布局以及绘制
渲染性能
使用transform来实现动画

一、浏览器的渲染过程

根据HTML构建HTML树（DOM）
根据CSS构建CSS树（CSSDOM）
将两颗树合并成一颗渲染树（render tree）
Layout布局（文档流、盒模型、计算大小和位置）
Paint绘制（把边框颜色、文字颜色、阴影等画出来）
Compose合成（根据层叠关系展示画面）

下图展示的是HTML树和CSS树合成的结果：

二、样式更新

一般我们用JS来更新样式
如xxx.style.background = 'red'
如xxx.style.display= 'none'
如xxx.classList.add('black')
如xxx.remove()
那么这些方法的不同之处在哪里呢？

第一种：全走；xxx.remove()会触发当前消失，其它元素relayout

第二种：跳过layout；xxx.style.background = 'red'改变背景颜色，直接repaint+composite

第三种：跳过layout和paint，改变transform，只需要composite

那么问题来了，我怎么知道每个属性触发了什么流程？（自己一个一个试吧！！）

不用试，已经有人帮我们试好了，https://csstriggers.com/这个网站已经试过所有属性了，自己去看吧。

*小技巧：使用Chrome开发者工具可以帮我们查看渲染过程

CSS动画的两种做法（transition 和animation）

一、动画的定义

由许多静止的画面（帧）以一定速度（如每秒30张）连续播放时，肉眼因视觉残像产生错觉而误以为是活动的画面。

举一个列子说明下：将div从左到右移动

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="demo"></div>
</body>
</html>
var n = 1
var id = setInterval(() => {
  console.log(n)
  if (n <= 100) {
    demo.style.left = n / 100 * 300 + 'px'
    n = n + 1
  }else{
    clearInterval(id)
  }
}, 1000 / 30)

原理：每过一段时间，将div移动一小段距离，直到移动到目标地点
注意性能：使用Chrome开发者工具可以清晰的看到一直在绘制（绿色表示重新绘制了）

*前端高手不用left做动画，用transform（变形），性能比left好

二、transition（过渡）

作用：补充中间帧
transition：过渡属性过渡所需要时间过渡动画函数过渡延迟时间；（all 0 ease 0 ）
语法：MDN

*注意

并不是所有属性都能过渡
display: none →block 没法过渡，一般改成visibility: hidden→visible
局限性
只能设置一个属性
需要伪类/事件触发才执行
只能设置动画初始值和结束值

三、animation（动画）

作用：用来指定一组或多组动画，每组之间用逗号相隔；可以控制到每一帧，结合@keyframes使用。
语法：MDN
两种区别
transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 @keyframes结合可以设置中间帧的一个状态；
animation 配合 @keyframes 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者js事件来配合触发；
animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
animation 可以结合 @keyframes设置每一帧，但是 transition 只有两帧；

weixin_39989862

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画2张图过渡_CSS 渲染与动画

渲染器渲染原理有兴趣的小伙伴可以点击下面链接阅读Google团队写的关于渲染器的文章渲染树构建、布局以及绘制渲染性能使用transform来实现动画一、浏览器的渲染过程根据HTML构建HTML树（DOM）根据CSS构建CSS树（CSSDOM）将两颗树合并成一颗渲染树（render tree）Layout布局（文档流、盒模型、计算大小和位置）Paint绘制（把边框颜色、文字颜色、阴影等画出来）Com...
复制链接

扫一扫