| パッケージ | spark.effects.animation |
| クラス | public class Keyframe |
| 継承 | Keyframe  Object |
| 言語バージョン: | ActionScript 3.0 |
| 製品バージョン: | Flex 4 |
| ランタイムバージョン: | Flash Player 10, AIR 1.5 |
エフェクトのキーフレームのコレクションは、エフェクトのモーションパスと呼ばれます。モーションパスでは、任意の数のキーフレームを定義できます。その後、エフェクトは、2 つのキーフレームで指定された値の間を補間することによってプロパティの値を計算します。
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）に設定した後、必要に応じて、各 Keyframe で 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 を前のキーフレームの 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, 10:34 AM Z