js动画_看着鼠标移动的眼球_眼睛_跟着随鼠标移动

   眼球根据鼠标相对眼睛角度的不同以及距离的不同移动而移动。
   这里涉及到三角函数的问题，因为我们不仅需要让眼球与鼠标方向相同，还要让眼球收放自如。也就是眼球与眼睛里可以任意移动，而不是单一的在眼睛边上旋转。因此不会只是求出角度然后transform:rotate就能解决的，需要具体计算眼珠相对眼睛中心的x，y（直角三角形中对边与临边）。
   这其实相当于一道三角函数数学题。已知眼睛中心到鼠标的 x0、y0的距离，求出与该鼠标相同弧度的眼球的位置x1、y1。对于眼珠半径的话是一个变量随着鼠标的半径变化为变化。幸运的是我们不需要太多的运算，计算机会帮我们处理他们。

提示已知x0，y0可以求出夹脚的弧度和半径;已知弧度和半径可以求出x1， y1.

弧度：园的周期为2π 360°，1π相当于180deg，如果需要的话转换公式如下

• 角度 = 180° × 弧度 ÷ π
• 弧度 = 角度 × π ÷ 180°

步骤

1. 求弧度 Math.atan2()传入x0，y0轴返回弧度。

Math.atan2(point_x, point_y)；

2. 勾股定理求半径（半径及代表直线距离，如果你不希望眼球的半径被固定的话。眼球的半径相对于鼠标的半径按比例变化）

function radius(pos) {

       return Math.sqrt(Math.pow(pos.x, 2) + Math.pow(pos.y, 2));

}

3. 求出：sin，cos ，对应的：对边/斜边，临边/斜边 ，参数传入弧度，返回边的比值，与半径（斜边）相乘即可，即可得到对应的x1，y1。

function pos_xy(radius, radian) {

    return {

        x: Math.sin(radian) * radius,

        y: Math.cos(radian) * radius,

    }

}

注意：这里传入的半径是鼠标的半径,将鼠标半径除以一个固定的值从而达到随着鼠标的半径变化，眼球半径不断变化，进而计算出的不同x1、y1.

下面这段代码是将鼠标半径/15，并控制了眼球最大的可以移动半径。
Math.min(eye_ball_canMove_max, point_radius / 15)

源码:

    

    

        

        

        

        

    
    

        


            


        

    

    
    
``