手把手教你canvas动画（汉堡图标二）

老样子，动画镇楼！

汉堡图标.gif

聊聊动画和加速度

上一章讲到如何画一条直线，大家做好准备，到最精彩的制作动画的阶段了！

如果错过了上一章，猛戳下面跳转：

手把手教你canvas动画（汉堡图标一）
还记得上一章讲到的帧动画吗，现在就调用这两个函数，现在就不得不说这边定义的两个变量了！

var  velocity     = 0,               //变成叉的运动速度
      a           = 0.05,            //从两条线变成一个叉的加速度
      circleA     = 0.00124,         //画圆的加速度

形成动画的核心：
位置随着时间的推移发生变化！
因此就用到上文讲到的函数：setTimeout
我们先展示划线函数！

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();
}

function update() {
    velocity ＝ 1;
    upLine += velocity;
    downLine -= velocity;
    circlePI += circleV;
    drawTheLine();
    setTimeout(update, 1000/120);
}

先来点运动，不是最后酷炫的效果，就让它动起来

这时候就需要知道一定的物理知识了，哦，还有一点大学里的微积分。

大家现在物理水平停留在初中，知道了一个酷炫的公式！！

s = vt（距离等于速度乘以时间）

上面的函数每次调用时，汉堡图标上面那根线的右半部分会下移一点，下面那根会上来一点，让我们两根相亲相爱吧！
然后动画效果就会变成下图的效果！

杆子相亲相爱.gif

别别别啊！说好的相亲相爱啊！怎么没有在一起，而是下去了呐！
其实很简单！没有设置碰撞点！没有碰撞哪来的火花，那么问题来了，怎么设置碰撞哪，别吊我胃口啊！

function update() {
    if (upLine < canvasHeight/2 + 40) {
        upLine += velocity;
        middleLineY += velocity;
        downLine -= velocity;
        circlePI += circleV;
        drawTheLine();
        setTimeout(update, 1000/120);
    } else {
        return;
    }
}

这边由于便于理解，不采用钩子模式了。
碰撞就是判断！判断是不是到了你想到的位置，如果到了，返回空。

      问：如果没到怎么办啊！
      答：是不是傻！给我继续动！

如果没到就继续调用自身！

现在，加特效！

好啦！现在能均匀的动了，可是他超级超级难看！在这个物理社会里面，线性运动几乎不可能而且很不符合现代的交互原理，那怎么办呐，作为程序员真的做不了UI的活了吗？是不是应该洗洗睡了，和产品经理大吵一顿或者被UI鄙视一顿啊（他几乎不会技术嘿嘿嘿）！
当然不可能，生为高贵又聪明机智的程序员，怎么可能难的倒他！哼！

在加特效之前，我们先升级一下自己，把自己升级到高中。

在高一我们学习了加速度，还记得公式吗？（就是那个初速度为零的那个公式，粑粑高中物理好的很呐！反正也没人来查，吹点牛）
s = a*at
啦啦啦！告诉你吧，这个没用的啦！因为你只知道多久调用一次时间函数，也就是说你不知道总的时间（其实是知道的，但是这样很烦，就不这样子啦哈哈哈，而且要加一个全局变量，纪录第几次调用，浪费内存空间的事情程序员不会做的）

那怎么办！又蒙了！是时候把自己升级到大学了！大学学了微积分，这边就要用到微分的思想！下面给高中没有学习微积分的同学解释一下什么是微分。

微分思想的个人理解（一条线的弯曲之路）：

你想要画一个条曲线，微分的思想是把一条曲线无限等分，把每一份看成直线，那在人眼看起来就变成了机智的曲线啦！
由于每秒调用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图标的教程。