Web动画的困境与解法
CONTENT
⽬录
1 背景
2 困境
3 解法
S
4 总结
为何要做动画
营销活动
业务形态
常驻游戏
宣传⻚
优先级不⾼，再排吧
实现不了，不给改了
上线艰难
以前的不能⽤吗
低端机卡爆了
崩溃增多了，要下线
还原度
三座⼤⼭
性能
稳定性
CONTENT
⽬录
1 背景
2 困境
3 解法
S
4 总结
难点在哪⾥
烟花的爆发⼒再强⼀点
还原度
提⾼初速度，提⾼速度曲线的下降斜率
Translate By ranran
庞⼤的渲染数据
运动衔接需要再流畅顺滑⼀点
三次曲线关键点的相邻控制点斜率必须
相同
Translate By ranran
还原度
不同平台渲染差异
叠加模式：正常 强光 柔光 变亮 变暗
（ R，G，B ）
⽩⾊（ 1，1，1 ）
⿊⾊（ 0，0，0 ）
（ 0.9，0.8，0.4）*（ 1，1，1 ）+ （ 0.9，0.8，0.4 ）=（ 1，1，0.8）
（ R，G，B ）*（ 1，1，1 ）+ （ R，G，B ）
性能
简化运算
性能
GPU加速
CPU
GPU
性能
GPU加速
稳定性
图⽚内存压⼒
⽂件⼤⼩：200k —>20k
内存⼤⼩：没有变化
稳定性
压缩纹理
图⽚内存减少70%
稳定性
分级策略
CONTENT
⽬录
1 背景
2 困难
3 解法
S
4 总结
如何协同⼯作
和⼿写代码相⽐，Lottie是⼀个更⾼效的⽅案
⽬前解法
1. 动态性不好
Lottie的局限
2. 视觉表现单⼀
3. ⼤型动画性能堪忧
更好的解法
Mars⽹⻚编辑器
沟通鸿沟
为什么不做AE插件
Mars Player
更好的互动
丰富表现
图层
粒⼦
Hilo
播放器
滤镜
模型
⻣骼
Oasis
Tiny/Pixi
3D/2D游戏
CSS
总结
还原度
性能
更好的⼯具
低频沟通 ⾼效协同
技术向左 艺术向右
稳定性
互动是⼀盏聚光灯
让产品被⼤家看到