Math类三角函数

Math 类三角函数类三角函数 本例继续讲解 AS 的基础知识 今天我们来学习 Flash AS 入门系列教程第七课 影片剪 辑第 11 节三角函数 Math 类为我们提供了很多数学计算函数 今天我们来了解一下三角 函数 对 Flash 的 AS 编程有兴趣的朋友可以到论坛与作者交流 三角函数 Math 类为我们提供了很多数学计算函数 今天我们来了解一下三角函数 三角函数是研究 三角形的边与角的关系的学科 希望不要看到这个题目就开跑 不要怕 往下看 你会复 习到初中所学的三角课程 同时你会感觉到三角函数会很简单 当然所要介绍的只是正弦 余弦和反正切三个常用的函数 Flash 为什么要研究三角函数呢 看看下面的图 在 flash 坐标体系中 即舞台上 放上一个点 a 然后通过 a 点将 a 点的 x y 长度画出来 并将两条线的端点连起来 你看一个直角三角形出现了 这样三角函数就有研究头了 这个三角形跟这个点有什么关系呢 最明显的就是这个三角形的两条直角边 b c 确定了 a 点的位置 除了两条直角边以外 还有斜边 d 还有一个角 e 另外两个角我们不研究 这些边和角之间的关系就是三角函数 我们说过只研究三个函数 sin e c d 对边除以斜边 cos e b d 邻边除斜边 e atan c b 而 flash 为我们提供了一个更为合理的反正切函数 atan2 y x 即 e atan2 y x 从上面的图中可以看出 实际上 b 就等于点 a 的 x c 就等于点 a 的 y 这换一下 就成 sin e y d cos e x d 将这两个式子变一下就成 y d sin e x d cos e 对这两个式子 需要说明的是 角 e 在三角函数的运行中必须使用弧度制 这与我们习惯 的角度制有所不同 所以我们需要记住角度弧度转换的公式 cose 角度弧度转换公式 角度 弧度 180 Math PI 弧度 角度 Math PI 180 code PI 是园周率 即 3 14159 它属于 Math 类写法为 Math PI 三角函数也属于 Math 类 所以 上面的公式正确写法是 x d Math cos e e 为弧度表示 y d Math sin e 三角函数的知识差不多复习这么多就行了 是不是很简单呢 园周运动 上面介绍的三角函数有什么用呢 我们还是来看看前面那个图 如果直角三角形的斜边长 度固定不变 让角 e 不断地加大 会是个什么效果呢 很容易理解它出现的是下面的效果 点 a 在做园周运动 看起来有点意思了哈 怎样让它做园周动运的呢 要让对象移动需要 改变对象的 x y 值 上面的公式已经给了我们计算这两个值的方法 x d Math cos e y d Math sin e 做园周运动时直角三角形的斜边长度 d 不变 其实我们早已看出来了 斜边实际就上园周 的半径 将角 e 不断增大 从而产生不同的 x y 值 将这些值赋给点 a 对象 就形成了园 周运动了 在上例中 我们将点 a 做成 MC 实例名称为 ball mc h 上例的代码为 var d 100 半径为 100 var centerx Stage width 2 var centery Stage height 2 确定园心的位置在舞台中心 var zl 10 设一个增量 即角 e 每次增加 10 度 var i 1 onEnterFrame function ball mc x centerx d Math cos i zl Math PI 180 再次提醒三角函数要用弧度 ball mc y centery d Math sin i zl Math PI 180 i if i 36 这个条件语句可以不要 但那样 i 会无限度增大 我觉得不好 所以在 i 36 时 即转完 1 周时 让 i 1 i 1 上面已经完成了三角函数的第一个应用 园周运动 园周运动公式 MC x 园心 x 半径 Math cos i 增量 Math PI 180 MC y 园心 x 半径 Math sin i 增量 Math PI 180 i 你非常高兴 因为你已经会让对象做园周运动了 你很快就想到了要做一个月亮围绕地球 运转的效果 但问题出现了 月亮的运轨迹好象是椭园的 不要作急 我们来比较一下园 和椭园的区别 很快我们发现椭园与园的区别就是 x 轴半径和 y 轴的半径不相等 于是乎 椭园运动公式出来了 椭园运动公式 MC x 园心 x x 轴半径 Math cos i 增量 Math PI 180 MC y 园心 x y 轴半径 Math sin i 增量 Math PI 180 i 恭喜 你现在连椭园运动都会了 我们再来研究一下 看看三角函数还能搞点什么名堂 上面说过 要研究三个三角函数 上面只用了两个 好象还有个 flash 专用的反正切函数 atan2 这个函数是根据某点的 x y 值计算出该点与 x 轴之间的角度 e Math atan2 y x 能不能算出两点之间的角度偏差呢 还是来看看图 在图中有两个点 a 和 b 将两个点用一根线连起来 通过 a 点作 y 轴平行线 通过 b 点作 x 轴平行线 这样三根线就组成了一个直角三角形 有了三角形就好办了 我们的三角函数 就该上场了 先来分析一下这个直三角形 不难看出 三角形的两条直角边实际就是两点 的坐标差 分别是 x1 x2 和 y1 y2 而角 e 就是是两点间的角度差 有了角度差 就 想如果将 b 点旋转一个角差 那么 b 点的方向就与 a 点一样了 如果将 a 点换为鼠标 在 鼠标移动时始终计算 b 点与鼠标的角差 然后让 b 点旋转这个角差 这样 b 点会一直指向 鼠标跑都跑不脱 效果如下 代码 onEnterFrame function var dx xmouse jt mc x var dy ymouse jt mc y var angle Math atan2 dy dx 180 Math PI jt mc rotation angle 跟随鼠标旋转公式 onEnterFrame function var dx xmouse MC x var dy ymouse MC y var angle Math atan2 dy dx 180 Math PI MC rotation angle 这里要注意两点 1 atan2 dy dx 是 dy 在前 dx 在后 这一点容易搞错 2 由 atan2 计算出的角度是弧度 而我们要设置 rotation 属性要用角度 所以要用 180 Math PI 弧度 转为角度 硬是妖怪得很 一会转过去 一会转过来 现在你又想出了新花样了 光是跟着鼠标转还不行 还跑过去抓住它 还是看上面那个图 b 点要到 a 点 是不是 b 点的 x 加上 x1 x2 b 点的 y 加上 y1 y2 就行了呢 但即 然是跟跟随肯定不能一步到位 要不就不是跟随了 而是帖在一起了 也就是说趋于直角 三角形的斜边一能一步到位 而是一点一点地增加 这就需在设一个增量 根据前面的三 角函数公式就可算出每次增加的 x 和 y 的量了 vx 增量 Math cos e vy 增量 Math sin e 将 b 点的 x y 不停地加上这个 vx vy b 点就不停地向 a 点靠近了 效果 代码 var speed 3 onEnterFrame function var dx xmouse jt mc x var dy ymouse jt mc y var angle Math atan2 dy dx 180 Math PI jt mc rotation angle jt mc x speed Math cos angle jt mc y speed Math sin angle 鼠标跟随公式 var speed 一个数字 onEnterFrame function var dx xmouse MC x var dy ymouse MC y var angle Math atan2 dy dx 180 Math PI MC rotation angle MC x speed Math cos angle MC y speed Math sin angle 将本节介绍的内容与上节介绍的绘图方法结合 可以绘制出很多图形 如园 椭园 正 余弦波形等 这个留给大家研究 下面做一个经典的练习 图片旋转 制作方法来源于网 络 下面是我的鼠绘作品的一个算是展示吧 我选了 6 张作品 导入到库中 然后 新建一个 MC 共 6 个关键帧 每个关键帧 放一 张图片 大小统一调为 150 x200 然后在库中右击 MC 连接 点中 为 ActionSpript 运行 时导出 前的钩 在标识符一栏内输入 imge 回到主场景 打开帧动作面板 输入 var r 200 var v 1 for var i 1 i 6 i attachMovie imge mc i i root mc i gotoAndStop i root mc i cita i 60 root mc i y 200 onEnterFrame function v 275 root xmouse 25 for var i 1 i 6 i with root mc i cita v alpha 50 100 100 Math sin cita 180 Math PI 4 xscale 100 Math sin cita 180 Math PI alpha 100 yscale 75 100 100 Math sin cita 180 Math PI 8 x 75 r r Math cos cita 180 Math PI root mc i swapDepths Math round root mc i xscale 代码分析 首先通过一个 for 循环 将图片元件加载 6 次 每一次加载后 让它停在不同的帧上 这 样舞台上实际上就有 6 张不同的图片了 这是一个非常有趣的方法 值得学习 同时为每 张图片设置了一个不同的初始量 Cita 共 6 张图片 一个园周是 360 度除以 6 等于 60 这样 6 张图片被设为 i 60 即均匀分布 最后将图片的 y 坐标固定在 200 因为图的旋转 实际就是图片从左到右往返运动而已 y 坐标是不变的 for var i 1 i 6 i attachMovie imge mc i i root mc i gotoAndStop i root mc i cita i 60 root mc i y 200 接下来的代码可能不是太好理解 请记住一点 正弦 余弦函数的值是从 1 到 1 来回变 化的 这一点很重要 在下面的代码中充分地运用了这个原理 通过 onEnterFrame 事件 使动画不断重复 每重复一次 每一个图片的 Cita 加上鼠标 x 坐标与舞台中线的差值除 2 5 也就是说设置了一个增量 所以这 25 可以自行改变 值越大转得越慢 onEnterFrame function v 275 root xmouse 25 for var i 1 i 6 i with root mc i cita v 接下来设置图片的透明度 来理解一下这句 alpha 50 100 100 Math sin cita 180 Math PI 4 首先看 Math sin cita 180 Math PI 这个函数的值上面说了是从 1 到 1 来回变化的 那 么 100 Math sin cita 180 Math PI 10 到 100 来回变化 100 100 Math sin cita 180 M ath PI 就是 200 到 0 之间的变化了 100 100 Math sin cita 180 Math PI 4 就是 50 到 0 之间变化了 50 100 100 Math sin cita 180 Math PI 4 就是 50 到 100 之间变化了 这一句的作用就是使透明度在正面时为 100 转到背面时为 50 接下来 xscale 100 Math sin cita 180 Math PI alpha 100 100 Math sin cita 180 Math PI 的值是 100 到 100 xscale 属性设为 100 时的效果是 水平翻转 这就形成了在正面的背面方向不一样的效果 也行成了在两端时的翻转效果 alpha 100 应该是让图片的正反面与透明度同步