我们常见的动画

复杂一点的动画

线条动画

骨骼动画

粒子动画

低多边形动画

移动端动画技术方案

CSS3动画

SVG动画

canvas动画

webgl动画

性能和优势

canvas 2d

2d的绘图环境、形状、文字、位图

你可能不知道的canvas 2d

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

4行4列矩阵

4行4列矩阵、欧拉角

矩阵是个啥？

线性代数、方程组、坐标变换的处理器

                        
| x` |   | m00 m01 m02 m03 |   | x |
| y` | = | m10 m11 m12 m13 | * | y |
| z` |   | m20 m21 m22 m23 |   | z |
| w` |   | m30 m31 m32 m33 |   | w |

x` = m00*x+m01*y+m02*z+m03*w

y` = m10*x+m11*y+m12*z+m13*w

z` = m20*x+m21*y+m22*z+m23*w

w` = m30*x+m31*y+m32*z+m33*w
                        
                    

单位矩阵

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)

*

我都懵逼了...

what the hell ~~

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

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

这么多动画怎么下手

没做过、 性能怎么办、 纠结、

数学要好、 物理要好、

图形算法好像比处理业务逻辑要难

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

开始一个简单的

来个demo压压惊

代码好长、好麻烦～～

懒ai末期？？

快来用我的库吧

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

jcc2d

jcw2d

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

性能优化

浏览器渲染能力、硬件加速

合成层的重要性

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

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

perspective、transform3d、clip、被动触发

移动端开发

我们遇到的阻碍

设备性能

移动设备计算能力很差

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

阉割版的H5标准

PC、移动端差别巨大

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

网络

毕竟带宽那么小

合理使用资源

一些建议

不动的元素放在＃document层、要做动画的按规则划分合成层

运动物体超过10个建议用svg或canvas

合理布局，样式足以引起巨大的性能问题