Open zhouzhongyuan opened 7 years ago
Property | Translate | Key Point | Example |
---|---|---|---|
animation | 动画 | keyframes | animation |
transition | 过度 | transition: width 2s; | transition demo |
tranform | 变换 | RST | tranform |
近些年来,现代浏览器借助于显卡的优势改变了渲染操作:通常被笼统的称为“硬件加速(hardware acceleration)”。 以Chrome为例,在硬件加速渲染通道下,复杂的页面会被分为多个层(Layer), Chrome对各个层分别进行排版、绘图,再将绘图结果作为“纹理”上传至GPU, 由GPU完成层的3D变换(transform)等操作,最后再将GPU渲染好的层图像进行复合操作(Compesite Layers),得到最终的画面结果。 因此,通过3D变换实现的位移、旋转、缩放将不会触发浏览器重绘(除非层的内容发生改变)。 可见,可以避免重绘的层模型对于动画调优有着重大意义。
Layer: Ctrl + Shift + P, search 'layer'
图1(toolBarExpand) 图2(collapseView) 图3(toolBarCollapse)
图1 + 图2 -> 图3 图1 立马消失 图3 透明度逐渐降低 图2 高度逐渐变为0