目录
1、前端绘图利器-Raphael
2、前端如果使用Raphael绘制流程图会怎样？
今天我们展示一下Raphael经常使用的API，而且该API能够帮助我们完成很多工作。先看看效果：
一个元素在指定路径上做匀速运动。
如果我们要完成这个效果需要运用物理知识：匀速运动公式等；注意“等”；前提你还是学校的学霸，你还记得公式。进入公司后，往往我们开始掉头发，生成肉体游泳圈，哪里还记得什么公式呢。
科普
匀速运动公式：v=s/t 变形公式：s=vt,t=s/v
平抛运动常用公式：
（1）h=1/2gt2 ；（2）x=v0t；（3）vy=gt。
以上这些公式能应用到程序里面完成今天这个运动效果吗？相信你自己心中已经有答案了。
需要使用到的Raphael-API
paper.circle(x,y,r)// 圆形paper.path([pathString]) // 绘制横线箭头paper.text(x,y,text)// 绘制文本Raphael.getTotalLength(path)//获取路径长度Raphael.getPointAtLenght(path,length)// 获取点位分析一下
物体要完成直线运动需知道物体的起点和终点。这是完成直线运动两个关键点的坐标。
物体要完成曲线运动需要用到运动公式，但是今天我们不需要这么复杂的计算，只需要使用一个简单的API和语法就可以了。现在我们需要确定曲线运动拐点的坐标即可（上图的红色弧度点）。
创建两个圆形对象起点(start)和终点(end)
创建运动物体对象(ball)
创建运动轨迹线(line)
创建运动轨迹线这里使用SVG Path语法，通过C命令进行曲线绘制。命令帮助文档如下：
svg path命令帮助文档
代码片段
定时绘图
1、我们需要计算运行总长度和获取停留点的坐标
获取总长度：
var runLength = Raphael.getTotalLength(ballline.path) // path为运动轨迹线
获取停留点的坐标：
// 获取球运动的坐标
var point = Raphael.getPointAtLength(this.line.path, this.step)
2、定时运动重绘算法
代码片段
说明：这里主要讲解思路，如需完整代码请@作者或者留言
是否期待更多精彩讲解，可以点赞鼓励一下+1,未完待续......
