フレックス-AnimatePropertiesエフェクト

前書き

このアニメーション効果は、値の間の任意のプロパティセットをアニメーション化します。 motionPathsプロパティを設定して、アニメーション化するプロパティと値を指定します。

クラス宣言

以下は spark.effects.Animate クラスの宣言です-

public class Animate
   extends Effect

パブリックプロパティ

Sr.No	Property & Description
1	disableLayout : Boolean trueの場合、エフェクトはターゲットの親コンテナのレイアウトを無効にし、コンテナのautoLayoutプロパティをfalseに設定し、ターゲットオブジェクトのレイアウト制約も無効にします。
2	easer : IEaser この効果のイージング動作。
3	interpolator : IInterpolator プロパティの開始値と終了値の間の値を計算するためにこのエフェクトで使用される補間器。
4	motionPaths : Vector.<MotionPath> MotionPathオブジェクトのベクトル。各オブジェクトには、アニメーション化されるプロパティの名前と、アニメーション中にプロパティが取る値が保持されます。
5	repeatBehavior : String 繰り返し効果の動作。これは、repeatCountが0または> 1に等しい効果を意味します。

パブリックメソッド

Sr.No	Method & Description
1	Animate(target:Object = null) コンストラクタ。

イベント

Sr.No

Event & Description

1

effectRepeat

複数回繰り返されるエフェクトについて、エフェクトが新しい繰り返しを開始するときに送出されます。

2

effectUpdate

エフェクトがターゲットを更新するたびに送出されます。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

mx.effects.Effect
flash.events.EventDispatcher
対象

Flexアニメーション効果の例

次の手順に従って、テストアプリケーションを作成して、Flexアプリケーションでのアニメーション効果の使用を確認します。

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides.client as explained in the Flex - Create Application chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Compile and run the application to make sure business logic is working as per the requirements.

以下は、変更されたmxmlファイル src/com.finddevguides/HelloWorld.mxml の内容です。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">

   <fx:Style source = "/com/finddevguides/client/Style.css"/>
   <fx:Script>
      <![CDATA[
         private function applyAnimateProperties():void {
            animateEffect.play();
         }
      ]]>
   </fx:Script>

   <fx:Declarations>
      <s:Animate id = "animateEffect" duration = "750" target = "{mainHGroup}" >
         <s:SimpleMotionPath valueFrom = "1" valueTo = "15" property = "gap"/>
         <s:SimpleMotionPath valueFrom = "0" valueTo = "-50" property = "z"/>
      </s:Animate>
   </fx:Declarations>

   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Effects Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading"/>

         <s:Panel id = "animatePanel" title = "Using Animate"
            width = "500" height = "300" >
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center"/>
            </s:layout>

            <s:Button label = "Start Animation" click = "applyAnimateProperties()"/>

            <s:HGroup id = "mainHGroup">
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232"/>
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232"/>
               <s:BorderContainer width = "50" height = "50"
                  borderWeight = "2" color = "0x323232"/>
            </s:HGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

すべての変更が完了したら、link：/flex/flex_create_application [Flex-アプリケーションの作成]の章で行ったように、アプリケーションを通常モードでコンパイルして実行します。アプリケーションに問題がない場合、次の結果が生成されます：[link：/flex/samples/EffectsApplicationl＃currentlyLoaded = Animate [Try it online]]

フレックスアニメーション効果

Flex-animate-effect

目次