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

此文章为转载文章，原文链接：https://juejin.im/post/5d99b706e51d4577f9285c33，由于无法直接转载，就以这样的形式转载了，是个人觉得这篇文章真的很好，很实用，很前端，只在为大家分享好东西，见谅了

开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画，说实话以前我没怎么考虑过。

每次当动效设计师提出，能不能这样那样的时候，我会理所当然地予以否决。所以有很长一段时间，我非常羡慕那些能用 canvas 绘制很酷炫的动画的程序员。

 

 

先这样吧，又不是不会动。

今天来分享一下三角函数相关的内容，如果刚学前端的时候有人教我这些，我会很开心。

三角函数

三角函数已经是老生常谈了（街舞圈称之为 Old School），它伴随我们从初中到大学，太多的公式定理，光是应付考试就花了不少时间。先简单回顾一下，确保你还记得基础知识。

勾股定理

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

 

 

 

常用三角函数

印象中教科书里面只保留了 sin, cos, tan，其他可以通过变换得到。

sinθ = a / h
cosθ = b / h
tanθ = a / b
复制代码

极坐标系和单位圆

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

r = Math.sqrt(x^2 + y^2)
θ = Math.atan2(y, x)
复制代码

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