AS3 TransitionManager 自带特效类

Posted 2021-02-21 dt1991

参考于：https://www.cnblogs.com/wonderKK/archive/2012/08/22/2650475.html

 

包含以下10种过渡方式：

1.遮帘过渡 Blinds
--------使用逐渐消失或逐渐出现的矩形来显示影片剪辑对象。
(参数:numStrips，“遮帘”效果中的遮罩条纹数。建议的范围是1 到50。dimension，一个整数，指示遮帘条纹是垂直的(0) 还是水平的(1)。)

2.淡化过渡 Fade
--------淡入或淡出影片剪辑对象。
3.飞行过渡 Fly
--------从某一指定方向滑入影片剪辑对象。
(参数：startPoint，一个指示起始位置的整数；范围是1 到9;
左上1;上中2;右上3;左中4;中心5;右中6; 左下7;下中8;右下9。)
4.光圈过渡 Iris
--------使用可以缩放的方形或圆形动画遮罩来显示或隐藏影片剪辑对象。
(参数:startPoint,一个指示起始位置的整数,范围是1 到9：
左上1；上中2；右上3；左中4；中心5；右中6；左下7；下中8；右下9。
shape，值为Iris.SQUARE（方形）或Iris.CIRCLE（圆形）的遮罩形状。)
5.照片过渡 Photo
--------使影片剪辑对象像放映照片一样出现或消失。
6.像素溶解过渡 PixelDissolve
---------使用随机出现或消失的棋盘图案矩形来显示或隐藏影片剪辑对象。
(参数:xSections，一个整数，指示沿水平轴的遮罩矩形部分的数目。
建议的范围是1 到50。ySections，一个整数，指示沿垂直轴的遮罩矩形部分的数目。建议的范围是1 到50。)
7.旋转过渡 Rotate
------- 旋转影片剪辑对象。
(参数:ccw，一个布尔值：对于顺时针旋转为false ；对于逆时针旋转为true。degrees，一个整数，指示对象要旋转的度数。建议是范围是1 到9999)
8.挤压过渡 Squeeze
----------水平或垂直缩放影片剪辑对象。
(参数:dimension，一个整数，指示“挤压”效果应是水平的(0) 还是垂直的(1)   )
9.划入/划出过渡 Wipe
----------使用水平移动的动画遮罩形状来显示或隐藏影片剪辑对象。
(参数:startPoint，一个整数，指示开始位置。范围是1 到4 和6 到9：左上1 ；上中2 ；右上3 ；左中， 4 ；右中6 ;左下7 ；下中8 ；右下9)
10.缩放过渡 Zoom
-----------通过按比例缩放来放大或缩小影片剪辑对象。

 

若要使用 TransitionManager 类的方法和属性，您可以在两种方法中选择一种来创建新实例。最简单的方法是调用 TransitionManager.start() 方法，只须调用一次，就可以创建新的 TransitionManager 实例、指定目标对象、用一种缓动方法应用过渡并启动过渡效果。以下代码使用 TransitionManager.start() 方法：

TransitionManager.start(myMovieClip_mc, {type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut});

　　

还可以通过使用 new 运算符来创建 TransitionManager 类的新实例。然后可以指定过渡属性，并通过调用 TransitionManager.startTransition() 方法在另一步中启动过渡效果。以下代码使用 TransitionManager.startTransition() 方法：

var myTransitionManager:TransitionManager = new TransitionManager(myMovieClip_mc);
myTransitionManager.startTransition({type:Zoom, direction:Transition.IN, duration:1, easing:Bounce.easeOut});

　　建议使用第二种，因为可控制性高很多。

 

 

缓动方法有六种：

 

Back     在过渡范围外的一端或两端扩展动画一次，以产生从其范围外回拉的效果。

Bounce   在过渡范围的一端或两端内添加弹跳效果。弹跳数与持续时间相关，持续时间越长，弹跳数越多。

Elastic    添加一端或两端超出过渡范围的弹性效果。弹性量不受持续时间影响。

Regular 在一端或两端添加较慢的运动。此功能使您能够添加加速效果、减速效果或这两种效果。

Strong   在一端或两端添加较慢的运动。此效果类似于Regular 缓动类，但它更明显。

None     添加从开始到结尾无任何减速或加速效果的相同的运动。此过渡也称为线性过渡。

 

easeIn    在过渡的开始提供缓动效果。
easeOut 在过渡的结尾提供缓动效果。
easeInOut 在过渡的开始和结尾提供缓动效果。
easeNone 指明不使用缓动计算。只在None 缓动类中提供

 

 

 

参数说明

type：过渡方式
    遮帘过渡 Blinds 使用逐渐消失或逐渐出现的矩形来显示影片剪辑对象。
    淡化过渡 Fade 淡入或淡出影片剪辑对象。
    飞行过渡 Fly 从某一指定方向滑入影片剪辑对象。
    光圈过渡 Iris 使用可以缩放的方形或圆形动画遮罩来显示或隐藏影片剪辑对象。(新出现的图片将只占据屏幕中间)
    照片过渡 Photo 使影片剪辑对象像放映照片一样出现或消失。(出现的时候会突然黑一下)
    像素溶解过渡 PixelDissolve 使用随机出现或消失的棋盘图案矩形来显示或隐藏影片剪辑对象。
    旋转过渡 Rotate 旋转影片剪辑对象。（以屏幕一角为中心旋进）
    挤压过渡 Squeeze 水平或垂直缩放影片剪辑对象(会惯性的超出本身大小一段，然后缩回正常大小)。
    划入/划出过渡 Wipe 使用水平移动的动画遮罩形状来显示或隐藏影片剪辑对象。
    缩放过渡 Zoom 通过按比例缩放来放大或缩小影片剪辑对象。

