| 包 | spark.effects |
| 类 | public class AnimateTransitionShader |
| 继承 | AnimateTransitionShader Animate Effect EventDispatcher Object |
| 子类 | CrossFade, Wipe |
| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
![]() | AnimateTransitionShader 效果使用 Pixel Bender,不受 AIR 手机应用程序支持。 |
AnimateTransitionShader 效果可设置两个位图之间的过渡的动画,一个位图表示起始状态 (
bitmapFrom),另一个表示结束状态 (bitmapTo)。
该动画使用这两个位图作为输入,通过运行 shader 属性所指定的像素着色器程序来执行。位图由 flash.display.BitmapData 类的实例表示。您可以使用 Adobe Pixel Bender Toolkit 创建自己的像素着色器程序。
只要有一个位图未提供,就会根据目标在过渡中的相应状态或者直接从目标(如果未在过渡中运行该效果)以动态方式确定值。如果效果在过渡中运行,且目标对象在状态更改过程中消失或出现,则在该对象消失时会有一个全透明的位图代表它。
因为需要有关于仅存在于这些类中的对象的信息才能捕获对象的位图,所以此效果仅能在 UIComponent 或 GraphicElement 目标上运行。
由于效果是基于位图的,且基础像素着色器程序希望两个位图的大小相同,因此仅当两个位图大小相同时,效果才会正常工作。这意味着如果目标对象更改了大小或方向,从而导致边框大小发生改变,效果就可能无法正常播放。
此效果及其子类与 Flex 中其他效果的不同之处在于,它们旨在独立运行,当与其他效果同时运行时,可能不会产生预期结果。此约束的事实依据是:之前和之后位图都会在效果开始之前捕获。因此,如果在计算这些位图之后目标对象发生了改变(如另一个效果正在更改目标的属性),则这些更改不会体现在预计算的位图中,且结果可能并非像期望的那样。为确保正确播放这些基于位图的效果,应该在其目标对象上单独播放它们。
MXML 语法
隐藏 MXML 语法The <s:AnimateTransitionShader> tag
inherits all of the tag attributes of its superclass,
and adds the following tag attributes:
<s:AnimateTransitionShader
Properties
id="ID"
bitmapFrom="no default"
bitmapTo="no default"
shaderByteCode="no default"
sahderProperties="no default"
/>
默认 MXML 属性motionPaths
相关 API 元素
spark.effects.supportClasses.AnimateTransitionShaderInstance
spark.primitives.supportClasses.GraphicElement
| 属性 | 由以下参数定义 | ||
|---|---|---|---|
| bitmapFrom : BitmapData
代表此效果的起始状态的位图数据。 | AnimateTransitionShader | ||
| bitmapTo : BitmapData
代表此效果的结束状态的位图数据。 | AnimateTransitionShader | ||
![]() | className : String [只读]
效果类的名称,如“Fade”。 | Effect | |
![]() | constructor : Object
对类对象或给定对象实例的构造函数的引用。 | Object | |
![]() | customFilter : mx.effects:EffectTargetFilter
指定一个 EffectTargetFilter 类型的自定义滤镜对象,效果将使用此对象来确定播放效果的目标。 | Effect | |
![]() | disableLayout : Boolean
如果为 true,则效果通过将容器的 autoLayout 属性设置为 false 对其目标的父容器禁用布局,并同时对目标对象禁用任何布局约束。 | Animate | |
![]() | duration : Number
效果的持续时间(以毫秒为单位)。 | Effect | |
![]() | easer : IEaser
此效果的缓动行为。 | Animate | |
![]() | effectTargetHost : mx.effects:IEffectTargetHost
一个属性,您可以通过设置此属性访问数据效果基于列表的目标控件。 | Effect | |
![]() | filter : String
指定用于过滤效果目标的算法。 | Effect | |
![]() | hideFocusRing : Boolean
确定在开始播放效果时,效果是否应隐藏对焦环。 | Effect | |
![]() | instanceClass : Class
一个 Class 类型的对象,用于指定此效果类的效果实例类。 | Effect | |
![]() | interpolator : IInterpolator
此效果计算属性的起始值和结束值之间的值所用的插补器。 | Animate | |
![]() | isPlaying : Boolean [只读]
一个只读标志,如果当前正在播放效果的任一实例,则为 true;否则,则为 false。 | Effect | |
![]() | motionPaths : Vector.<MotionPath>
MotionPath 对象的 Vector,其中的每个对象都带有正在设置动画的属性的名称以及该属性在动画过程中所采用的值。 | Animate | |
![]() | perElementOffset : Number
在效果的第一个目标之后,其他效果目标的附加延迟(以毫秒为单位)。 | Effect | |
![]() | playheadTime : Number
效果的当前时间位置。 | Effect | |
![]() | relevantProperties : Array
一个属性名称 Array,执行过滤时将使用这些名称。 | Effect | |
![]() | relevantStyles : Array
一个样式名称 Array,执行过滤时将使用这些名称。 | Effect | |
![]() | repeatBehavior : String
一种重复效果的行为,这意味着 repeatCount 等于 0 或大于 1 的效果。 | Animate | |
![]() | repeatCount : int = 1
效果的重复次数。 | Effect | |
![]() | repeatDelay : int = 0
重复播放效果前需要等待的时间(以毫秒为单位)。 | Effect | |
| shaderByteCode : Object
效果在两个位图之间设置动画时使用的像素着色器程序的字节码。 | AnimateTransitionShader | ||
| shaderProperties : Object
在播放之前已传递到像素着色器程序的参数名/值对的映射。 | AnimateTransitionShader | ||
![]() | startDelay : int = 0
开始播放效果前需要等待的时间(以毫秒为单位)。 | Effect | |
![]() | target : Object
要应用此效果的对象。 | Effect | |
![]() | targets : Array
一个对象 Array,这些对象都是效果的目标。 | Effect | |
![]() | triggerEvent : Event
如果触发了某个效果,则此项目是由 EffectManager 传递给此 Effect 的 Event 对象;如果 EffectManager 当前没有播放此效果,则为 null。 | Effect | |
| 方法 | 由以下参数定义 | ||
|---|---|---|---|
AnimateTransitionShader(target:Object = null)
构造函数。 | AnimateTransitionShader | ||
![]() | addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void
使用 EventDispatcher 对象注册事件侦听器对象,以使侦听器能够接收事件通知。 | EventDispatcher | |
![]() |
捕获效果目标上相关属性的当前值,并将这些值另存为结束值。 | Effect | |
![]() |
捕获另一组目标相关属性的当前值。在运行数据更改效果时,Flex 将使用此函数。
| Effect | |
![]() |
捕获效果目标上相关属性的当前值。 | Effect | |
![]() |
创建一个效果实例并对其进行初始化。 | Effect | |
![]() |
获取一个目标对象 Array,并对每个目标调用 createInstance() 方法。 | Effect | |
![]() |
删除实例中的事件侦听器,然后从实例列表中删除该实例。 | Effect | |
![]() |
将事件调度到事件流中。 | EventDispatcher | |
![]() |
中断当前正在播放的效果,立即跳转到该效果的末尾。 | Effect | |
![]() |
返回一个字符串 Array,其中每个 String 都是被此效果更改的属性的名称。 | Effect | |
![]() |
检查 EventDispatcher 对象是否为特定事件类型注册了任何侦听器。 | EventDispatcher | |
![]() |
表示对象是否已经定义了指定的属性。 | Object | |
![]() |
表示 Object 类的实例是否在指定为参数的对象的原型链中。 | Object | |
![]() |
暂停效果,直到调用 resume() 方法。 | Effect | |
![]() |
开始播放效果。 | Effect | |
![]() |
表示指定的属性是否存在、是否可枚举。 | Object | |
![]() |
从 EventDispatcher 对象中删除侦听器。 | EventDispatcher | |
![]() |
在效果由 pause() 方法暂停后继续播放效果。 | Effect | |
![]() |
逆序播放效果;如果当前正在播放效果,则从该效果的当前位置开始逆序播放。 | Effect | |
![]() |
设置循环操作动态属性的可用性。 | Object | |
![]() |
停止播放效果,使效果目标保持当前状态。 | Effect | |
![]() |
返回此对象的字符串表示形式,其格式设置遵守区域设置特定的约定。 | Object | |
![]() |
返回指定对象的字符串表示形式。 | Object | |
![]() |
返回指定对象的原始值。 | Object | |
![]() |
检查是否用此 EventDispatcher 对象或其任何祖代为指定事件类型注册了事件侦听器。 | EventDispatcher | |
bitmapFrom | 属性 |
public var bitmapFrom:BitmapData| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
代表此效果的起始状态的位图数据。如果未设置此属性,则它会在播放效果时自动计算,方法是拍摄目标对象的快照,或者使用透明位图(如果过渡的起始视图状态中没有该对象)。
bitmapTo | 属性 |
public var bitmapTo:BitmapData| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
代表此效果的结束状态的位图数据。如果未设置此属性,则它会在播放效果时自动计算,方法是拍摄目标对象的快照,或者使用透明位图(如果过渡的结束视图状态中没有该对象)。
shaderByteCode | 属性 |
public var shaderByteCode:Object| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
效果在两个位图之间设置动画时使用的像素着色器程序的字节码。此属性可以表示为 ByteArray 或者代表 ByteArray 的 Class(嵌入资源后的结果)。
像素着色器程序可以具有任意功能和输入,但是最少必须拥有三个 image4 输入。第一个输入可以随意命名,但不可由像素着色器程序代码使用,它存在的意义仅在于满足 Flash 有关将过滤对象指定给第一个输入这一要求。请注意,像素着色器程序中完全未使用的输入会被优化排除,因此您的代码至少应该引用此输入一次。
至少必须还有两个名为 from 和 to 的输入位图,分别代表之前和之后位图图像。最后还必须定义一个名为 progress 的 float 参数,该参数包含效果的已过去部分。
您可以指定两个可选参数:width 和 height。如果有这两个参数,则会自动将它们设置为效果目标的宽度和高度。
有关为 Flash 编写像素着色器程序的更多信息,请参阅 Pixel Bender Toolkit 文档。还可以在 Flex 源代码的 frameworks\projects\flex4\src\spark\effects 目录中查看 CrossFade.pbk 文件的源代码。
shaderProperties | 属性 |
public var shaderProperties:Object| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
在播放之前已传递到像素着色器程序的参数名/值对的映射。例如,要在其 Wipe.pbj 内具有 Pixel Bender pbj 文件的着色器中设置名为 direction 的参数,调用代码可以执行下列操作:
[Embed(source="Wipe.pbj", mimeType="application/octet-stream")]
private var WipeCodeClass:Class;
var shaderEffect = new AnimateTransitionShader();
shaderEffect.shaderByteCode = WipeCodeClass;
shaderEffect.shaderProperties = {direction : 1};
AnimateTransitionShader | () | 构造函数 |
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:states>
<s:State name="default"/>
<s:State name="flipped"/>
</s:states>
<s:transitions>
<s:Transition id="t1">
<s:AnimateTransitionShader
target="{holder}"
duration="1000"
shaderByteCode="@Embed(source='assets/twist.pbj', mimeType='application/octet-stream')"/>
</s:Transition>
</s:transitions>
<s:Panel title="AnimateTransitionShader Example"
width="75%" height="75%" horizontalCenter="0" verticalCenter="0">
<s:HGroup width="100%" height="100%" top="5" left="5" right="5">
<s:Group id="holder">
<s:BitmapImage
source="@Embed('assets/back2.png')"
visible="true" visible.flipped="false"/>
<s:BitmapImage
source="@Embed('assets/c2.png')"
visible="false" visible.flipped="true"/>
</s:Group>
<!-- Directions -->
<s:VGroup id="detailsBox"
width="50%"
left="0">
<s:Label
width="99%"
color="blue"
text="AnimateShaderTransition animates a shader between two images. Click the 'Animate Shader' button to see the effect."/>
</s:VGroup>
</s:HGroup>
<s:Rect left="0" right="0" bottom="0" height="30">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0xD9D9D9" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Button id="playButton"
left="5" bottom="5"
label="Animate Shader"
click="currentState = (currentState == 'flipped') ? 'default' : 'flipped';"/>
</s:Panel>
</s:Application>
Tue Jun 12 2018, 11:04 AM Z

显示 MXML 语法