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

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

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

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

③AnimationVisibleクラス
・一般的なオブジェクトの表示非表示切替アニメーションの実装を補助するクラスです。
・AnimationVisibleクラス単体で表示切替のアニメーションが実装できます。
・実装方法には、インスタンスを生成する方法と、スタティックメソッドを利用する方法の二種類があります。

Form form1 {
    x = 0;
    y = 0;
    width = 799;
    height = 495;
    Scroll = SCROLL_NONE;
 
    /* メニュー１ */
    Form FormSideMenu1 {
        x = 698;
        y = -6;
        width = 100;
        height = 500;
        Scroll = SCROLL_NONE;
  
        Button Button1[5] {
            Title = "メニュー１";
        }
  
        /* メニュー１開閉アニメーション */
        /* アニメーション実装をしたいオブジェクトの直下に配置すると、targetプロパティを省略できます。 */
        AnimationVisible anim1 {
   
            /* 総アニメーション時間を１秒に設定 */
            duration = 1.0;
   
            /* 更新間隔を0.01秒に設定 */
            interval = 0.01;
   
            /* 数値変化タイプ（動作具合）をSWINGに設定 */
            easing = EASINGTYPE_SWING;
   
            /* アニメーション方式を右スライドに設定 */
            effect = EFFECTTYPE_SLIDE_RIGHTSIDE;
        }
    }
 
    /* メニュー１開閉ボタン */
    Button ButtonSideMenu {
        x = 11;
        y = 8;
        width = 126;
        height = 50;
        Title = "メニュー１開閉\n（インスタンスで実装）";
  
        Function OnTouch( e ) {
   
            /* toggleメソッドで開閉を実装 */
            /* 表示状態に応じて表示、非表示が実行されます。 */
            ^.FormSideMenu1.anim1.toggle();
        }
    }
 
    /* メニュー２ */
    Form FormSideMenu2 {
        x = -3;
        y = 394;
        width = 500;
        height = 100;
        Scroll = SCROLL_NONE;
  
        Button Button1[5] {
            Layout = LAYOUT_HORIZONTAL;
            Title = "メニュー２";
        }
    }
 
    /* メニュー２開閉ボタン */
    Button ButtonSideMenu2 {
        x = 156;
        y = 9;
        width = 148;
        height = 50;
        Title = "メニュー２開閉\n（スタティックメソッドで実装）";
  
        Function OnTouch( e ) {
   
            /* メニュー２の表示状態によって処理を分岐 */
            if (^.FormSideMenu2.visible) {
   
                /* ＜スタティックメソッドで実装＞ */
                /* 第１引数で対象オブジェクトをメニュー２に設定 */
                /* 第２引数でアニメーション方式をズームモードに設定 */
                /* 第３引数でズームモード時の移動元（移動先）座標を配列で設定（x=20,y=10） */
                /* 第４引数で総アニメーション時間を1秒に設定 */
                /* 第５引数で数値変化タイプ（動作具合）をSWINGに設定 */
                /* 第６引数で更新間隔を0.01秒に設定 */
                /* 第７引数で処理落ち発生時の更新方法をコマ飛ばしに設定 */
                /* ※引数は省略可能です。 */
                AnimationVisible.hide(^.FormSideMenu2, AnimationVisible.EFFECTTYPE_Zoom, new Array(20,10), 1, EASINGTYPE_SWING, 0.01, true);
            } else {
                AnimationVisible.show(^.FormSideMenu2, AnimationVisible.EFFECTTYPE_Zoom, new Array(20,10), 1, EASINGTYPE_SWING, 0.01, true);
            }
        }
    }
}


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