动画原理
- 静止的画面（帧）以一定的速度连续播放，眼睛因视觉残像产生的错觉
- 使用 transform（变形） 来制作动画
浏览器渲染
浏览器渲染原理
- 参考文章：（网址：web.dev ；作者：Panl Lewis）
- 《渲染树构建、布局及绘制》
- 《渲染性能》
- 《使用transform来实现动画》
浏览器渲染过程
步骤：
更新样式：
第一种：
- 全走
div.remove()会触发当前消失，其他元素relayout
第二种：
- 跳过layout
- 改变背景颜色，直接repaint + composite
第三种：
- 跳过 layout 和 paint
- 改变 transform 只需要 composite
CSS动画优化
- 参考文章：（网址：web.dev ；作者：Panl Lewis）
- 《避免大型、复杂布局和布局抖动》
- 《取消输入处理程序》
- 《优化JavaScript执行》
- 《减少样式计算范围和复杂性》
- 《坚持仅使用复合器的属性并管理管理图层技术》
transform全解
- MDN有详细介绍
- 常用功能：
- translate： 位移
- scale： 缩放
- rotate： 旋转
- skew： 倾斜
- 注意：
- 一般要配合 transition 过度
- inline 元素不支持 transform ，需要先变成 block
transform:translate
- 常用写法：
translateX( px | % )
translateY( px | % )
translate( __ , __ )
translateZ( px ) 且父元素写 " perspective: ?px "
translate3d( x , y , z )
- 经验
translate(-50%,-50%)可以做绝对定位元素的居中
<CSS>
{
...
left:50%;
top:50%;
transform:translate(-50%,-50%);
...
}
transform:scale
- 常用写法：
sealeX(1.5) 横向放大1.5倍
sealeY(1.5) 纵向放大1.5倍
seale(1.5) 整体放大1.5倍
seale(1.5,2) 横向放大1.5倍；纵向放大2倍
- 经验
- 用得少，因为容易出现模糊
transform:rotate
- 常用写法：
rotate(45deg) 绕z轴旋转45度
rotateZ(45deg) 绕z轴旋转45度
rotateX(45deg) 绕x轴旋转45度
rotateY(45deg) 绕y轴旋转45度
- 经验
- 一般用360度旋转制作loading
transform:skew
- 常用写法：
skewX(45deg)
skewY(45deg)
skew(45deg,45deg)
多重效果：
- 空格隔开就行
例如：
transform:seale(1.5) translate（-100%,-100%）
transform:none;取消所有变化
代码实例：（鼠标点击会跳动的红心）
transition 过渡
作用：
补充中间帧
语法：
比如：
transition：left 200ms linear 3s
- 可以用 “ , ”（逗号）分割不同的属性
transition：left 200ms , top 400ms
- 可以用 all 代表所有的属性
transition：all 200ms
过渡方式：
- liner :匀速
- ease :（默认） 慢-快-慢
- ease-in :低速开始，逐渐加速
- ease-out :逐渐低速结束
- ease-in-out :低速开始与结束
- cubic-bezier(n,n,n,n) :运行在三次贝塞尔函数中自己所定义的值
关于过渡：
- 不是所有的属性都可以过渡：比如display，z-index
display:none => display:block 不能过渡，反过来也不行；
一般我们改成 visibility：hidden => visible
- 只要是有过渡规律的就可以过渡，比如颜色和透明度（opacity）
- 过渡必须有起始（一般只有一次动画，或者也可以是两次）
含有“中间点”的过渡
- 实现两次动画的方法：
第一种：
如何知道中间点？
代码实例：js.jirengu.com/buwah/1/edi…
第二种：
- 声明关键帧： @keyframes
- 添加动画
如何使动画停在最后一帧？ => 加个forwards
例如：animation:xxx 1s; => animation:xxx 1s forwards;
代码实例：js.jirengu.com/peran/1/edi…
animation
@keyframes 语法：
第一种：
@keyframes slidein{
from{
transform:translateX(0%);
}
to{
transform:translateX(100%);
}
}
第二种：
@keyframes indentifier{
0%{top:0;left:0;}
30%{top:50px;}
68%,72%{left:50px;}
100%{top:100px;left:100px;}
}
animation 缩写语法：
代码实例：（自动跳动的红心）
链接：js.jirengu.com/xohiporiwe/…
「资料来源：饥人谷」
