11、《每周一点canvas动画》——缓动动画

本系列文章代码文件

前面的章节我们介绍了许多基本的动画，在本节我们将使用这些基本的动画来创建一些高级动画。今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ease 这个概念。但我们今天要介绍的是如何在canvas中实现这样的动画效果。本章主要内容：

1. 百分比运动的概念

2. 定点缓动动画

3. 非定点缓动动画

4. 只能用在运动中吗

1.百分比运动

百分比运动的概念是我们讲解缓动动画，包括下一节弹性动画的核心。这两个动画的核心概念都是基于百分比运动，只是作用的物理元素不同。这里我们把概念都一起介绍了，下一节就可以直接上菜。

缓动动画和弹性动画这两种动画，都是让一个物体从当前位置移动到一个我们设定的目标位置。在缓动动画中，物体是由快到慢的滑行到目标位置，然后停止。在弹性动画中，物体运动到目标位置的时候，并不会立刻停止而是以目标位置为中心点做一个类似弹簧的往复运动，最终会停止在目标位置。为了让大家有个更直观的认识，来两张动图。

缓动动画(easing)

弹性动画(spring)

两种动画都有着一样的流程：

1. 设置目标位置

2. 计算到目标位置的距离

3. 根据距离百分比计算速度或加速度

这两种动画唯一的不同是：缓动动画中，距离的百分比作用于速度，物体距离目标位置越远，运动的速度就越大，随着物体距离目标位置越来越近，速度逐渐降低为零，停止在目标位置。弹性动画中，距离的百分比作用于加速度，同样是距离目标位置越远，加速度越大，随着距离越来越近，加速度最终为零。

2. 定点缓动动画

在上图的缓动动画中我们可以看到，小球运动到目标位置的速度，有一个由快到慢的过程。这里我们是怎样实现的呢？其实原理很简单：

easing就是我们设定的缓动参数，每一帧都乘以距离，随着距离的不断减小，速度也就不断减小。光说不练假把式，上代码：

    <canvas id="canvas" width="500" height="500" style="background-color: #000;">
    </canvas>
    <script type="text/javascript" src="../js/utils.js"></script>
    <script type="text/javascript" src="../js/ball.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d');

            var ball = new Ball(20, "red"), 
                easing = 0.05,  //设置缓动参数
                targetX = canvas.width/2; //设定目标位置
                ball.y = canvas.height/2;

            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

                //速度计算
                //随着ball.x的增大， (targetX - ball.x)的值不断减小， 导致vx不打断减小
                var vx = (targetX - ball.x)*easing;

                ball.x += vx;

                ball.draw(context);
            }())
        }
    </script>

效果图这里就不上了，和上面展示的一样。这里只是展示了水平方向的运动，你也可以加上竖直方向或者任意的目标位置：

var targetX = 任意位置;
var targetY = 任意位置;

然后再动画循环中：

    var vx = (targetX - ball.x)*easing; 
    var vy = (targetY - ball.y)*easing;

ok,我们就可以得到向任意位置运动的缓动动画了！是不是很简单。

当然，这里还有个问题。为了提升动画的性能，在这里我们可以做个条件限制。在动画循环里：

    var stopAni = window.requestAnimationFrame(drawFrame, canvas);
    ...
    var dx = targetX - ball.x;
    if(Math.abs(dx)<1){
         ball.x = canvas.width/2;
         //停止动画
         window.cancelAnimationFrame(stopAni);
      }else{
         var vx = dx*easing;
         ball.x += vx;
     }
     ...

3.非定点缓动动画

说到非定点缓动动画，你有没有想到在前几章里讲到的跟随鼠标运动的箭头啊！好吧，可怜的鼠标我们这次又要用到你了。我们让鼠标的位置作为我们的目标位置（target），然后让小球做缓动动画，看看能出现什么样精彩的效果.

看这个动画看上去是比不是跟家的平滑有质感呢？(原谅我，我也不知道质感是个什么鬼！！！)，上代码：

  window.onload = function(){
           var canvas = document.getElementById('canvas'),
               context = canvas.getContext('2d');
           var mouse = utils.captureMouse(canvas); //捕获鼠标位置
           var ball = new Ball(20, "red");
           var vx, vy, easing=0.05; //设定缓动参数

           (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);

               vx = (mouse.x - ball.x)*easing; //一样样的
               vy = (mouse.y - ball.y)*easing; //一样样的

               ball.x += vx;
               ball.y += vy;

               ball.draw(context);
           }())
       }

是不是赶脚有点过于简单了呢？我们来个难点的，再来一个小球，让它跟着前一个小球走。效果图是这样的：

代码呢我这里就不例出来了，因为炒鸡简单！！！只要改改上面的代码就可以了。

4. 只能用在运动中吗

缓动动画只能用在运动中吗？这肯定是不可嗯那个的啦。为了让你更好的理解，这里我们举几个缓动动画用在其他方面的例子

1.旋转（Rotation）

设定当前旋转速度和目标旋转速度。当然这里我们要引入一些物体，比如我们以前用过的箭头Arrow.

var rotation = 90,
    targetRotation = 270;

//then ease it:
rotation += (targetRotation - rotation) * easing;
arrow.rotation =  rotation * Math.PI / 180;

2.颜色（Colors）

设定初始的颜色值

var red = 255,
    green = 0,
    blue = 0,
    redTarget = 0,
    greenTarget = 0,
    blueTarget = 255;

然后在drawFrame中，easing it:

red += (redTarget -red) * easing;
green += (greenTarget -green) * easing;
blue += (blueTarget -blue) * easing;

然后把这三个值转换为一个16进制的值：

var color= red << 16 | green  << 16 | blue

2.透明度（Transparency）

设定透明度：

var alpha = 0,
    targetAlpha = 1;

//动画循环中

alpha += (targetAlpha - alpha) * easing;
ball.color = "rgba(255, 0, 0," + alpha + ");

ok,本章内容就到这里了，更多高级缓动动画看这里 https://github.com/lamberta/html5-animation。缓动动画的原理及使用方法已经告诉你了，能创造出什么样amazing的动画就看你的想象力了。

下一节，我们将弹性动画，敬请期待！！！