天道有轮回,苍天饶过谁!!!其实数学在我们生活当中或者是工作当中,其实用的地方非常之多,我们今天就来聊一下三角(反三角)函数在javascript中的应用。
三角函数
先看一下勾股定理 a^2+b^2=c^2
根据勾股定理可以得出
再看几个API
Math.pow() 平方/立方
- Math.pow(2,3) // 2的立方
- Math.pow(2,2) // 2的平方
Math.sqrt() 开方
Math.sqrt(9) // 3 只能开平方,不能开立方或者是n次方
那 √ ̄3^2+4^2=5 用javascript怎么表示呢?
Math.sqrt(Math.pow(3,2)+Math.pow(4,2)) //5
那么勾股定理可以用来做什么呢?勾股定理最容易实现的就是已知两点坐标求距离这样的应用
即A点到B点的距离为 c=Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))
好了,切入正题
三角函数
解决的问题:在直角三角形中,已知一个角度,和一条边,可求出另一条边 三角函数在我们数学当中有很多不同的形式,其中我给大家介绍其中的三种,其实还有很多,我们主要平时用的时候用这三个就够了
- sina
- cosa
- tana
在js中分别对应:
- Math.sin(弧度)
- Math.cos(弧度)
- Math.tan(弧度)
注意它们的参数不是角度,而是弧度!!!,因为计算机当中无法表示角度,只能用弧度来表示 那角度与弧度之间是怎么转换的呢?
一圈有多少度呢?一圈就是360度对吧,弧度是什么?弧度是另外一个跟角度有关的单位,就是另外一种写法。为什么会有两种写法?因为角度更多的是在我们生活当中,或者是在咱们数学当中。而弧度一般都是作为计算机当中来使用的,比较专业,计算机都是用弧度来表示的,所以说只要你知道它们之间的一个关系,其实不管是角度和弧度都都是可以换算的。
一弧度概念
首先先来了解一下弧度究竟指的是什么?一弧度到底等于多少?想知道一弧度概念,我们先画一个圆
用r表示半径 ,a表示所对应的角度 。那么弧度指角a所对圆的弧曲线这一块,假如说这个曲线它等于半径(r)的话,如果把这个曲线给拉直了,拉直之后,它就等于半径, 那么我们就把a这个角度叫做一弧度。所以说一弧度的概念,它其实就是这个角对应的曲线,它的长度如果等于半径(r),就是一弧度。
那整个一个圆,有多少弧度呢?那我们知道r对应的曲线是一弧度,整个有多少个r呢? 我们就需要了解圆的周长该怎么去求。圆的周长就要涉及到另一个概念π。
π=3.1415926......
怎么计算的呢? 有两种计算方式 第一种是圆的周长除以直径等于π,还有一种就是圆的面积除以半径的平方也是π 即
圆的周长/2π=π
那么 圆的轴承=2πr
上面说了 一弧度等于半径(r) 那整个圆有多少弧度?
那么整个圆的弧度=2πr/r=2π
好,既然整个圆它有2π这样一个弧度的话,那一圈所占的角度是多少呢?360度。所以说360度跟2π弧度应该是相等的关系,都是一圈,只不过是两个不同的单位,所以说我们就可以得到这样一个公式
360度=2π(弧度)
那么角度和弧度都可以换算出来
用弧度来表示1度 javascript写法就是
Math.PI/180
所以在javascript中sin30度就可以这样表示
Math.sin(30*Math.PI/180) //30度角所对应的弧度==>0.5
π在javascript中是一个常量 用Math.PI表示
那么现在我们就来看一个物体做圆周运动的例子
即
Math.sin( 度数*Math.PI/180 ) = y/r
Math.cos( 度数*Math.PI/180 ) = x/r
圆周运动demo
那做一个三维的有立体空间感的圆周运动怎么做呢?
如何能做出来像三维运动这样更复杂的运动,我们需要了解的知识点就更多了,不仅仅只限于三角函数。你需要再配合一些数学、物理等等一些领域的知识,然后才能做出来更丰富的效果。
我们首先先来想第1个问题,上图本身就是一个平面,它没办法去产生三维,那是必须我们要做到一件事情,就是利用这个平面,能够让我们从视觉上感受出来,它是个三维的。好,怎么感受呢?如果说你是学过画画的,你就应该知道三维空间就是近大远小,这样一个概念
比如说这个小一点的圆就相当于是远方。那大一点的圆不就相当于是离你比较近了。如果说我们现在把他们之间加个横线给连起来,这个圆柱是不是就出来了?
好,这个圆柱出来了,是不是就有点立体的感觉了?假如说这是个圆木,然后上面站了一个人
那是不是就可以让这根圆木动起来了呢?
其实发现不需要特别深的一些理念,只是简简单单的近大远小就可以实现3D的效果,利用这样一个概念,我们做圆周运动,立体的三维的圆周运动其实就很容易了,你只需要想象成,它离你近了就大,离远了就小就可以了。
除了近大远小的知识点以外,我们还需要了解一个坐标系。在平面当中我们物体动起来,它是有X坐标和Y坐标就够了,三维的它还有一个Z轴坐标系。
如果方块想让Y轴走的话,大家首先要想一想,top值变没变?其实这个top值并没有变。绕Y轴进行旋转的时候,X轴和Z轴是变的,但是Y轴是不变的。Y轴不变,那说明元素的top值是不变的,对吧。X轴控制什么呢?X轴我们来控制物体的let值,而Z轴控制物体的什么?物体的大小!!!Z轴越大说明物体就越大,Z轴越小说明物体就越小,对吧?这样一个关系。所以说有了这个关系之后就很好做了。
- X轴控制物体的let值
- Y轴是不变===>元素的top值不变
- Z轴越大说明物体就越大,Z轴越小说明物体就越小
再想Z轴最大值和最小值是多少呢?Z轴的绝对值其实就是半径,假如半径为100px,那Z轴最大值为100px,最小值为-100px,其实就是啥呢,Y轴变成Z轴了(多了个正负),Y轴没用了(不变)。Z轴的大小其实是一直在变的
写法为
var x = 700;
var a = Math.sin(度数 * Math.PI / 180) * r;
var b = Math.cos(度数 * Math.PI / 180) * r;
oDiv.style.left = x + b + 'px';
oDiv.style.width = a / 100 * 30 + 50 + 'px'; //100为半径,30为比率,50是方块的原始宽高
oDiv.style.height = a / 100 * 30 + 50 + 'px';
如果说你要想做得更好一点,可以用三维旋转矩阵来做,效果会更炫。
反三角函数
解决的问题:在直角三角形中,已知两条边可求出未知的角度或弧度
在一个直角三角形中 如果已知a,b,c三边中的两条边 怎么求角a 或 b 呢 那么就可以用反三角函数来求角度或弧度值。 反三角函数在js中的写法
- Math.asin( a/c )
- Math.acos( b/c )
- Math.atan( a/b )
在反三角函数中求出来的值都是弧度
假如 a=1 c=2 套入公式
Math.asin(1/2) //0.5弧度
怎么转换为角度呢
即
Math.asin(1/2)*180/Math.PI //30度
三角函数图像
如果说你做一些像流体效果的话,你必须得掌握三角函数图像,要不然你做不了流体效果 比如
先看几个概念
单位圆坐标系
一个圆可以在坐标系中用坐标的形式表示出来就是单位圆坐标系
如图所示 x轴其实对应的是cos y轴对应的是sin
那弧度与sin之间有什么关系呢?
那就可以通过js把这个图像给画出来。正弦函数,余弦函数相应的也可以表示出来 用left表示弧度 top表示角度
正弦曲线公式:y = A sin(Bx + C) + D
-
A 控制振幅,A 值越大,波峰和波谷越大,A 值越小,波峰和波谷越小;
-
B 值会影响周期,B 值越大,那么周期越短,B 值越小,周期越长。
-
C 值会影响图像左右移动,C 值为正数,图像右移,C 值为负数,图像左移。
-
D 值控制上下移动。
这个公式非常有用,如果下文的代码让你不解,记得回来查看注解。
参考