动画！动画！动画！
算法、算法、算法、
Created by jasonChen
我们常见的动画
其他的动画
移动端动画技术方案
CSS3动画
SVG动画
canvas动画
webgl动画
性能和优势
| 方案 | 优势 | 缺点 | 性能 |
|---|---|---|---|
| CSS3 | 简单、支持广 | 渲染量少 | 费劲 |
| SVG | 矢量、线条 | 兼容性 | 性能一般 |
| canvas | 点线面全能 | 以来GPU | 性能较好 |
| webgl | 十项全能 | 重度依赖GPU | 非常好
|
相关算法
数学、物理、信号、图像
四元数
// 三维空间旋转的基础
// 能够进行球面插值
p = x*i+y*j+z*k+w
欧拉角
最常用的描述物体旋转的方法
矩阵
所有三维空间的缔造者
| m00 m01 m02 m03 | | x |
| m10 m11 m12 m13 | * | y |
| m20 m21 m22 m23 | | z |
| m30 m31 m32 m33 | | w |
柏林噪声
高阶brezier实时算法（二维、三维）
boids仿生算法
三角函数
动量、冲量
物体运动的运动因素模拟
向量知识
光线追踪
巴拉巴拉...
我都懵逼了
what's the hell ~~
我认识的前端不是这样的 >_<
但是！我们是做营销活动的
用一用这些算法
这么多动画怎么下手
没做过、 性能怎么办、 纠结、
数学要好、 物理要好、
算法好像比业务算法要难
快来用我的库吧
轻量简单、不用了解底层API、做动画很顺手
轻量级、适合移动端
移动端开发
我们遇到的阻碍
设备性能
移动设备计算能力很差
浏览器总是无法兼容所有的GPU
阉割版的H5标准
PC、移动端差别巨大
存在不友好、不可控的H5实现
网络
毕竟带宽那么小
合理使用资源
一些建议
不要逐帧优先
首屏尽量每一k都是合理的
多试试transform类型的动画
偶尔做一些很牛B的
我是不是可以向设计师提需求？
不动的元素放在＃document层、要做动画的按规则分成
运动物体超过10个建议用svg或canvas
等上了U4我们动画都用webgl吧
平时多预演、用时才有底
多交流分享知识