アニメーションの実装方法 -AnimationVisibleクラス-

画面表示 - アニメーション

アニメーションの実装方法 -AnimationVisibleクラス-

Biz/Browser DTでは新たにアニメーション機能を実装させるクラスセットが追加されました。
アニメーションクラスは、単純にオブジェクトのアニメーション動作を実現するだけではなく、任意のプロパティをアニメーション変化させることができるクラスセットです。

①Animationクラス
・アニメーション全体の動作に関する設定を担うクラスです。
・アニメーション全体の動作方向やパラメータの変化具合などを設定することができます。
・下位に配置されたAnimationParameterクラスとセットで利用します。

②AnimationParameterクラス
・アニメーションにおける、操作対象プロパティと変更パラメータを保持するクラスです。
・アニメーションの操作対象の指定や、アニメーション開始地、終了地、変化する値の幅などを設定します。
・上位に配置されたAnimationクラスとセットで利用します。

Form form1 {
    x = 0;
    y = 0;
    width = 800;
    height = 600;
 
    /* 黄色ラベル */
    Label lb1 {
        x = 20;
        y = 100;
        width = 150;
        height = 80;
        bgColor = "yellow";
        value = "横方向に移動";
    }
 
    /* 緑色ラベル */
    Label lb2 {
        x = 19;
        y = 191;
        width = 150;
        height = 80;
        bgColor = "green";
        value = "透過";
    }

    /* 黄色ラベル動作開始ボタン */
    Button stBtn {
        x = 20;
        y = 20;
        width = 100;
        height = 50;
        title = "動作開始";
  
        Function OnTouch( e ) {
   
            /* アニメーション実行 */
            ^.anim1.start();
        }
    }
 
    /* 緑色ラベル透過ボタン */
    Button stBtn1 {
        x = 155;
        y = 20;
        width = 100;
        height = 50;
        title = "透過";
  
        Function OnTouch( e ) {
            ^.anim2.start();
        }
    }
 
    /* 黄色ラベル移動アニメーション */
    Animation anim1 {
  
        /* 総アニメーション時間を１秒に設定 */
        duration = 1;
  
        /* 数値変化タイプ（動作具合）をSWINGに設定 */
        easing = EASINGTYPE_SWING;
  
        /* 数値変更方向（動作方向）をfrom→toに設定 */
        direction = DIRECTION_FORWARD;
  
        /* 更新間隔を0.01秒に設定 */
        interval = 0.01;
  
        /* アニメーション対象オブジェクト */
        AnimationParameter param1 {
   
            /* 操作対象オブジェクトを「lb1」に指定（階層構造で指定） */
            target = ^.^.lb1;
   
            /* 操作対象プロパティを「x」に指定（文字列で指定） */
            propertyName = "x";
   
            /* アニメーション開始値を「20」に設定 */
            from = 20;
   
            /* アニメーション終了値を「500」に設定 */
            to = 500;
        }
    }
 
    /* 緑色ラベル透過アニメーション */
    Animation anim2 {
  
        /* 総アニメーション時間を2秒に設定 */
        duration = 2;
  
        /* 数値変化タイプ（動作具合）をLINEARに設定 */
        easing = EASINGTYPE_LINEAR;
  
        /* 数値変更方向（動作方向）をfrom→to、to→fromの繰り返しに設定 */
        direction = DIRECTION_ALTERNATE;
  
        /* 更新間隔を0.01秒に設定 */
        interval = 0.01;
  
        /* アニメーション対象オブジェクト */
        AnimationParameter param1 {
   
            /* 操作対象オブジェクトを「lb2」に指定（階層構造で指定） */
            target = ^.^.lb2;
   
            /* 操作対象プロパティを「opacity」に指定（文字列で指定） */
            propertyName = "opacity";
   
            /* アニメーション開始値を「1」に設定 */
            from = 1;
   
            /* アニメーション終了値を「0」に設定 */
            to = 0;
        }
    }
}


		Biz-Collections Bizの宝箱トップへ
		Biz/Browser DT・Biz/Designer DT TIPS集トップへ