| パッケージ | 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 プロパティは、その間隔にわたるビヘイビアーを決定するために使用されます。キーフレームのシーケンスは、時間の値が増加する順にソートする必要があります。
アニメーションは常に時間 = 0 から開始し、最終キーフレームの time 値に等しい継続時間にわたって実行されます。時間 = 0 においてキーフレームが定義されていない場合、そのキーフレームは暗黙的になり、アニメーション開始時のターゲットプロパティの値を使用します。
キーフレームはアニメーションに含まれる時間を明示的に定義するため、キーフレームを使用するエフェクトの継続時間は、エフェクトにある全 MotionPath の最終キーフレームの最大時間に従って設定されます。例えば、エフェクトでキーフレームが 0、500、1000、2000 の各時間に存在する場合、エフェクト自体にどのような duration プロパティが設定されているかにかかわらず、そのエフェクトでは 2000 ミリ秒が実際の継続時間になります。継続時間は最終キーフレームによって決まるため、どの MotionPath にも必ず最終キーフレームが存在する必要があります。つまり、最終キーフレームの時間が暗黙的に MotionPath の継続時間になります。
キーフレームでは、その value を未定義の状態で残すことができます（値を設定しないか、null に設定するか、NaN に設定することができます）。その場合は、アニメーションの開始時に値が動的に決定されます。未定義の値は次のように決定されます。
- 未定義の値が最初のキーフレームにある場合、次のキーフレームに
valueとvalueByの両方のプロパティが設定されていれば、そのキーフレームから、これらの値の差として値が計算されます。それ以外の場合は、ターゲットからプロパティの現在の値が取得されます。 - 未定義の値が最終キーフレームにあり、アニメーションがトランジションで実行中である場合、トランジションのターゲットビューステートにある値が使用されます。
- それ以外の場合は、現在のキーフレームで
valueByが設定されていれば、前のキーフレームのvalueを使用してそれに現在のキーフレームのvalueByを追加することによって、そのvalueが計算されます。
関連する 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 | () | メソッド |
public function getValue(fraction:Number):Object| 言語バージョン: | ActionScript 3.0 |
| 製品バージョン: | Flex 4 |
| ランタイムバージョン: | Flash Player 10, AIR 1.5 |
経過時間の割合が指定されると、補間された値を計算して返します。この関数は、その割合が収まるキーフレーム間隔を特定してから、その間隔上にある境界キーフレームの値の間を対象にその間隔内を補間します。
パラメーター
fraction:Number — エフェクトの継続時間全体のうちの割合です（0.0 ～ 1.0 の値で示されます）。
|
Object — 補間された値です。
|
<?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