在开发过程中，往往有意无意地回避数学相关的知识。你也知道解决数学问题很无聊。我平时尽量用css3写动画。可以随意选择定时器功能。顶多就是把cubic-bezier调整一下，找一个看起来舒服的。但是如何让动画更流畅，写出更自然的动画，说实话，我之前并没有想太多。每次动效设计师问能不能这样或者那样做，我自然会拒绝。所以很长一段时间，我都非常羡慕那些可以用canvas画出炫酷动画的程序员。先这样吧，又不是不能动。今天分享三角函数相关的内容。如果我刚学前端的时候有人教我这个，我会很高兴。Trigonometricfunction三角函数已经是老生常谈了（嘻哈圈叫它OldSchool），它伴随着我们从初中到大学，太多的公式和定理，光是应付考试就花了不少时间.首先快速回顾一下，以确保您记住了基础知识。勾股定理刚学三角函数的时候，我是从三股四弦五弦的背钩开始的。勾股定理描述了对于直角三角形，直角两侧的平方和等于斜边的平方。a^2+b^2=h^2常用的三角函数。印象中教科书上只保留了sin、cos、tan，其他的都可以通过变换得到。sinθ=a/hcosθ=b/htanθ=a/b极坐标系和单位圆在笛卡尔直角坐标系中。任意一点(x,y)都可以转化为极坐标表示(r,θ)，其中r=Math.sqrt(x^2+y^2)θ=Math.atan2(y,x)a的定义单位圆是半径为单位长度的圆。圆上任意一点的横坐标是对应角度的余弦值。任意一点的纵坐标是对应角度的正弦。单位圆的简单图像变换以正弦曲线为例，对函数进行简单的变换可以得到不同的结果。正弦曲线变换正弦曲线公式：y=Asin(Bx+C)+DA控制幅值，A值越大，峰谷越大，A值越小，峰谷越小；B的值会影响周期，B值越大，周期越短，B值越小，周期越长。C值会影响图像的左右移动，C值为正时，图像向左移动，C值为负时，图像向右移动。D值控制上下运动。这个公式非常有用，如果下面的代码让你看不懂，记得回来查看评论。简单复习一下，一定要记住基础知识，那么这些曾经背过的内容和前端代码结合起来会怎么样呢？常见应用场景图像应用最直观的应用就是利用三角函数绘制Wave曲线for(letx=0;x
