转 第三章 三角学应用(2)(as3.0)
来源:互联网 发布:php cdn缓存 编辑:程序博客网 时间:2024/06/15 15:58
反正切(Arctangent)
的比值,就可以得到相应的角度。
Math.atan(ratio),只需提供对边与邻边的比例值。例如,前面学过 30 度角的正切值约为
0.577。试一下:
trace(Math.atan(0.577) * 180 / Math.PI);
输出结果是一个近似 30 的数,不是非常直观易懂吗,为什么还需要另一个函数呢?下面请
看图 3-13,让它来回答:
图 3-13 四个象限上的角
在 X 轴上为负数,同样,角 A 和 D 在 Y 轴上为负数,而角 B 和 C 在 Y 轴上为正数。因此,四
个内角的比例分别为:
A: –1/2 (–0.5)
B: 1/2 (0.5)
C: 1/ –2 (–0.5)
D: –1/ –2 (0.5)
那么究竟所指的是角 B 还是角 D 呢?两个比例都为 0.5 那样就无法分辨了,看似是个小问题,
但对于日后的工作确有很大的影响。
要有用得多。实事上,只需要学会这个函数的用法就可以了,函数中包括两个参数:对边长
度与邻边长度。有时常会误写成 x,y,请注意应该是 y,x。请看如下示例,输入
Math.atan2(1,2),然后记住这个结果:
trace(Math.atan2(1, 2) * 180 / Math.PI);
输出结果为 26.565051177078,这正是角 B 的度数。下面再输入-1/-2(角 D),再来试试:
trace(Math.atan2(-1, -2) * 180 / Math.PI);
出乎意料的结果–153.434948822922.为什么会这样?图 3-14 能给你解释。
图 3-14 一个角的两种表示方法
轴顺时针计算的。因此,从 Flash 的角度来衡量,则该角被视为-153.43 度。下面就要开
始在 Flash 中实践和应用三角学了。
旋转(Rotation)
转(rotation)将成为我们工具箱中非常的工具,可以应用于游戏制作,鼠标追踪,界面设计
等。
Arrow.as(与本书中其它代码一同在 www.friendsofed.com 下载),这些是已写好的代码。
首先,需要让物体旋转,它可以是一个在 Sprite 中绘制的箭头(Arrow)。事实上,如果我
们要反复应用到这个箭头,可以把它制作成一个类:
package {
}
写一句 new Arrow()即可,在图 3-15 中可看到显示结果。当绘制一些图像并进行旋转时,
要注意它的指向,默让地指向右边,X的正半轴,这就是它旋转到 0 度时的状态。
图 3-16 下一次需要计算的值
位置只需使用 mouseX 和 mouseY 属性即可获得,同样,使用x,y属性,获得箭头的位置。
使它们的值相减,就得到了两条边的长度。现在只需要使用 Math.atan2(dy,dx) 就可以求
出夹角,然后把结果转换为角度制,最后让箭头的 rotation 属性等于这个夹角。代码如下:
var dx:Number = mouseX - arrow.x;
var dy:Number = mouseY - arrow.y;
var radians:Number = Math.atan2(dy, dx);
arrow.rotation = radians * 180 / Math.PI;
当然,为了使之形成一个动画,还需要加入循环。如同前一章提到的,使用事件处理函数将
会是最好的选择,请使用 enterFrame 事件。以下是这个完整的文档类:
package {
}
作为文档类,并为它创建 SWF。怎么样?就像施了魔法一样!假设如果我们没有 Math.atan2
这个函数,就要先通过,dy除以dx求出对边与邻边的比值,然后再写入 Math.atan 函数。
下面用 Math.atan 函数来代替 Math.atan2 函数来试一下,代码如下:
var radians = Math.atan(dy / dx);
与鼠标相背离。能说说为什么吗?回到有 A,B,C,D 四个角的图(图 3-13),不要忘记角A和C
拥有相同的比值,角B和D也是一样。这样一来, Flash 就无法知道所指的是哪个角,所以
只能得到A与或角B。
毫无疑问,这时 Math.atan2 的好处就显示出来了,书中会经常用到这个函数。
波形
大家肯定听说过正弦波,也一定见过图 3-17 所示的图形。
图 3-17 正弦波形
度(或着 0 到 2pi)代入到正弦函数中,那么就会得到这个正弦函数图像。从左到右代表所使
用的角度值,而图中 y 坐标变化,代表这些角的正弦值。
的正弦值为 1,180 度或 pi 的正弦值又回到 0,270 度或 3/2pi 的正弦值为-1,360 度的正
弦值为 0。下面用 Flash 来试一下正弦波形,把以下代码放入文档类的框架中进行测试:
for (var angle:Number = 0; angle < Math.PI * 2; angle += .1) {
}
外,要开始学着不去使用角度制。
图 3-18 正弦图像值
的正弦值。看一下输出结果,我们发现角度是从 0 开始,增加到 1 后,开始减小,减少到-1
时,再回归至 0。这些值不会真正准确地到达 1 或 0,因为每次增加 0.1,所以永远不会得
到 pi 或 pi/2 的整数倍。
平滑的上下运动
数。考虑:使用 0~1~-1~0 的变化来实现这个动画,并且反复地使用这个波形。
倍。 这样就拥有了一个从 100 到-100 的波形,并且连绵不断。在下面这个文档类 Bobbing.as
中,要使用一个在 Ball 类中定义的 Sprite 影片,请看代码:
package {
}
色(color)。如果不给这些参数的话,就会使用默认的参数:半径为 40,颜色为红色(这是
AS3.0 新增的功能)。这个类非常简单,但却非常有用,今后在书中会经常用到,所以大家
一定要掌握。
器,这样就可以让小球上下移动了。
package {
}
首先,需要一个角度属性(angle)初始值为 0。在 onEnterFrame 方法中,使用该角的正弦
值并扩大 50 倍。这样一来,取值的范围就变成了 50 到-50。再在这个值上加舞台高度的一
半,数值就变为从 250 到 150(设舞台高度为 400 像素),用这个值作为小球的 Y 坐标,最后
为下一次循环增加 0.1 个弧度, 这样就完成了小球平滑的上下运动。每一次循环的值都不相
同,我们发现如果将 0.1 变为另一个数值的话,就改变了小球运动的速度。角度(angle)变
化的快慢与 Math.sin 从 1 到-1 变化的速度成正比。很明显,改变 50 这个值,就改变了小
球移动的距离,而改变 stage.stageHeight / 2 的值,就改变了小球运动时围绕的位置。
我们还可以给出一些抽象的值作为变量,代码如下(只给出需要改变或增加的部分):
// at the top of the class:
private var angle:Number = 0;
private var centerY:Number = 200;
private var range:Number = 50;
private var speed:Number = 0.1;
// and the handler function:
public function onEnterFrame(event:Event):void {
}
在运动代码中没有使用具体的数值,真是次非常好的练习,以后应尽量这样做。
线性垂直运动
是这个文件的代码:
package {
}
心跳运动
个值来影响小球的缩放,实现一个心跳的效果,代码如下:
package {
}
原理是一样的,centerScale 表示 100%的缩放比, range 表示范围, speed 表示速度。不
仅如此,正弦波还在 alpha,rotation 等属性中应用。
双角波形
(center)和速度(speed)值。用一个正弦波作为一种属性,另一个正弦波作为另一种属性,
比如位置或缩放。我不敢保证能够得到什么有用的结果,但这样做的话,就等于让这些函数
自由发挥作用。
心点(center),将其中一个角(angle1)作为小球的 X 坐标,另一个角(angle2)作为 Y 坐标。
运行程序时,就像只虫子在房间里飞,虽然这些数字都是预先定义好的,但结果却没有什么
规律可言。代码如下:
package {
}
绘制波形
package {
}
制出的波形。注意,由于 Flash 的 Y 轴是反向的,所以绘制出的波形也是颠倒的。
- 转 第三章 三角学应用(2)(as3.0)
- 转 第三章 三角学应用(1)(as3.0)
- 转 第三章 三角学应用(3)(as3.0)
- MTM动画教程学习笔记1【第三章 动画中的三角学】
- 普林斯顿微积分读本:第 2 章 三角学回顾
- AS3.0应用与学习网站 【转】
- AS3.0常用第三方类库:TweenMax .as
- AS3.0常用第三方类库:TweenMax
- AS3.0常用第三方类库:TweenMax
- AS3.0常用第三方类库:TweenMax
- 转 第四章 渲染技术(2)(as3.0)
- 转 第十一章 撞球物理(2)(as3.0)
- 转 第十三章 正向运动学:行走(2)(as3.0)
- 转 第十五章 3D 基础 (2)(as3.0)
- 转 第十九章 flash实用技巧 (2)(as3.0)
- 普林斯顿微积分读本——第二章 三角学回顾(读书笔记)
- javascript动画基础(三)--三角学在动画中的运用(2)
- 三角学笔记
- 转 第二章 ActionScript 3.0 动画基础(2)(as3.0)
- linux安装多个MYSQL实例
- MessageBox一个属性
- 转 第三章 三角学应用(1)(as3.0)
- iphone生命周期
- 转 第三章 三角学应用(2)(as3.0)
- 回味宋朝——文化的盛世
- 转 第三章 三角学应用(3)(as3.0)
- 职场中不可深交的五种人
- 看到的
- 转 第四章 渲染技术(1)(as3.0)
- DataView 概述
- 转 第四章 渲染技术(2)(as3.0)
- 杀人不见血系列之一:青春饭陷阱及对应