| 包 | spark.effects.animation |
| 类 | public class Keyframe |
| 继承 | Keyframe  Object |
| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
效果的关键帧的集合称为效果的运动路径。运动路径可以定义任何数量的关键帧。这样效果就可以通过在两个关键帧所指定的值之间进行插补来计算属性的值。
使用 MotionPath 类容纳 Keyframe 对象的集合，这些对象用于表示效果的运动路径。MotionPath 类指定目标上的属性的名称，Keyframe 对象的集合指定效果过程中不同时间的属性的值。
MXML 语法
显示 MXML 语法
隐藏 MXML 语法The <s:Keyframe> tag
inherits the tag attributes of its superclass,
and adds the following tag attributes:
<s:Keyframe
id="ID"
easier="Linear"
time="val"
value="val"
valueBy="val"
/>
相关 API 元素
| 属性 | 由以下参数定义 | ||
|---|---|---|---|
 | constructor : Object
对类对象或给定对象实例的构造函数的引用。 | Object | |
| easer : IEaser
对运动路径中前一个 Keyframe 对象与此 Keyframe 对象之间的运动所应用的缓动行为。 | Keyframe | ||
| time : Number
以毫秒为单位的时间，此关键帧的效果目标应该在此时间处具有 value 属性指定的值。 | Keyframe | ||
| value : Object
效果目标的属性在 time 属性指定的时间处所应该具有的值。 | Keyframe | ||
| valueBy : Object
用于计算此关键帧或前一个关键帧中的 value 的可选参数（如果已指定）。 | Keyframe | ||
| 方法 | 由以下参数定义 | ||
|---|---|---|---|
构造函数。 | Keyframe | ||
返回此 Keyframe 对象的副本。 | Keyframe | ||
|
表示对象是否已经定义了指定的属性。 | Object | |
|
表示 Object 类的实例是否在指定为参数的对象的原型链中。 | Object | |
|
表示指定的属性是否存在、是否可枚举。 | Object | |
|
设置循环操作动态属性的可用性。 | Object | |
|
返回此对象的字符串表示形式，其格式设置遵守区域设置特定的约定。 | Object | |
|
返回指定对象的字符串表示形式。 | Object | |
|
返回指定对象的原始值。 | Object | |
easer | 属性 |
public var easer:IEaser| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
对运动路径中前一个 Keyframe 对象与此 Keyframe 对象之间的运动所应用的缓动行为。默认情况下，缓动是线性的，或者根本就没有缓动。
请注意，父效果可能已经拥有对整个动画所应用的缓动。因此，如果需要缓动每个关键帧的时间间隔，则需要将全局效果缓动器设置为线性缓动 (spark.effects.easing.Linear)，然后根据需要对每个关键帧设置 easer。
由于此属性作用于序列中前一个 Keyframe 对象与此 Keyframe 对象之间的时间间隔，因此会对序列中的第一个 Keyframe 对象，忽略 easer 属性。
默认值为 Linear。
time | 属性 |
public var time:Number| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
以毫秒为单位的时间，此关键帧的效果目标应该在此时间处具有 value 属性指定的值。此时间与用此关键帧定义的效果的起始时间相关。
value | 属性 |
public var value:Object| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
效果目标的属性在 time 属性指定的时间处所应该具有的值。
valueBy | 属性 |
public var valueBy:Object| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
用于计算此关键帧或前一个关键帧中的 value 的可选参数（如果已指定）。如果在前一个关键帧中未设置 value，但此关键帧中同时定义了 value 和 valueBy，则前一个关键帧中的 value 可以通过以此关键帧中的 value 减去此关键帧中的 valueBy 来计算。
同样，如果此关键帧中的 value 未定义，但是此关键帧中的 valueBy 和前一个关键帧中的 value 都已设置，则此关键帧中的 value 可以通过前一个关键帧中的 value 加上此关键帧中的 valueBy 来计算。
因为 valueBy 仅适用于关键帧之前的时间间隔，而第一个关键帧之前没有时间间隔，所以对于序列中的第一个关键帧，会忽略它。
Keyframe | () | 构造函数 |
public function Keyframe(time:Number = NaN, value:Object = null, valueBy:Object = null)| 语言版本: | ActionScript 3.0 |
| 产品版本: | Flex 4 |
| 运行时版本: | Flash Player 10, AIR 1.5 |
构造函数。
参数time:Number (default = NaN)value 参数指定的值。
| |
value:Object (default = null)time 处应该具有的值。
| |
valueBy:Object (default = null)valueBy 与 MotionPath 对象的关键帧集合中的前一个关键帧的 value 相加来动态地计算 value。如果是序列中的第一个 Keyframe，则会忽略此值。
|
clone | () | 方法 |
<?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