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>
---
コメント