16. CSS动画

16. CSS动画

动画的原理

动画的出现是人脑的bug

动画的定义

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

动画的概念

帧：每个静止的画面都叫做帧

播放速度：每秒24帧（电影）或者每秒30帧（游戏）

一个最简单的例子

https://jsbin.com/fifesox/1/edit?html,css,js,console,output

把一个div从左往右移动

moving square

var n = 1

var id = setInterval(()=>{
  if(n <= 200){
  demo.style.left = n + 'px'
  n = n + 1
  }else{
    clearInterval(id)
  }
},1000/60)

setInterval有个问题就是不会自己停下来，需要在一开始获取他的id，然后用clearInterval(id)来让它暂停

如何看CSS在浏览器中的性能？

在开发者工具中随便选哪个tab，然后敲Esc键，在三个点那里调出Rendering，选择Paint flashing，就会在浏览器每次渲染的时候高亮。

Screen Shot 2022-01-02 at 10.15.54 AM

参考文章

Google团队写的文章（右上角中文）

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

查看CSS各属性触发什么

CSSTriggers.com

浏览器渲染原理

浏览器渲染过程

1. 根据HTML构建HTML树（DOM）

2. 根据CSS构建CSS树（CSSOM）

3. 将两棵树合并成一颗渲染树（render tree）

4. Layout布局（文档流，盒模型，计算大小和位置）

5. Paint绘制（把边框颜色，文字颜色，阴影等画出来）

6. Compose合成（根据层叠关系展示画面）

如何更新样式

一般我们用JS来更新样式

div.style.background = 'red'
div.style.display = 'none'
div.classList.add('red')//class的效率更高
div.remove()//直接删除节点

那么这些方法有什么不同吗？

有三种不同的渲染方式

Screen Shot 2022-01-02 at 1.24.53 PM

第一种：全走

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

例子：http://js.jirengu.com/jagel/1/edit?html,css,js,output

第二种，跳过layout

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

例子：http://js.jirengu.com/jidam/1/edit?html,css,js,output

第三种，跳过layout和paint

改变transform，只需composite，注意必须全屏查看效果，在iframe里看有问题

例子：http://js.jirengu.com/wusew/1

⚠️如果想知道CSS触发浏览器的哪个流程，直接看https://csstriggers.com/，这个网站已经把所有属性全试过了。

前端高手不用left做动画

用transform（变形）

原理

transform:translateX(0 => 300px)

直接修改会被合成，需要等一会修改

transition过渡属性可以自动脑补中间帧

注意性能

并没有repaint（重新绘制）

比改left性能好

CSS动画优化（面试可能会问到）

没什么技术含量，

答案都在Google写的文章里，谁看完谁牛X

有5%的几率面试的时候会问到，答出用tranformX代替left基本已经满分，但是要把下面两个JS优化和CSS优化也答到。

JS优化

使用requestAnimationFrame代替setTimeout或setInterval

CSS优化

使用will-change或translate

没错，完全就是死记硬背

transform全解

完整看MDN

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

一定要自己试一遍

transform四个常见的功能

位移translate

常用写法

translateX(<length-percentage>)
tranlateY(<length-percentage>)
translate(<length-percentage>,<length-percentage>?)
translateZ(<length>)//且父容器perspective
translate3d(x,y,z)

https://jsbin.com/fifesox/edit?html,css,output

translateX就是x轴上位移

translateZ是垂直于视点位移

.wrapper{
  perspective:1000px;//设定视点
  border:1px solid black;
}

translateZ

其他translate的用法

transform:translate(50px, 50px);

tranform3d(50px, 50px, 100px)

https://jsbin.com/fifesox/3/edit?html,css,output

一些使用上的经验

一般都需要配合transition过渡

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

如何用translate让绝对定位元素居中

Screen Shot 2022-01-02 at 5.13.51 PM

#demo {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%); <=======重点

}

.wrapper {
  border: 1px solid black;
  position: relative;
  height:500px;
}

