UJMLサンプル024：スプリットエフェクト(2006/02/04)
エフェクト3つ目、これで最後にするつもりだが、作っていて気がついたのが、アニメーションとしては良くないコードだったことだ。以前「UJMLサンプル006：だんだん大きくなる箱」で少し書いたが、サンプルのコードは「 the fixed-timer method」と呼ばれる方法で実装している。本来は「the maximum-frame-rate method」という方法で実装すべきだ。おいおい、新たなサンプルを紹介していこうと思う。
今まで2回分のエフェクト：
動作サンプル
※動作にはJAVA Runtimeが必要
---コード
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE ujml PUBLIC "-//UIEVOLUTION//DTD UJML 1.5//EN"
"http://www.uievolution.com/dtd/ujml-1.5.dtd" [
<!ENTITY MSEC_FRAME "100">
]>
<!-- http://uiengineda.blogs.com スピリットエフェクト（上下から中央に向かって隠れた部分が小さくなる） -->
<ujml>
<application>
<state-variables>
<state-var name="sBox" type="boolean"/>
<state-var name="sTick" type="boolean"/>
<state-var name="sScreenBox" type="boolean" size="2"/>
</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="mWidth" type="int"/>
<var name="mHeight" type="int"/>
<var name="mScreenBoxHeight" type="int"/>
<var name="mTickCount" type="int"/>
</variables>
<functions>
<function name="processTick" type="void">
<variables>
<var name="i" type="int"/>
</variables>
<script>
mTickCount++;
<!-- 徐々に箱のサイズを小さくする。上下から閉じる感じ -->
if (mScreenBoxHeight-mTickCount*2 &_GT; 0 ){
<!-- 高さを減らす -->
mScreenBoxHeight = mScreenBoxHeight - mTickCount * 2;
<!-- ステート変数切り替えて再描画 -->
i = 0;
sScreenBox[0] = false;
sScreenBox[0] = true;
sScreenBox[1] = false;
sScreenBox[1] = true;
<!-- サイズ変更の再処理 -->
sTick = false;
sTick = true;
}else{
<!-- 充分小さくなったら箱を消す -->
sScreenBox[0] = false;
sScreenBox[1] = false;
}
</script>
</function>
</functions>
<script>
<!-- スクリーンのサイズを調べる -->
mScrWidth = _getIntProperty(&_PROPERTY_INT_SCREEN_WIDTH;);
mScrHeight = _getIntProperty(&_PROPERTY_INT_SCREEN_HEIGHT;);
<!-- 幅 スクリーンの半分 -->
mWidth = mScrWidth / 2;
<!-- 高さ -->
mHeight = mScrHeight / 2;
mScreenBoxHeight = mHeight;
<!-- 中心に配置 -->
mPosX = (mScrWidth / 2) - (mWidth / 2);
mPosY = (mScrHeight / 2) - (mHeight / 2);
mTickCount = 0;
sBox = true;
sTick = true;
</script>
<states>
<state var="sBox">
<transition value="true">
<display>
<box>
<x><eval>mPosX</eval></x>
<y><eval>mPosY</eval></y>
<width><eval>mWidth</eval></width>
<height><eval>mHeight</eval></height>
<fg>&_COLOR_BLUE;</fg>
<bg>&_COLOR_BLUE;</bg>
</box>
</display>
</transition>
</state>
<state var="sTick">
<transition value="true">
<delay>&MSEC_FRAME;</delay>
<script>processTick();</script>
</transition>
</state>
<!-- 中央に向かってだんだん小さくなる白い箱 -->
<state var="sScreenBox" index="*">
<transition value="true">
<display>
<box>
<x><eval>mPosX</eval></x>
<y><eval>(mScrHeight / 2) - (mScreenBoxHeight / 2)</eval></y>
<width><eval>mWidth</eval></width>
<height><eval>mScreenBoxHeight</eval></height>
<fg>&_COLOR_WHITE;</fg>
<bg>&_COLOR_WHITE;</bg>
</box>
</display>
</transition>
</state>
</states>
</application>
</ujml>
コメント