Sprite有一个graphics可以用来绘制基本图形,比如我们要画下面这个图形:
对应的AS3代码为:
01
package
{
02
import
flash.display.Sprite;
03
04
public
class
Arrow
extends
Sprite {
05
public
function
Arrow():
void
{
06
init();
07
}
08
private
function
init():
void
{
09
graphics.lineStyle(
1
,
0
,
1
);
10
graphics.beginFill(
0xffff99
);
11
graphics.drawCircle(
0
,
0
,
2
);
//中心点
12
graphics.moveTo(
0
,
50
);
13
graphics.lineTo(
100
,
50
);
14
graphics.lineTo(
100
,
0
);
15
graphics.lineTo(
150
,
75
);
16
graphics.lineTo(
100
,
150
);
17
graphics.lineTo(
100
,
100
);
18
graphics.lineTo(
0
,
100
);
19
graphics.lineTo(
0
,
50
);
20
graphics.endFill();
21
}
22
}
23
}
把它加到舞台上,并自动跟着鼠标转动(下列代码写在第一帧):
01
var
_arrow:Arrow =
new
Arrow();
02
addChild(_arrow);
03
_arrow.x=stage.stageWidth/
2
-
50
;
04
_arrow.y=stage.stageHeight/
2
-
75
;
05
06
this
.addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
07
08
function
EnterFrameHandler(e:Event):
void
{
09
var
dx:
Number
=mouseX-_arrow.x;
10
var
dy:
Number
=mouseY-_arrow.y;
11
//trace("dy=" + dy + ",dx=" + dx);
12
var
angle:
Number
=Math.atan2(dy,dx);
13
_arrow.rotation=angle*
180
/Math.PI;
14
}
这里用到了反正切函数,其原理示意图如下:
即以鼠标所在点与Arrow图形中心点为参考,构建一个三角形,利用对边比邻边得到正切,然后利用反正切求出角度,最终让图形旋转该角度,下面是效果:
但是好象有点问题,相信您也看出来了,因为我们绘制图形时,默认是以坐标原点为中心,而非图形中心点为中心,所以在跟随鼠标旋转时,总感觉有些错位,没关系,只要调整一下Arrow.cs即可
01
package
{
02
import
flash.display.Sprite;
03
04
public
class
Arrow
extends
Sprite {
05
public
function
Arrow():
void
{
06
init();
07
}
08
private
function
init():
void
{
09
graphics.lineStyle(
1
,
0
,
1
);
10
graphics.beginFill(
0xffff99
);
11
graphics.drawCircle(
0
,
0
,
2
);
//中心点
12
graphics.moveTo(-
75
,-
25
);
13
graphics.lineTo(
25
,-
25
);
14
graphics.lineTo(
25
,-
75
);
15
graphics.lineTo(
75
,
0
);
16
graphics.lineTo(
25
,
75
);
17
graphics.lineTo(
25
,
25
);
18
graphics.lineTo(-
75
,
25
);
19
graphics.lineTo(-
75
,-
25
);
20
graphics.endFill();
21
}
22
}
23
}
另一个很有用的三角函数就是正弦Sin函数--对边比斜边
当Sin函数的角度参数从0度变化到360度时,正弦函数的值会在1到-1之间来回摆动,如果在动画中需要来回振荡的情况,正弦函数就派上用场了
01
package
{
02
import
flash.display.Sprite;
03
04
//小球 类
05
public
class
Ball
extends
Sprite{
06
07
private
var
radius:
Number
;
//半径
08
private
var
color:
uint
;
//颜色
09
10
public
function
Ball(r:
Number
=
50
,c:
uint
=
0xff0000
){
11
this
.radius = r;
12
this
.color = c;
13
init();
14
}
15
16
private
function
init():
void
{
17
graphics.beginFill(color);
18
graphics.drawCircle(
0
,
0
,radius);
19
graphics.endFill();
20
}
21
}
22
}
这里我们先定义一个基本的小球类Ball,在接下来的动画里,我们让小球沿正弦轨迹运行,同时另一个小球模拟“心跳”运动(即改变大小)
01
var
angle:
Number
=
0
;
02
03
//参数常量
04
const
Y_SPEED =
0.1
;
//y轴移动速度
05
const
X_SPEED =
1
;
//x轴移动速度
06
const
AMPLITUDE =
50.0
;
//最大振幅
07
const
X_START =
0
;
//x轴的起始点
08
09
//变量
10
var
ySpeed:
Number
= Y_SPEED;
11
var
xSpeed:
Number
= X_SPEED;
12
var
amplitude:
Number
= AMPLITUDE;
13
14
var
b:Ball =
new
Ball(
5
,
0xff0000
);
15
addChild(b);
16
b.x = X_START;
17
18
var
heart:Ball =
new
Ball(
50
,
0x0000ff
);
19
addChild(heart);
20
heart.x = stage.stageWidth/
2
;
21
heart.y = stage.stageHeight/
2
;
22
heart.alpha =
0.3
;
23
24
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
25
26
function
EnterFrameHandler(e:Event){
27
b.y = stage.stageHeight/
2
+ Math.sin(angle) * amplitude;
28
angle += ySpeed;
29
b.x += xSpeed;
30
31
heart.scaleX = heart.scaleY =
1
+ Math.sin(angle) *
0.5
;
32
33
graphics.lineStyle(
1
,
0xefefef
,
1
);
34
graphics.lineTo(b.x,b.y);
35
36
37
//x,y,振幅 逐渐加大
38
xSpeed +=
0.08
;
39
ySpeed +=
0.003
;
40
amplitude +=
1
;
41
42
if
(b.x > stage.stageWidth + b.width){
43
//超出舞台后,还原参数
44
b.x = X_START;
45
xSpeed = X_SPEED;
46
ySpeed = Y_SPEED;
47
amplitude = AMPLITUDE;
48
}
49
50
}
甚至还可以同时把正弦函数应用到多个属性:
01
//参数常量
02
const
Y_SPEED =
0.07
;
//y轴变化速度
03
const
X_SPEED =
0.10
;
//x轴变化速度
04
const
AMPLITUDE =
150.0
;
//最大振幅
05
const
X_START = stage.stageWidth/
2
;
//x轴的起始点
06
const
Y_START = stage.stageHeight/
2
;
//y轴的起始点
07
08
//变量
09
var
ySpeed:
Number
= Y_SPEED;
10
var
xSpeed:
Number
= X_SPEED;
11
var
amplitude:
Number
= AMPLITUDE;
12
var
angleX =
0
;
13
var
angleY =
0
;
14
15
var
b:Ball =
new
Ball(
5
,
0xff0000
);
16
addChild(b);
17
18
b.x = X_START;
19
b.y = Y_START;
20
21
graphics.moveTo(b.x,b.y);
22
23
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
24
25
function
EnterFrameHandler(e:Event){
26
27
b.y = Y_START + Math.sin(angleY) * amplitude;
28
b.x = X_START + Math.sin(angleX) * amplitude;
29
30
angleX += xSpeed;
31
angleY += ySpeed;
32
33
//angleX += Math.random()/10;
34
//angleY += Math.random()/5;
35
36
graphics.lineStyle(
1
,
0xefefef
,
1
);
37
graphics.lineTo(b.x,b.y);
38
}
如果把代码中的二行注释启用,即让x,y的变化速度改成随机,结果可能更有趣: