复杂一点的动画

线条动画

骨骼动画

粒子动画

低多边形动画

性能和优势

你可能不知道的canvas 2d

配合4*4矩阵可以完成三维图形绘制

4行4列矩阵

4行4列矩阵、欧拉角

单位矩阵

3*3矩阵可以描述2d空间内的坐标变换

                        |1  0  0|
|0  1  0|
|0  0  1|

乘以待变化的坐标(x,y) =>

|1  0  0|   |x|
|0  1  0| * |y|
|0  0  1|   |1|

x` = 1*x + 0*y + 0*1 = x
y` = 0*x + 1*y + 0*1 = y
                    

我们无意中用到过的矩阵

1、缩放：transform: scale(1.5,0.5)

                        |a  c|   |x|
|b  d| * |y|

x` = a*x + c*y
y` = b*x + d*y

c = b = 0

所以可得 =>

|1.5   0 |   |x|
| 0   0.5| * |y|

x` = 1.5 * x
y` = 0.5 * y
                    

2、旋转：rotate(βdeg)

                        r = √(x^2+y^2)

x` = cos(β+α) * r
y` = sin(β+α) * r

sin(β+α) = sin(β)cos(α) + cos(β)sin(α)
cos(β+α) = cos(β)cos(α) - sin(β)sin(α)

cos(α) = x/r
sin(α) = y/r

x` = (cos(β)x/r - sin(β)y/r) * r = cos(β)x - sin(β)y
y` = (sin(β)x/r + cos(β)y/r) * r = sin(β)x + cos(β)y

所以可得 =>

|cos(β) -sin(β)|
|sin(β)  cos(β)|

验证下 =>

|cos(β) -sin(β)|   |x|
|sin(β)  cos(β)| * |y|

x` = cos(β)x - sin(β)y
y` = sin(β)x + cos(β)y
                    

3、位移：transform: translate(100,50)

                        x` = x + tx
y` = y + ty










所以可得 =>







|1  0  tx|   |x|
|0  1  ty| * |y|
|0  0   1|   |1|

x` = 1*x + tx*1
y` = 1*y + ty*1
w` = 1*1
                    

基于欧拉角的三维旋转矩阵

transform: rotateX(10deg) rotateY(10deg)

*

我认识的前端不是这样的 >_<||

写写脚本、做做数据与视图渲染、管管后端路由模版控制器的吗。

canvas 2d实现3D效果的原理

开始一个简单的

来个demo压压惊

快来用我的库吧

轻量、简单、高性能、不用了解底层API、做动画很顺手很顺手

jcc2d

jcw2d

两个库的共同点：轻量级、适合移动端

合成层的重要性

合理的划分合成层可以让你的css动画获得最好的性能

了解那些样式可以触发合成层

perspective、transform3d、clip、被动触发

设备性能

移动设备计算能力很差

浏览器总是无法兼容所有的GPU

阉割版的H5标准

PC、移动端差别巨大

存在不友好、不可控的H5实现

网络

毕竟带宽那么小

合理使用资源