鱼动起来的原理就是通过设置鱼的坐标来实现，而设置什么值呢？

    很明显，我们是通过移动鼠标来控制鱼，那当然是我们鼠标的坐标。

    在 init.ts 里面声明俩个变量来保存我们的鼠标坐标，并且通过监听我们的鼠标移动事件，来获得我们鼠标的坐标。

    • 声明变量
    1. let mouse_x: number, // 鱼的x坐标，和鼠标x的坐标
    2.     mouse_y: number; // 鱼的y坐标，和鼠标y的坐标，因为鼠标在哪鱼在哪，所以重合。
    • 创建监听函数

    这里的 offset 会比 layer 大 1

    1. // 鼠标移动监听函数
    2. function mouseMove(e: MouseEvent) {
    4.   // offset = layer + 1
    6.   if(e.offsetX || e.layerX) {
    7.     mouse_x = typeof e.offsetX == undefined ? e.layerX : e.offsetX
    8.     mouse_y = typeof e.offsetY == undefined ? e.layerY : e.offsetY
    9.   }
    11.   console.log(mouse_x);
    12.   console.log(mouse_y);
    13. }
    • 修改 init 函数，为 canvas one 添加事件监听
    1. function init() {
    2.   [cvs_one, ctx_one] = getCanvasAndContextById('one');
    3.   [cvs_two, ctx_two] = getCanvasAndContextById('two');
    5.   bgPic.src = 'assets/img/background.jpg';
    7.   cvs_width = cvs_one.width;
    8.   cvs_height = cvs_one.height;
    10.   anemones = new Anemones()
    11.   fruits = new Fruits()
    12.   fish_mother = new FishMother()
    14.   mouse_x = cvs_width / 2; // 先把鱼初始化在画布的中间
    15.   mouse_y = cvs_height / 2;
    17.   // 因为鱼是在 canvas one 上面，所以把监听添加到 one 上面
    18.   cvs_one.addEventListener('mousemove', mouseMove, false);
    20. }
    • 添加导出
    1. export {
    2.   bgPic,
    3.   cvs_width,
    4.   cvs_height,
    5.   cvs_one,
    6.   cvs_two,
    7.   ctx_one,
    8.   ctx_two,
    9.   anemones,
    10.   fruits,
    11.   fish_mother,
    12.   mouse_x,
    13.   mouse_y
    14. };
    • 在 fish-mother.ts 使用坐标，首先先导入。
    1. import { ctx_one, cvs_height, cvs_width, mouse_x, mouse_y } from "./init";
    • 更新 draw 函数
    1.   draw(){
    3.     this.x = mouse_x
    4.     this.y = mouse_y
    6.     ctx_one.save();
    7.     ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    8.     ctx_one.scale(.7, .7);
    9.     ctx_one.drawImage(this.bigEye, -this.bigEye.width / 2, -this.bigEye.height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    10.     ctx_one.drawImage(this.bigBody, -this.bigBody.width / 2, -this.bigBody.height / 2);
    11.     ctx_one.drawImage(this.BigTail, -this.BigTail.width / 2 + 30, -this.BigTail.height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    13.     ctx_one.restore();
    15.   }
    • 创建一个带有缓冲功能的函数

    此时移动你的鼠标，你会发现这个鱼动的太硬了，完全贴着鼠标。

    每一次设置值只是设置一个趋近于鼠标位置的值，这样就会有一个渐变的过程，就不会那么突然。

    而不是直接就等于，当鼠标与鱼的位置重合时，lerpDistance 就返回的 aim

    新建 utils.ts 文件

    1. /**
    2.  * 按照一定的 ratio 比率趋近于目标值，当目标值与当前值距离越大，他们相差就越大。
    3.  * @param  {number} aim   目标值
    4.  * @param  {number} cur   当前值
    5.  * @param  {number} ratio 百分比
    6.  * @return {number} 趋近于目标值的值
    7.  */
    8. function lerpDistance(aim: number, cur: number, ratio: number) : number {
    9.   var delta = cur - aim; // 当前值与目标值的距离
    10.   return aim + delta * ratio;
    11. }
    13. export default {
    14.   lerpDistance
    15. }

    我们来模拟一下这个函数的运行环境。

    第一帧时

    1. cur: 20
    2. aim: 10
    3. ratio: 0.9
    5. delta 10
    7. return 19 = 10 + 10 * 0.9 
    9. this.x = 19

    第二帧，此时的 cur = 19

    1. cur: 19
    2. aim: 10
    4. delta 9
    6. return 18.1 = 10 + 9 * 0.9

    第三帧，此时 cur = 18.1

    此时只是无线趋近，而不是真正的等于。这里的3帧动画只是花了几十毫秒而已。

    • 在 fish-mother.ts 中使用这个函数
    1.   draw(){
    3.     this.x = utils.lerpDistance(mouse_x, this.x , .9)
    4.     this.y = utils.lerpDistance(mouse_y, this.y , .9)
    6.     // this.x = mouse_x
    7.     // this.y = mouse_y
    9.     ctx_one.save();
    10.     ctx_one.translate(this.x, this.y); // 定义相对定位的坐标中心点
    11.     ctx_one.scale(.7, .7);
    12.     ctx_one.drawImage(this.bigEye, -this.bigEye.width / 2, -this.bigEye.height / 2); // 居中，所以向左移动宽度的一半，向上移动宽度的一半
    13.     ctx_one.drawImage(this.bigBody, -this.bigBody.width / 2, -this.bigBody.height / 2);
    14.     ctx_one.drawImage(this.BigTail, -this.BigTail.width / 2 + 30, -this.BigTail.height / 2); // 这里的尾巴，往右移动30像素，让它在身体的后面。
    16.     ctx_one.restore();
    18.   }

    再次试一试，看看鱼儿是如何动起来的。