UJMLサンプル006：だんだん大きくなる箱(2006/02/02)

使っていて楽しいというか心地よいアプリケーションを作るには適度な「動き」が必要だ。Windowsにおけるウィンドウ最小化のエフェクトのように。

その簡単なサンプルを作成した。インサイドUJMLのAnimationでも詳しく解説されている（英語）。

ポイント：
・タイマーの時と同じようにdelayを使う。
　こんなサンプルではありがたみはわからないが、きっといつかわかる日がくるはずである。

ところで、インサイド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">
]>
<!-- 徐々に大きくなる箱 2006/01/31 22:05 -->
<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="mBoxWidth" type="int" />
        </variables>
        <functions>
            <function name="processTick" type="void">
                <script>
                    <!-- 徐々に箱のサイズを大きくする -->
                    if (mBoxWidth &_LT; mScrWidth){
                        mBoxWidth = mBoxWidth + (mScrWidth / 10);
                        sBox = false;
                        sBox = true;
                        sTick = false;
                        sTick = true;
                    }   
                </script>
            </function>
        </functions>
        <script>
            mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
            mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
            mBoxWidth = 10;
            sBox = true;
            sTick = true;
        </script>
        <states>
            <state var="sTick">
                <transition value="true">
                    <delay>&MSEC_FRAME;</delay>
                    <script>processTick();</script>
                </transition>
            </state>
            <state var="sBox">
                <transition value="true">
                    <display>
                        <box>
                            <x>0</x>
                            <y>0</y>
                            <width><eval>mBoxWidth</eval></width>
                            <height><eval>mBoxWidth</eval></height>
                            <fg>&_COLOR_WHITE;</fg>
                            <bg>&_COLOR_BLUE;</bg>
                        </box>
                    </display>
                </transition>
            </state>
        </states>
    </application>
</ujml>
---