概念

每个静止的画面叫帧，影视一般24帧/秒，游戏则更高。

实现动画的3种方式

2B方式，通过定时器实现dom操作一点一点地修改元素的位置
小动画，transition，只要有class的变化就会触发过渡效果
- 比如setTimeout延时执行addClass，因为倘若你不延时直接js中写死addClass操作的话，那实际上没有发生'class变化'，没有变化哪来的过渡呢？
- 比如回调函数绑定给click事件也可以，点击后class产生变化，触发过渡效果
终极动画，animation+keyframes

transition与animation的区别

前者无法去精确操纵啊
后者可以按百分比设置啊

transition 与animation 属性详解

transition

transition: property duration timing-function delay;
/*
property：执行过渡的属性
duration：执行过渡的持续时间
timing-function：动画的变化速度 通常给linear 匀速
delay：延时多久执行
*/

animation

iteration-count 重复次数 通常给infinite
animation-direction 播放方向 通常给alternate 比如你设置了最初红色终点蓝色那么就会红蓝红蓝这么下去
- 初始是normal也就是回到起点
fill-mode 动画结束的时候回到原点还是保持在终点？ 通常会用到 forwards这个属性以维持在终点状态
- 初始值none也就是到了终点以后立马变成原点，这对于动画效果来说会挺突兀的

实现一个最简单的方块位移的CSS动画

setInterval+left --- css渲染性能不佳
setTimeout+addClass transform+transition --- 推荐, css渲染性能好
代码示例 (第二种方式全程只渲染两次)

当然还可以用animation

chromeDevTool查看css rendering/repainting

渲染引擎有哪些？

WebKit --- safari
Blink --- chrome,opera用的渲染引擎,Blink前身是WebKit Chromium,原本是WebKit的分支
Trident --- IE
Gecko --- firefox
EdgeHTML --- Edge 注:chrome为每个tab页面启用单独的进程，即每个tab都有独立的渲染引擎实例

浏览器渲染原理

想了解浏览器的渲染原理就要去各家浏览器官网查看

什么是CSS渲染步骤？

CSS渲染步骤就是浏览器渲染步骤的最后三步:布局->绘制->合成

csstriggers---用于查看不同的css属性分别会触发哪几步css渲染步骤

如何用JS更新样式

id.style.background="red"; // 不推荐
id.classList.add("newClass"); // 推荐，classList是H5的新api

JS更新样式时会触发哪几步浏览器渲染机制？

第一种，layout->paint->composite都要经历一遍
第二种,不再重新layout而是paint->composite
第三种,只composite，比如 transition+transform

JS更新样式导致触发浏览器渲染机制的三种类型

CSS动画优化！注意这里的优化是针对CSS动画

以下内容参考自google优化指南

坚持使用 transform 和 opacity 属性更改来实现动画。
使用 will-change 或 translateZ 提升移动的元素。
避免过度使用提升规则；各层都需要内存和管理开销。
使用requestAnimationFrame来替代setInterval与setTimeout

transform-origin 形变原点

元素默认基点就是其中心位置

transform 4个常用属性

translate
skew
rotate
scale

translate(-50%,-50%) 常用于绝对定位元素的居中

  top:50%; //设置在父容器的正中间
  left:50%; //设置在父容器的正中间
  transform:translate(-50%,-50%) //回撤自身元素的半个身位

代码示例

rotate一般用于loading加载

transition 过渡用于补中间帧

transition:all .5s linear; // 千万注意别把s , ms这类时间单位漏了

不是所有css属性都可以transition的

display:block ===> none //无效
visibility:visible ===> hidden //推荐

ontransitionend事件可以当一个元素具有transition属性时，结束动画时执行一些js

@keyframes 动画

@keyframes animationName{ 
  0%{
    /* transform:none; */
  } 
  66.6%{
    transform:translateX(200px)
  }
  100%{
    transform:translate(200px,150px)
  } 
}

animation:1s animationName; /* 为动画元素添加animation属性，指定你要用的动画*/
animation:animationName 1s; /* 这是完全错误的顺序 */

注意,animation属性值得书写是有严格顺序的 animation-MDN

onanimationend事件

一个keyframes实例

CSS动画制作一个跳动的心

transform+transitioin版本 keyframes+animation版本

什么时候会触发repaint?

只要页面发生改变就会触发，不论是视觉上的，或者是结构上

什么时候会触发reflow?

页面上的元素发生尺寸大小位置的改变才会触发reflow，也就是重新计算

CSS动画 浏览器渲染原理

概念