| 包 | spark.effects.animation |
| 类 | public class MotionPath |
| 继承 | MotionPath  Object |
| 子类 | SimpleMotionPath |
| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
显示 MXML 语法
隐藏 MXML 语法The <s:MotionPath> tag
inherits the tag attributes of its superclass,
and adds the following tag attributes:
<s:MotionPath
id="ID"
interpolator="NumberInterpolator"
keyframes="val"
property="val"
/>
默认 MXML 属性keyframes
相关 API 元素
| 属性 | 由以下参数定义 | ||
|---|---|---|---|
 | constructor : Object
对类对象或给定对象实例的构造函数的引用。 | Object | |
| interpolator : IInterpolator
插补器决定如何计算动画中的中间值。 | MotionPath | ||
| keyframes : Vector.<Keyframe>
表示属性在动画过程中所采用的时间/值对的 Keyframe 对象序列。 | MotionPath | ||
| property : String
要设置动画的效果目标上属性的名称。 | MotionPath | ||
| 方法 | 由以下参数定义 | ||
|---|---|---|---|
MotionPath(property:String = null)
构造函数。 | MotionPath | ||
返回此 MotionPath 对象的副本（包含每个关键帧的副本）。 | MotionPath | ||
给定已过去时间部分的情况下，计算并返回一个内插值。 | MotionPath | ||
|
表示对象是否已经定义了指定的属性。 | Object | |
|
表示 Object 类的实例是否在指定为参数的对象的原型链中。 | Object | |
|
表示指定的属性是否存在、是否可枚举。 | Object | |
|
设置循环操作动态属性的可用性。 | Object | |
|
返回此对象的字符串表示形式，其格式设置遵守区域设置特定的约定。 | Object | |
|
返回指定对象的字符串表示形式。 | Object | |
|
返回指定对象的原始值。 | Object | |
interpolator | 属性 |
public var interpolator:IInterpolator| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
插补器决定如何计算动画中的中间值。默认情况下，MotionPath 类会假定这些值的类型为 Number，且 Number 类型的中间值可以自动计算。如果 MotionPath 类是带有非 Number 值的给定关键帧，或者需要的行为必须使用另一种插补方法（如按通道颜色插补），则应该提供插补器。
Flex 在 spark.effects.interpolation 包中提供了预定义的插补器。
keyframes | 属性 |
public var keyframes:Vector.<Keyframe>| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
表示属性在动画过程中所采用的时间/值对的 Keyframe 对象序列。每一对连续的关键帧都会控制它们之间的时间间隔内的动画。后一个关键帧的可选 easer 和 valueBy 属性用于确定该时间间隔内的行为。关键帧序列必须按时间值的升序排序。
动画通常起始于 time=0，持续时长为最后一个关键帧中的 time 值。如果在 time=0 处没有定义关键帧，则该关键帧是隐式的，它使用的是在动画开始时目标属性的值。
因为关键帧显式定义动画中所涉及的时间，所以使用关键帧的效果的持续时间会根据效果中所有 MotionPath 的最后一个关键帧的最大时间来设置。例如，如果效果拥有位于时间 0、500、1000 和 2000 处的关键帧，则不论在该效果本身上设置何种 duration 属性，该效果的有效持续时间都为 2000 毫秒。由于最后一个关键帧决定持续时间，因此任何 MotionPath 中都始终必须有最后一个关键帧。即，隐含的意思是，最后一个关键帧中的时间就是 MotionPath 的持续时间。
任何关键帧都可以将其 value 保留为未定义状态（不设置，或者设为 null 或 NaN）。在这种情况下，值会在动画开始时动态地确定。任何未定义的值都可以按如下方式确定：
- 如果它是第一个关键帧，则在下一个关键帧同时设置了
value和valueBy属性的情况下，它是从下一个关键帧来计算的（作为这些值的差异）。否则，会获取目标上的属性的当前值。 - 如果这是最后一个关键帧，且动画正在过渡中运行，则会使用过渡的目标视图状态中的值。
- 否则，任何关键帧计算其
value的方法都会是使用前一个关键帧的value加上当前关键帧的valueBy（如果已设置valueBy）。
相关 API 元素
property | 属性 |
public var property:String| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
要设置动画的效果目标上属性的名称。
MotionPath | () | 构造函数 |
clone | () | 方法 |
public function clone():MotionPath| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
返回此 MotionPath 对象的副本（包含每个关键帧的副本）。
返回MotionPath — 此 MotionPath 对象的副本（包含每个关键帧的副本）。
|
getValue | () | 方法 |
<?xml version="1.0"?>
<!-- Simple example to demonstrate the s:Keyframe and s:MotionPath classes. -->
<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">
<fx:Declarations>
<fx:Vector id="kf" type="spark.effects.animation.MotionPath">
<s:MotionPath property="scaleX">
<s:Keyframe time="250" value="0.5"/>
<s:Keyframe time="500" value="1.0"/>
<s:Keyframe time="750" value="0.5"/>
<s:Keyframe time="1000" value="1.0"/>
<s:Keyframe time="1250" value="0.5"/>
<s:Keyframe time="1500" value="1.0"/>
</s:MotionPath>
<s:MotionPath property="scaleY">
<s:Keyframe time="250" value="0.5"/>
<s:Keyframe time="500" value="1.0"/>
<s:Keyframe time="750" value="0.5"/>
<s:Keyframe time="1000" value="1.0"/>
<s:Keyframe time="1250" value="0.5"/>
<s:Keyframe time="1500" value="1.0"/>
</s:MotionPath>
</fx:Vector>
<s:Animate id="shrinkEffect"
motionPaths="{kf}"
target="{myImage}"/>
</fx:Declarations>
<s:Panel id="examplePanel"
title="Keyframe and MotionPath Effect Example"
width="75%" height="75%">
<s:layout>
<s:VerticalLayout paddingTop="10" paddingLeft="10"/>
</s:layout>
<!-- Directions -->
<s:VGroup id="detailsBox" width="50%" left="0">
<s:Label width="99%" color="blue"
text="Click the Adobe logo to watch the effect."/>
</s:VGroup>
<mx:Image id="myImage"
source="@Embed(source='assets/logo.jpg')"
click="shrinkEffect.end();shrinkEffect.play();"/>
</s:Panel>
</s:Application>
Tue Jun 12 2018, 11:04 AM Z