canvas加三角函数写一个动画

前言

在掘金上看到一个帖子https://w3ctrain.com/2018/08/20/trigonometry-you-must-know/
运用canvas和三角函数写了一个动画 好厉害的感觉 所以赶紧学习一下
先看效果

upload_45025fcd1837ff31048db203afa206c1-sadman-sine.gif

首先绘制头部

    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 , 这样能保证所有的周期运动时间同步。

head.gif

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

脚有两只，按道理应该是抬脚到落脚的动作完成时，其他部位都完成了一个完整的周期，所以在绘制脚的时候，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)
}

foot1.gif

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

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

foot2.gif

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

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

foot3.gif

最终得到的效果是这样的：

upload_45025fcd1837ff31048db203afa206c1-sadman-sine.gif

文章参考:https://w3ctrain.com/2018/08/20/trigonometry-you-must-know/

//完整代码如下