1.目标——文字爆炸（难度：4.0）
本期我们的目标是制作文字爆炸动画.文字逐个炸裂成碎片，然后再从碎片还原成文字的动画！碎片会随机乱飞，旋转，变成透明，然后再还原.
2.分析需求——庖丁解牛
1.首先是图片如何变成碎片的，其实是用AI将文本切割成碎片，然后把SVG数据导入到HTML文件中使用
2.碎片的爆炸过程，就是碎片向四处进行平移的过程，平移中碎片逐渐变成透明
3.碎片的旋转和缩放是个严峻的问题，因为SVG的旋转缩放都是以SVG画布（0，0）坐标点为中心的，需要配合平移，来实现围绕中心的旋转和缩放
4.旋转和缩放需要计算碎片的中心，需要从<path>标签的参数中提取坐标并计算，用到正则表达式
此次不再用SMIL动画，而是通过JS实时逐帧刷新，这个过程比较复杂，但能获得良好的浏览器兼容
。。。
5.JS动画的核心问题
5-a 动画插值
本例实现线性插值，什么是插值呢？插值就是根据动画运行的时间比例，来决定动画的效果数值。如果是线性插值，如果动画时长10s，移动100px，此刻运行到5s，插值应该是：
100px * (5s/10s) = 50px
时间运行比例和动画数值改变比例相同，就是线性插值，写成公式就是
value=begin + (end - begin) * (time / duration)
另外还有个运行方向(爆炸和聚合)的问题，想让动画反向就把begin 和 end 对调.
。。。
更多内容欢迎大家扫码订阅《躁动的web动画》，有更多精彩动画的教程和源代码，每周更新
