UJMLサンプル008：上下からつぶれて消える箱(2006/02/02)

これは消えるエフェクトのサンプル。上下からつぶれる感じで、最後に充分小さくなったら消えます。

ところで、インサイドUJML中にも書いてあるが、この方法は「 the fixed-timer method」と呼ばれ、簡単に実装できるがあまり望ましくない方法らしい。もうひとつの「the maximum-frame-rate method」と呼ばれるものが望ましいようだ。後者の方がよりスムーズに動くと解説されている。

---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.2//EN" "../ujml.dtd" [
    <!ENTITY MSEC_FRAME "50">
]>
<!--
上下から閉じる
-->
<ujml>
    <application>
        <state-variables>
            <state-var name="sTick" type="boolean" />
            <state-var name="sBox" type="boolean" />
        </state-variables>
        <variables>
            <var name="mScrWidth" type="int" />
            <var name="mScrHeight" type="int" />
            <var name="mPosX" type="int" />
            <var name="mPosY" type="int" />
            <var name="mBoxWidth" type="int" />
            <var name="mBoxHeight" type="int" />
        </variables>
        <functions>
            <function name="processTick" type="void">
                <script>
                    <!-- 徐々に箱のサイズを小さくする。上下から閉じる感じ -->
                    if (mBoxHeight &_GT; (mScrHeight / 10) ){
                        <!-- スクリーンの高さの10分の1ずつ小さくしています。 -->
                        mBoxHeight = mBoxHeight - (mScrHeight / 10);

                        <!-- 箱の左上の角の位置を決める。 -->
                        mPosY = (mScrHeight / 2) - (mBoxHeight / 2);

                        <!-- ステート変数切り替えて再描画 -->
                        sBox = false;
                        sBox = true;

                        <!-- サイズ変更の再処理 -->
                        sTick = false;
                        sTick = true;
                    }else{
                        <!-- 充分小さくなったら箱を消す -->
                        sBox = false;
                    }
                </script>
            </function>
        </functions>
        <script>
            <!-- スクリーンのサイズを調べる -->
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);

            <!-- 最初の箱のサイズ：高さはスクリーンの2分の1 -->
            mBoxWidth = mScrWidth;
            mBoxHeight = mScrHeight / 2;

            mPosX = 0;
            mPosY = (mScrHeight / 2) - (mBoxHeight / 2);

            sBox = true;
            sTick = true;
        </script>
        <states>
            <!-- 徐々にサイズ変更します。delayの分だけ実行間隔があります。 -->
            <state var="sTick">
                <transition value="true">
                    <delay>&MSEC_FRAME;</delay>
                    <script>processTick();</script>
                </transition>
            </state>
            <state var="sBox">
                <transition value="true">
                    <display>
                        <box>
                            <x><eval>mPosX</eval></x>
                            <y><eval>mPosY</eval></y>
                            <width><eval>mBoxWidth</eval></width>
                            <height><eval>mBoxHeight</eval></height>
                            <fg>&_COLOR_BLUE;</fg>
                            <bg>&_COLOR_WHITE;</bg>
                        </box>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>