显示对象小练之六（一个翻转效果）

雪原xy

[Actionscript3] 纯文本查看 复制代码

//(纸牌翻转效果)文档类;
package{
import flash.display.Sprite;
import flash.events.MouseEvent;
import son.Turner;
import son.RecClass;
import son.CutP;
import flash.display.Bitmap;

public class TurnClass extends Sprite{
//实例化相关类;
var pic:hh=new hh();
var bi:Bitmap=new Bitmap(pic);
var tu:Turner=new Turner();
var cu:CutP=new CutP();
public function TurnClass():void{
//切割位图;
cu.cut(bi,3,2);
//借助for循环把每一个小块进行操作;
for(var i:int=0;i<cu.sprArr.length;i++){
var re:RecClass=new RecClass();
tu.turnOver(re.rec,cu.sprArr[i]);
addChild(re.rec.parent);
}
re.rec.parent.parent.scaleX=this.stage.stageWidth/re.rec.parent.parent.width;
re.rec.parent.parent.scaleY=this.stage.stageHeight/re.rec.parent.parent.height;
}

}
}


//定义一个类，类中一个方法，实现翻牌效果;
package son{
//导入Sprite类，用来存放两个待翻转的显示对象;
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Point;

//类名为Turner;
public  class Turner extends Sprite {
//定义一个属性，用来计数;
private var k:int;
//下面是类中的公开的方法，实现翻转效果;
//两个参数，两个显示对象，一个在上一个在下，翻转就是交换它们的深度;
public function turnOver(o1:DisplayObject,o2:DisplayObject):void
{
//定义一个容器，用来存放显示对象;
var sp:Sprite=new Sprite();
//让第一个显示对象的大小匹配第二个显示对象的大小;
o1.scaleX=o2.width/o1.width;
o1.scaleY=o2.height/o1.height;
o1.x=o2.x;
o1.y=o2.y;
//初始化显示对象的深度;
addChild(sp);
sp.addChild(o2);
sp.addChild(o1);
//添加点击事件，激活翻转函数;
sp.addEventListener(MouseEvent.CLICK,turnF);
} 
//点击事件的侦听器;
function turnF(e:MouseEvent):void
{         
trace("添加侦听器");
e.currentTarget.addEventListener(Event.ENTER_FRAME,tF);
//给k赋值，10帧完成翻转;
k=10;
} 
//翻转侦听器;
function tF(ev:Event):void
{         
trace("开始翻转");
//前五帧缩小;
if(k>5)
{        trace(k);
ev.currentTarget.scaleX=0.2*(k-6);

//调整缩小后容器的位置，让容器看起来像是沿中轴翻转;
//ev.currentTarget.x=(1-0.2*(k-6))*ev.target.width/2;
}
//第五帧交换显示对象的深度;
else if(k==5)
{        
trace(k);
ev.target.swapChildrenAt(0,1);
}
//后五帧逐渐放大;
else if(k<5)
 {
        trace(k);
ev.currentTarget.scaleX=0.2*(5-k);
/*//调整放大后容器的位置;
ev.currentTarget.x=ev.target.width/2-0.2*(5-k)*ev.target.width/2;
*///翻转结束移除侦听器;
if(k==0){
ev.currentTarget.removeEventListener(Event.ENTER_FRAME,tF)
}
}
//k值自减，记录帧数;
k--;
}   
}
}


//一个切割位图的类;
package son{
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.DisplayObject;
import flash.geom.Rectangle;
import flash.geom.Matrix;
import flash.geom.Point;

public class CutP{
//定义两个私有的数组进行把相关对象存储起来;
private var _bitArr:Array=[];
private var  _sprArr:Array=[];
//切割的方法;
public function cut(ob:DisplayObject,ws:uint,hs:uint):void{
var obx:BitmapData=new BitmapData(ob.width,ob.height);
obx.draw(ob);
var k:int=0;
var _w:Number=obx.width/ws;
var _h:Number=obx.height/hs;
for(var j:uint=0;j<hs;j++){
for(var i:uint=0;i<ws;i++){
var bmpdt:BitmapData=new BitmapData(_w,_h);
var sp:Sprite=new Sprite();
bmpdt.copyPixels(obx,new Rectangle(i*_w,j*_h,_w,_h),new Point(0,0));
_bitArr.push(new Bitmap(bmpdt));
sp.addChild(_bitArr[k]);
_sprArr.push(sp);
_sprArr[k].x=i*(_w+5);
_sprArr[k].y=j*(_h+5);
k++;
}
}
}
//用getter方法公开私有数组;
public function get bitArr():Array{
return _bitArr;
}
public function get sprArr():Array{
return _sprArr;
}
}
}


//定义一个位图类(一个矩形);
package son{
import flash.display.Bitmap;
import flash.display.BitmapData;
public class RecClass{
private var dat:BitmapData=new BitmapData(250,150);
public var rec:Bitmap;
public function RecClass():void{
dat.noise(Math.random()*5,0,0xff0000,5);
rec=new Bitmap(dat);
}
}
}

雪原xy

这次练习花费太多精力，翻转效果老是调整不好，
特别是注册点问题查了好多的资料还是搞不好。
代码有点乱，

TKCB

【11RIA 闪客社区，评分公示】：
是否有价值：一般（银子 +10  贡献 +1）
是否原创：是（金子 +1）
是否翻译：否
如对自己的评分有疑问，则咨询版主、管理员等。

TKCB

雪原xy 发表于 2019-3-15 09:44
这次练习花费太多精力，翻转效果老是调整不好，
特别是注册点问题查了好多的资料还是搞不好。
代码有点乱， ...

翻转的心中点有问题，其实每个容器对象（MC、Sprite）或者其他带有坐标系的对象，它都有一个永远不变的坐标系（XY是二维坐标系、XYZ是三维坐标系）。

对象旋转永远是以坐标系的中心点（也就是注册点）为圆心进行旋转的。

你需要做的是，一个容器存放一个图片，图片的坐标是 负的宽度的的一半，也就是让图片的中心点定位到容器坐标系的中心点，这样你旋转容器就不会位置乱了。

雪原xy

TKCB 发表于 2019-3-15 10:09
翻转的心中点有问题，其实每个容器对象（MC、Sprite）或者其他带有坐标系的对象，它都有一个永远不变的坐 ...

您说的这个方法我也试过了，但是图片只显示一半，负数坐标那部分显示不出来！

TKCB

雪原xy 发表于 2019-3-15 11:15
您说的这个方法我也试过了，但是图片只显示一半，负数坐标那部分显示不出来！ ...

那应该是你代码写的有问题~~

雪原xy

TKCB 发表于 2019-3-15 13:17
那应该是你代码写的有问题~~

哦，我再试试！

qiuhao

学习了

ganggang_lantia

看着效果还是不错的

qiuhao

雪原xy 发表于 2019-3-15 20:45
哦，我再试试！

我试了好多次，只是用drawRect绘制的矩形才能实现，你这个代码不会改