direction:
    Transition.IN       出现
    Transition.OUT      消失

duration：延迟时间，单位为秒(s)

easing：  缓动模式
    None.easeIn          Regular.easeIn          Srong.easeIn           Back.easeIn          Elastic.easeIn
    None.easeInOut     Regular.easeInOut     Srong.easeInOut     Back.easeInOut     Elastic.easeInOut
    None.easeOut        Regular.easeOut       Srong.easeOut        Back.easeOut        Elastic.easeOut

从左到右 ，即从None到Elastic表示稳固系数，这里给运动的元件附加上一个虚拟的质量

 

    None    很轻，施力就动

 

    Regular    正常，同样施力就动
    Srong.easeIn  比较重，需要施加更大的力, 给人的感觉就是动起来很费劲 

 

    Back.easeIn   运动之前，有一个向后的动作

 

    Elastic.easeIn  正式运动之前，会前后往复几次

 

从上到下， 即easeNone    没有缓动   (只有None有这个属性)
    easeIn      开始时缓动
    easeInOut   开始和结束时缓动
    easeOut     结束时缓动

另外，每个过渡方式还带有自己独有的参数
    //百叶窗过渡，numStrips为栅栏个数    dimension 0为横向，非0为纵向
    str_array[0] = {type:Blinds, direction:Transition.IN, duration:3, easing:None.easeNone, numStrips:15, dimension:0};  
    str_array[1] = {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone};
    str_array[2] = {type:Iris, direction:Transition.IN, duration:3, easing:None.easeNone, startPoint:5, shape:Iris.CIRCLE};

 

    //棋盘过渡，xSections, ySections 分别为xy方向的方格个数

 

    str_array[3] = {type:PixelDissolve, direction:Transition.IN, duration:1, easing:None.easeNone, xSections:50, ySections:50};
    //旋转过渡，从屏幕左上角顺时针旋入
    str_array[4] = {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:180};
    str_array[5] = {type:Zoom, direction:Transition.IN, duration: 3, easing:Back.easeOut}；//从左上角放大图片；

    str_array[6] = {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1};
    //擦除过渡--左上，startPoint：擦除起始点，下面是1-9对应的位置，注意：5和1的效果一样
                                     _______________________________
                                    |1、5              2               3|
                                    |                                       |
                                    |                                       |
                                    |                                       |
                                    |3                                    6|
                                    |                                       |
                                    |                                       |
                                    |                                       |
                                    |                                       |
                                    |7_______________8____________9|

 

以下页面对TransitionManager有比较详细的说明，还有每个参数的动画演示（官网）
http://www.republicofcode.com/tutorials/flash/as3transitionmanager/

 

各种类型demo：

var types=[];
function ImageView() {
	types.push({
		type: PixelDissolve,
		direction: Transition.IN,
		duration: 1,
		easing: None.easeNone,
		xSections: 50,
		ySections: 50
	});
	types.push({
		type: Iris,
		direction: Transition.IN,
		duration: 3,
		easing: None.easeNone,
		startPoint: 5,
		shape: Iris.CIRCLE
	});
	types.push({
		type: Blinds,
		direction: Transition.IN,
		duration: 3,
		easing: None.easeNone,
		numStrips: 15,
		dimension: 0
	});
	types.push({
		type: Rotate,
		direction: Transition.IN,
		duration: 3,
		easing: Strong.easeInOut,
		ccw: false,
		degrees: 180
	});
	types.push({
		type: Zoom,
		direction: Transition.IN,
		duration: 3,
		easing: Back.easeOut
	});
	types.push({
		type: Fade,
		direction: Transition.IN,
		duration: 3,
		easing: None.easeNone
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 1
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 2
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 3
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 4
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 6
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 7
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 8
	});
	types.push({
		type: Wipe,
		direction: Transition.IN,
		duration: 2,
		easing: None.easeNone,
		startPoint: 9
	});
}

　　

最后。我一直想找到终止这个特效的方法，最后给我找到了。原理启动一个新的特效就会覆盖旧的特效。那么第一个特效侦听特效完毕的时间也不会触发。如下面的代码，a为影片剪辑。

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.display.MovieClip;
var myTransitionManager: TransitionManager;
myTransitionManager = new TransitionManager(a);
myTransitionManager.addEventListener("allTransitionsInDone", animationComplete);
myTransitionManager = new TransitionManager(new MovieClip);
myTransitionManager.addEventListener("allTransitionsInDone", animationComplete__2);
myTransitionManager.startTransition({
	type: Zoom,
	direction: Transition.IN,
	duration: 1,
	easing: Bounce.easeOut
});

function animationComplete(e: Event): void {
	trace("allTransitionsInDone")
}

function animationComplete__2(e: Event): void {
	trace("animationComplete__2")
}

　　

最终输出：