用简单的代码来实现一个精彩的效果,这样的学习乐趣会多一些。
先热个身,做一个移动的小球。新建一个元件,球形,在属性中设置链接的类名为 Ball。
主场景时间轴中写入下面的代码:
var ball = new Ball();
addChild( ball );
ball.x = 100;//设置小球的初始位置
ball.y = 100;
ball.vx = Math.random() * 10;//设置小球的初始速度
ball.vy = Math.random() * 10;
ball.addEventListener(Event.ENTER_FRAME,onMove );//添加帧频事件,让小球动起来。
function onMove( evt ) {
var obj = evt.target;
if (obj.x <= 0 || obj.x >= stage.stageWidth) {//检测是否横向跑出舞台。
obj.vx = - obj.vx;
}
if (obj.y <= 0 || obj.y >= stage.stageHeight) {//检测是否纵向跑出舞台。
obj.vy = - obj.vy;
}
obj.x += obj.vx;
obj.y += obj.vy;
}
原理:小球在帧频事件中不断的将位置与表示速度的值累加,产生运动的效果,超出边界时,速度值取反,运动方向就反向了。
将一个小球变成多个运动的小球,用for循环将前面的代码括起来即可,为了方便控制,增加一个数组来记下全部的小球,代码如下:
var ballArr = new Array();
for (var i=0; i< 6; i++) {
var ball = new Ball();//产生新的小球。
addChild( ball );
ball.x = 100;
ball.y = 100;
ball.vx = Math.random() * 10 +5;
ball.vy = Math.random() * 10 +5;
//ball.alpha = 0;
ball.addEventListener(Event.ENTER_FRAME,onMove );
ballArr.push( ball );//将小球放入到数组中去。
}
function onMove( evt:Event ) {
var obj = evt.target;
if (obj.x <= 0 || obj.x >= stage.stageWidth) {
obj.vx = - obj.vx;
}
if (obj.y <= 0 || obj.y >= stage.stageHeight) {
obj.vy = - obj.vy;
}
obj.x += obj.vx;
obj.y+=obj.vy;
}
一群小球产生了,现在利用小球的位置来连线,得到运动的线条,在上面的代码下面,加入如下的代码:
var paper:Sprite = new Sprite();//创建一个放置线条的容器
addChild(paper);
var pen:Graphics = paper.graphics;//对容器中的画线类进行引用,引用的作用是让代码更简洁一些,便于理解。
paper.addEventListener(Event.ENTER_FRAME,onDrawLine);
function onDrawLine(evt:Event){
pen.clear();//清屏
pen.lineStyle(2,0xff0000);//设置线条类型
pen.moveTo( ballArr[0].x,ballArr[0].y);//移动到数组中第一个小球的位置
for(var i=1;i< ballArr.length;i++){//循环连线到数组中最后一个小球
pen.lineTo( ballArr[i].x,ballArr[i].y);
}
pen.lineTo( ballArr[0].x,ballArr[0].y);//将连线进行到第一个小球
}
完成以上代码以后,就可以得到一个运动的折线,不想看到小球的话,让它们alpha=0隐身起来就行了。
为了一个更特殊的效果,可以在最后加入下面的代码:
paper.scaleX = paper.scaleY = 0.3;
paper.x = 150;
paper.y = 150;
线条与小球的运动同步,但看起来又像是独立的运动,效果如下:
打完收工。