css动画
帧：每个静止的画面都叫做帧。
播放速度：每秒24帧
调出：Paint flashing
f12打开开发者工具，按Tab + Esc , 三个点，选择rending
一个最简单的例子
- 将div从左往右移动
var div = document.querySelector('.move')
var n = 0;
var id = setInterval(() => {
if (n <= 200) {
n = n + 1;
div.style.left = n + 'px';
} else {
clearInterval(id);
}
}, 1000 / 60);
注意性能
绿色表示重新绘制(repaint)了
css渲染过程依次包含布局。绘制，合成
其中布局和绘制有可能被忽略
前端高手不用left做动画
- 用transform变形
- 原理
transform:translateX(0=>300px)
直接修改会被合成，需要等一会修改
trasition过渡属性可以自动脑补中间帧
注意性能
并没有repaint(重新绘制)
比改left性能好
浏览器渲染原理
浏览器渲染过程
步骤:
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树(CSSOM）
- 将两颗数合并成一颗渲染树（render tree）
- Layout布局（文档流，盒模型，计算大小和位置）
- Paint绘制（把边框颜色，文字颜色，阴影等画出来）
- Compose合并（根据层叠关系展示画面）
三棵树
第一种，全走
比如：div.remove()
第二种：跳过layout
如：改变背景颜色
第三种：跳过layout和 paint
改变transform，只需要composite cssTrigger网站
里把所有属性的渲染过程都列了一遍。
css动画优化
- 没什么技术含量
答案在Google写的文章里,谁看完谁牛叉
-
JS优化
使用
requestAnimationFrame代替setTimeout或setInterval -
CSS优化
-
使用
will-change或translate
完全就是死记硬背
transform全解
tansform:translateX | translateY | translateZ
perspective离视点的距离
经验
定位居中
left:50%;
top:50%
transform:translate(-50%,-50%)
scale缩放
transform: scaleY() scaleX() scale()
用的比较少，因为会模糊
rotate旋转
transform:rotate(xxdeg) | rotateX() | rotateY() | rotateZ()
经验
一般用于360度旋转制作loading
用到时再搜索rotate MDN看文档
skew倾斜
transform: skew(15deg)
心得
css 需要你有现象力，而不是逻辑
css给出的属性都跟简单，但是可以组合得很复杂
transition过渡
作用：
补充中间帧 语法
/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;
/* property name | duration | delay */
transition: margin-right 4s 1s;
/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;
/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;
/* Apply to 2 properties */
transition: margin-right 4s, color 1s;
/* Apply to all changed properties */
transition: all 0.5s ease-out;
并不是所有的属性都能加过渡
比如：display:none 和display:block
