1.目标——SVG分形树（难度：3.9）
本期我们的目标是通过分形算法，利用SVG绘图元素，制作一棵分形树.树可以左右摆动，变大缩小，点击会有颜色的渐变动画.
2.分析需求——庖丁解牛
1.分形的算法都是公开的，问题在于如何将分形的算法变成SVG元素的坐标. 可以通过数学向量的技术实现.
2.分形图形一般都是一层一层的，创建图形也是由上一层计算出下一层，变色动画也可以按照层级来变化
3.分形树的放大，缩小，摆动，通过捕捉鼠标在窗口中的位置，修改树的比例参数，刷新SVG图形坐标即可
4.分型中有大量的计算，我们要控制好分形的迭代次数，保存分形的标签和坐标，用空间换取计算时间
...
4-a 坐标计算
ab向量的单位方向向量为
abx/ab_mod,aby/ab_mod
向量be的坐标
因为 be的方向 = ab向量方向
但是 be的长度！= ab的长度
所以 向量be = 向量ab / ab长度 * be长度
bex = abx/ab_mod * be_mod,
bey = aby/ab_mod * be_mod
...
更多内容欢迎大家扫码订阅《躁动的web动画》，有更多精彩动画的教程和源代码，每周更新