要学会看懂MDN的语法示例，有助于自学

缩放 scale

常用写法

scaleX(<number>)//变粗
scaleY(<number>)//变高
scale(<number>,<number>?)

http://js.jirengu.com/jucal/1/edit?html,css,output

旋转 rotate

http://js.jirengu.com/jiquq/1/edit?html,css,output

常用写法

rotate([<angle>|<zero>])//2d视角
rotateZ([<angle>|<zero>])//2d视角 垂直于视角
rotateX([<angle>|<zero>])
rotateY([<angle>|<zero>])
rotate3d太复杂，无法用语言表述

倾斜 skew

http://js.jirengu.com/tazer/1/edit?html,css,output

常用写法

skewX([<angle>|<zero>])
skewY([<angle> | <zero>])
skew([<angle> | <zero>],[<angle> | <zero>]?)

经验

用得较少，用到时再搜skew MDN文档

transform多重效果

组合使用

组合使用的时候用空格隔开即可

transform:scale(0.5) translate(-100%, -100%);
transform:none;//取消所有

跳动的心

实践：http://js.jirengu.com/nonud/1/edit?html,css,output

方方心得：

• CSS需要你有想象力，而不是逻辑

• CSS给出的属性都很简单，但是可以组合得很复杂

https://jsbin.com/cotufom/1/edit?html,css,output

transition过渡

作用

补充中间帧

语法

transition:属性名 时长 过渡方式 延迟
transition:left 200ms linear
可以用逗号分隔两个不同属性
transition:left 200ms, top 400ms
可以用all代表所有属性
transition:all 200ms
过渡方式有：linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier | step-start | step-end | steps 具体含义要靠数学知识

opacity从1到0，尽管元素消失，但是还是占着位置的。

⚠️并不是所有属性都能过渡

• display:none => block 没法过渡

• 一般改成visibility:hidden => visible

• display和visibility的区别自己搜一下

• background颜色可以过渡吗

• opacity透明度可以过渡吗

过渡必须要有起始，一般只有一次动画，或者两次，比如hover和非hover状态的过渡

如果除了起始，还有中间点，怎么办？

两种办法

使用两次transform

.a === transform ===> .b

.b === transform ===> .c

如何知道到了中间点呢？

用setTimeout或者监听transitionend事件

http://js.jirengu.com/buwah/1/edit?html,css,js,output

使用animation

声明关键帧

添加动画

http://js.jirengu.com/peran/1/edit?html,css,output

提问：如何让动画停在最后一帧

搜索css animation stop at end

网友给出的答案是加个forwards

animation: 1.5s ease 1s 10  reverse forwards xxx;

http://js.jirengu.com/lodoy/1/edit?html,css,output

@keyframes完整语法

标准写法

搜索keyframes MDN讲的很清楚

一种写法是from to

另一种写法是百分数

@keyframs slidein{
 from{
 transform:translateX(0%);
 }
 to{
 transform:translateX(100%);
 }
}

@keyframes identifier{
0% {top: 0; left: 0;}
30% {top: 50px;}
68%, 72% {left:50px;}
100% {top:100px; left:100%;}
}

//百分比代表关键帧

animation

缩写语法

animation:时长 ｜ 过渡方式 ｜延迟 ｜次数 ｜ 方向 ｜ 填充模式 ｜ 是否暂停 ｜ 动画名；

• 时长：1s或者1000ms

• 过渡方式：跟transition取值一样，如linear

• 次数：3或者2.4或者infinite

• 方向：reverse | alternate | alternate-reverse

• 填充模式：none | forwards | backwards | both

• 是否暂停：paused | running

• 以上所有属性都有对应的单独属性

animation和红心

https://jsbin.com/cotufom/2/edit?html,css,output

答疑：https://jsbin.com/diwilum/edit?html,css,js,output

按照屏幕上敲的，为什么不动

方方：#demo.start, .start和demo之间不能用空格，修改之后如下

https://jsbin.com/diwilum/3/edit?html,css,js,output