老样子，动画镇楼！
聊聊动画和加速度
<p>
上一章讲到如何画一条直线，大家做好准备，到最精彩的制作动画的阶段了！
<p>
如果错过了上一章，猛戳下面跳转：
<p>
手把手教你canvas动画（汉堡图标一）
还记得上一章讲到的帧动画吗，现在就调用这两个函数，现在就不得不说这边定义的两个变量了！
<p>
var velocity = 0, //变成叉的运动速度
a = 0.05, //从两条线变成一个叉的加速度
circleA = 0.00124, //画圆的加速度
<p>
形成动画的核心：
位置随着时间的推移发生变化！
因此就用到上文讲到的函数：setTimeout
我们先展示划线函数！
<p>
function drawTheLine() {
context.clearRect(0, 0, canvasWidth, canvasHeight); //调用前先清空画布
context.lineCap = 'round';
context.strokeStyle = '#AAA';
context.lineWidth = 10;
context.beginPath(); //画画咯
context.moveTo(canvasWidth/2 - lineLength, canvasHeight/2 - 40);
context.lineTo(canvasWidth/2 + lineLength, upLine);
context.stroke(); //不想画咯
context.beginPath();
context.moveTo(canvasWidth/2 - lineLength, canvasHeight/2 + 40);
context.lineTo(canvasWidth/2 + lineLength, downLine);
context.stroke();
context.beginPath();
context.moveTo(canvasWidth/2 - lineLength, middleLineX);
context.lineTo(canvasWidth/2 + lineLength, middleLineY);
context.stroke();
context.beginPath();
context.arc(canvasHeight/2,canvasHeight/2,87,0,-Math.PI*circlePI,true); //画圆咯，最先开始circlePI参数为0
context.stroke();
}
<p>
function update() {
velocity ＝ 1;
upLine += velocity;
downLine -= velocity;
circlePI += circleV;
drawTheLine();
setTimeout(update, 1000/120);
}
先来点运动，不是最后酷炫的效果，就让它动起来
<p>
这时候就需要知道一定的物理知识了，哦，还有一点大学里的微积分。
大家现在物理水平停留在初中，知道了一个酷炫的公式！！
s = vt（距离等于速度乘以时间）
上面的函数每次调用时，汉堡图标上面那根线的右半部分会下移一点，下面那根会上来一点，让我们两根相亲相爱吧！
然后动画效果就会变成下图的效果！
别别别啊！说好的相亲相爱啊！怎么没有在一起，而是下去了呐！
其实很简单！没有设置碰撞点💥！没有碰撞哪来的火花，那么问题来了，怎么设置碰撞哪，别吊我胃口啊！
<p>
function update() {
if (upLine < canvasHeight/2 + 40) {
upLine += velocity;
middleLineY += velocity;
downLine -= velocity;
circlePI += circleV;
drawTheLine();
setTimeout(update, 1000/120);
} else {
return;
}
}
这边由于便于理解，不采用钩子模式了。
碰撞就是判断！判断是不是到了你想到的位置，如果到了，返回空。
问：如果没到怎么办啊！
答：是不是傻！给我继续动！
如果没到就继续调用自身！
<p>
现在，加特效！
<p>
好啦！现在能均匀的动了，可是他超级超级难看！在这个物理社会里面，线性运动几乎不可能而且很不符合现代的交互原理，那怎么办呐，作为程序员真的做不了UI的活了吗？是不是应该洗洗睡了，和产品经理大吵一顿或者被UI鄙视一顿啊（他几乎不会技术嘿嘿嘿😄）！
当然不可能，生为高贵又聪明机智的程序员，怎么可能难的倒他！哼！
<p>
在加特效之前，我们先升级一下自己，把自己升级到高中。
<p>
在高一我们学习了加速度，还记得公式吗？（就是那个初速度为零的那个公式，粑粑高中物理好的很呐！反正也没人来查，吹点牛）
s = a*at
啦啦啦！告诉你吧，这个没用的啦！因为你只知道多久调用一次时间函数，也就是说你不知道总的时间（其实是知道的，但是这样很烦，就不这样子啦哈哈哈，而且要加一个全局变量，纪录第几次调用，浪费内存空间的事情程序员不会做的）
<p>
那怎么办！又蒙了！是时候把自己升级到大学了！大学学了微积分，这边就要用到微分的思想！下面给高中没有学习微积分的同学解释一下什么是微分。
微分思想的个人理解（一条线的弯曲之路）：
你想要画一个条曲线，微分的思想是把一条曲线无限等分，把每一份看成直线，那在人眼看起来就变成了机智的曲线啦！
由于每秒调用120次，所以可以近似看成直线，在物理学就变成了这样：
现在的位置 = 原来的位置 + (原来的速度+加速度)*很小的一段t
以上就是加特效的全部过程，下附代码：
function update() {
if (middleLineX != canvasHeight/2 - 40) {
middleLineX -= 2;
middleLineY -= 2;
drawTheLine();
setTimeout(update, 1000/120);
} else {
if (upLine < canvasHeight/2 + 40) {
if (upLine <= canvasHeight/2) {
velocity += a;
circleV += circleA;
} else {
velocity -= a;
circleV -= circleA;
}
upLine += velocity;
middleLineY += velocity;
downLine -= velocity;
circlePI += circleV;
drawTheLine();
setTimeout(update, 1000/120);
} else {
return;
}
}
}
这边由于我设定了先加速后减速，因此多了个碰撞检测，加速度是先加后减。变回🍔的时候也是一样的原理，就是反一反。
好啦！这就是所有的canvas🍔图标的教程。
