前端程序员必须掌握之三角函数在前端动画中的应用

原文链接：https://mp.weixin.qq.com/s/qNRL_bx3NJcUP2mkm38Kbw

一直都没有好好学动画，因为懒于计算，借此机会补补课

三角函数

勾股定理

最开始学三角函数的时候就是从勾三股四弦五开始，勾股定理描述的是对于直角三角形，直角两条边的平方和等于斜边的平方

a^2+b^2=h^2

常用三角函数

sinθ = a/h
conθ = b/h
tanθ = a/b

 极坐标系和单位圆

在笛卡尔直角坐标系中，任一点（x,y）都可以转化成极坐标表示（r,θ），其中

r = Math.sqrt(x^2 +y^2)
θ = Math.atan2(x,y)

单位圆的定义是半径为单位长度的圆，圆上任意一点的横坐标就是对应角度的余弦值，任一点的纵坐标就是对应角度的正弦值。 

      简单的图像变换  以正弦曲线为例，对函数进行简单的变换，得到不一样的结果

 

正弦曲线公式：  y = A sin(Bx + C )+ D 

A 控制振幅，A值越大，波峰和波谷越大，A值越小，波峰和波谷越小；

B值影响周期，B值越大，周期越短，B值越小，周期越长。

C值影响图像左右移动，C值为正数，图像右移，C值为负数，图像左移

D值控制上下移动

 常见的应用场景

图像应用

最直观的应用是使用三角函数来绘制Wave曲线

for(let x = 0;x < width; x++){
    const y = Math.sin(x * a) * amplitude
}

再结合三角函数偏移让左右成为波谷，中间成为波峰，就能得到曼妙的波纹

for(let x = 0;x <width; x++){
   const radians = x/width * Math.PI * 2
   const scale = (Math.sin(radians - Math.PI * 0.5) + 1) * 0.5
   const y = Math.sin(x * 0.02 +xSpeed) * amplitude * scale
}

 

之前掘金上很火的一篇文章，也是同样的道理，使用两层正弦函数绘制曲线。fill之后加上stagger动画，就能得到非常酷炫的效果

如果再结合 鼠标位置 + lerp 动画，就能实现坚果首页同款的动画

SlowInSlowOut

正余弦曲线有很自然地缓入缓出的特性， 并且在一个周期里面从 -1 到 1 再回到 -1，非常适合用来模拟一些物理效果。因为真实世界里面，汽车都是缓慢启动，加速，减速，再缓慢减速直到速度变为 0 的，突变会让人很难受。左边的摆球是线性匀速摆动，右边是用了三角函数优化的结果。显然左边的效果设计师会打人。

只需要使用 sin 或cos 乘以最大角度，就可以得到在摆动最大角度之间的SlowInSlowOut

ctx.rotate(Math.cos(t / 180 * Math.PI) * Math.PI *0.25)

角度控制

在开发过程中，我们常常需要跟角度打交道，比如在头像左上角（45deg）显示Notification红点，用鼠标控制rotation等

前端JS里面Math.atan2(y,x)可以用来计算（x,y）和x 轴正方向的夹角弧度值

function getCurrentDegree(){
   const deltaX = mouse.x - window.innerWidth * 0.5
   const deltaY = mouse.y - window.innerHeight * 0.5
   return Math.atan2(deltaY,deltaX) * 180/Math.PI
}

三角函数相关的动画并不一定需要用js来写，比如下面DEMO，使用compass依赖，同样可以做到灵活控制在特定角度的动画

@import "compass";

.checkbox:checked {
   ~ button {
      $per: 180/4;
      @for $i from 1 through 6{
          &:nth-of-type(#{$i}){
              $angle:$per * ($i-1) * 1deg +180deg;
              $x: cos($angle) * $d;
              $y: sin($angle) * $d;

              transform:translate($x,$y) rotate(0deg);
          }
      }
   }
}

Case Study 

前两天在 Codepen 首页看到热门推荐，作者用存 css 动画来实现一个行走的动画，挺新颖的，然而仔细一看，脚步的动画真心觉得别扭，于是想用三角函数优化一下。

绘制头部：

drawHead(t){
   ctx.save()
   ctx.beginPath()
   ctx.translate(0,Math.sin(t) * 4)
   ctx.arc(80, -35, 35, 0, 2 * Math.PI)
   ctx.fill()
   ctx.closePath()
   ctx.restore()
}

 我会给每个方法传入周期参数 t， t 从 0 到 2 PI , 这样能保证所有的周期运动时间同步。

身体和阴影的绘制都差不多，直接跳过看脚步动画。

脚有两只，按道理应该是抬脚到落脚的动作完成时，其他部位都完成了一个完整的周期，所以在绘制脚的时候，t 需要除以 2。然后第一只脚和第二只脚相差半个脚自身的周期，可以直接将 t 替换成 t + Math.PI 就是第二脚的动画。

drawFeet(t){
   t = t / 2
   ctx.translate(Math.cos(t) * -50,0)
   
   //另一只脚
   ctx.translate(Math.cos(t + Math.PI) * -50,0)
}

 

 脚步动画自身周期的一半是在地面上的，可以通过判断一下 sin 值，小于 0 则不做 y 纵轴方向上的变化。

ctx.translate(Math.cos(t) * -50, Math.sin(t) > 0 ? Math.sin(t) * -35 : 0)

 为了让脚更加逼真，同样在前半个周期做一下 rotate 。

if(t < Math.PI){
   ctx.rotate(Math.sin(t) * Math.PI / 180 * -5)
}

源码(https://codepen.io/HelKyle/pen/Mqgpvb)