Motel XML Motions

Table of Contents

モーション

エレメントの動作内容を定義する

↑TOC

motion エレメント

概要

<!ELEMENT motion (toon+)>
<!ATTLIST motion
  id        ID          #REQUIRED
  limit     %Number;    "1"
  callback  CDATA       #IMPLIED
  >

Start tag: required, End tag: required

Attribute definitions

id
Motel.start()やMotel.set()で指定するID
limit
繰り返し数。
0を指定すると無限に繰り返します
callback
モーションが終了（内包するtoonをすべて終了）後に呼び出す関数、またはMotionIDを指定

SAMPLE

<motion id="mod1" limit="0">
モーションを無制限に繰り返します。
停止するにはstop()を使用して下さい。
<motion id="mot2" limit="5">
5回繰り返し、自動的に停止します
limit属性を省略すると1回だけアニメーションします
<motion id="mot1" callback="next1 next2">
callbackを半角スペースで区切り、２つ以上指定すると、そのいずれかがランダムに呼び出されます
ランダム呼び出しは未実装です。２つ以上の指定は現在は出来ません
<motion id="mot2" callback="nextFunction()">
JavaScriptの関数を呼び出す場合は、カッコをつけて下さい
<motion id="mot3" callback="nextMotion">
別の<motion>を呼び出す場合は、そのIDを指定して下さい
別のmotionを指定した場合は、エレメントをそのまま引き継ぎます。

↑TOC

toon エレメント

概要

<!ELEMENT toon EMPTY>
<!ATTLIST toon
  effect    %Effect;     #REQUIRED
  id        ID           #IMPLIED
  base      %Base;       #IMPLIED
  start     CDATA        #IMPLIED
  end       CDATA        #IMPLIED
  delay     %Number;     "0"
  formula   CDATA        #IMPLIED
  vector    (0|1)        "1"
  range     %Number;     "0"
  group     CDATA        #IMPLIED
  time      %Number;     #REQUIRED
  >

Start tag: required, End tag: forbidden

Attribute definitions

effect
move clip resize opacity font rect poly circle conc waitのいずれか
id
-
base
[top middle bottom] [left center right]のいずれか１つまたは１つずつ
start
動作の初期値
end
動作の目的地
delay
複数のエレメントが指定された場合、２つめ以降に適用（単位ミリ秒）
formula
endを導き出す計算式
vector
formulaに基づく移動方向
range
移動ピクセル数
group
他のトーンとグループ化を行い、複数のエレメントが指定された場合にgroup内の別のトーンを使用する
time
イフェクトを行う時間（単位ミリ秒）

start、endはStyleSheetと同じkeyword:value;の形式です
単位はpx固定です。

↑TOC

toon effect='move'

エレメントを単純移動させる。

有効属性
  effect    move
  id        ID
  base      -
  start     top:%Number; left:%Number;
  end       top:%Number; left:%Number;
  delay     %Number;
  formula   -
  vector    -
  range     -
  group     CDATA
  time      %Number;


signカーブに沿った動きなどはendを記述せずにformulaを指定して下さい
startを省略すると現在のエレメントの位置になります
top、leftのいずれかを省略すると現在のエレメントの位置が指定された物と見なします
base, formula, vector, rangeは未実装です

SAMPLE

<toon effect="move" start="top:0;left:40;" end="top:20;left:400;" time="3000" />
top:0px left:40px の位置からtop:50px left:500pxの位置へ3000ミリ秒で移動します
画像をクリックして下さい
XML:
<motion id="move">
<toon effect="move" start="top:0;left:0;" end="top:50;left:500;" time="3000" />
</motion>
HTML:
<img src="star.gif" style="position:relative;" onclick="Motel.start('move', this);">

↑Toon ↑TOC

toon effect='clip'

エレメントをクリッピングする。

有効属性
  effect    clip
  id        ID
  base      -
  start     top:%Clip; left:%Clip; right:%Clip; bottom:%Clip;
  end       top:%Clip; left:%Clip; right:%Clip; bottom:%Clip;
  delay     %Number;
  formula   -
  vector    -
  range     -
  group     CDATA
  time      %Number;

start、endの各値に数値または'auto'を指定出来ます
単位は指定出来ません。px固定となります
省略時は'auto'となります

↑Toon ↑TOC

toon effect='resize'

エレメントをリサイズする。

有効属性
  effect    resize
  id        ID
  base      -
  start     width:%Number; height:%Number;
  end       width:%Number; height:%Number;
  delay     %Number;
  formula   CDATA
  vector    (0|1)
  range     formula使用時1以上
  group     CDATA
  time      %Number;

画像はサイズに合わせて縮小・拡大されます
<div>や<span>エレメントに対してリサイズする場合、その内容がテキストの場合は、エレメントのサイズに合わせて改行などが行われます
overflow:autoやoverflow:scrollが指定してあると、スクロールバーが表示されることがあります
base, formula, vector, rangeは未実装です

SAMPLE

<toon effect="resize" start="width:38;height:43;" end="top:76;left:86;" time="1500" />
width:38px height:43px からwidth:76px height:86pxへ1500ミリ秒で拡大します
star画像をクリックして下さい
XML:
<motion id="resize">
<toon effect="resize" start="width:38;height:43;" end="width:76;height:86" time="1500" />
</motion>
HTML:
<img src="star.gif" style="position:relative;" onclick="Motel.start('resize', this);">

↑Toon ↑TOC

toon effect='opacity'

透明化を行う

有効属性
  effect    opacity
  id        ID
  base      -
  start     opacity:%Number;
  end       opacity:%Number;
  delay     %Number;
  formula   CDATA
  vector    -
  range     -
  group     CDATA
  time      %Number;

InternetExplorereで動かすには、あらかじめスタイルシートにて
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);（元のエレメントが不透明の場合）
を指定しておく必要があります
この指定がないと、スクリプトエラーとなります

Netscape7.1はopacityに対応していないため、透明化されません
Netscape8.0以上で対応しています

SAMPLE

<toon effect="opacity" start="opacity:100;" end="opacity:0;" time="1500" />
不透明から透明へ1500ミリ秒で変化します
star画像をクリックして下さい
XML:
<motion id="opacity">
<toon effect="opacity" start="opacity:100;" end="opacity:0;" time="1500" />
</motion>
HTML:
<img src="star.gif" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);" onclick="Motel.start('opacity', this);">

↑Toon ↑TOC

toon effect='font'

font-sizeを変更する

有効属性
  effect    font
  id        ID
  base      -
  start     %Number;
  end       %Number;
  delay     %Number;
  formula   -
  vector    -
  range     -
  group     CDATA
  time      %Number;

このイフェクトは未実装です

↑Toon ↑TOC

toon effect='color'

font-colorを変更する

有効属性
  effect    color
  id        ID
  base      -
  start     -
  end       -
  delay     %Number;
  formula   -
  vector    -
  range     -
  group     CDATA
  time      %Number;

このイフェクトは未実装です

↑Toon ↑TOC

toon effect='rect'

rectangle（四角形）

有効属性
  effect    rect
  id        ID
  base      -
  start     %Number;,%Number;,%Number;,%Number;
  end       %Number;,%Number;,%Number;,%Number;
  delay     %Number;
  formula   CDATA
  vector    (0|1)
  range     formula使用時1以上
  group     CDATA
  time      %Number;

このイフェクトは未実装です

↑Toon ↑TOC

toon effect='poly'

直線を連結した動作を行う。

有効属性
  effect    poly
  id        ID
  base      -
  start     %Number;,%Number;
  end       %Number;,%Number;
  delay     %Number;
  formula   CDATA
  vector    (0|1)
  range     formula使用時1以上
  group     CDATA
  time      %Number;

このイフェクトは未実装です

↑Toon ↑TOC

toon effect='circle'

円周上の動作を行う。

有効属性
  effect    move
  id        ID
  base      -
  start     -
  end       -
  delay     %Number;
  formula   CDATA
  vector    (0|1)
  range     formula使用時1以上
  group     CDATA
  time      %Number;

このイフェクトは未実装です

↑Toon ↑TOC

toon effect='conc'

concentration（放射）
放射状の動作を行う。

有効属性
  effect    conc
  id        ID
  base      -
  start     top:%Number; left:%Number;
  end       top:%Number; left:%Number;
  delay     %Number;
  formula   CDATA
  vector    (0|1)
  range     formula使用時1以上
  group     CDATA
  time      %Number;

このイフェクトは未実装です

↑Toon ↑TOC

toon effect='wait'

トーン開始時にstart属性で指定されたスタイルを適用します
time属性で指定された時間経過後にend属性で指定されたスタイルを適用します

有効属性
  effect    wait
  id        ID
  base      -
  start     top, left, width, height
  end       top, left, width, height
  delay     %Number;
  formula   src, alt, title, display, position, visibility
  vector    -
  range     -
  group     CDATA
  time      %Number;

formulaの指定により<img>のsrc、alt、title属性の変更、およびStyleSheetのdisplay、position、visibilityを変更出来ます
timeに0を指定すると、続けて次の<toon>を実行します
このイフェクトにはアニメーションはありません
アニメーションを伴わないmove、またはresizeの代替としても使用出来ます
formulaの指定は":"ではなく"="を使用して下さい

Sample

<toon effect="wait" formula="src=image/wait.png" time="0" />
画像を"image/wait.png"に変更
<toon effect="wait" end="top:50;left:20" time="0" />
top:50px;left:20px;に移動
<toon effect="wait" formula="display=block;position=relative;" time="0" />
style.displayを"block"に、style.positionを"relative"に変更

↑Toon ↑TOC

toon effectの値として使用出来るキーワード

以下のキーワードを数値（%Number;）として使用出来ます
start、end属性の値として数値の代わりに以下のキーワードを使用することで、エレメントの状態やドキュメントに合わせた動作を行うことが出来ます

width       動作中のエレメントのwidth
height      動作中のエレメントのheight
top, middle, bottom
            動作中のエレメントのtop, middle, bottom
left, center, right
            動作中のエレメントのleft, center, right
docwidth    ドキュメントの幅
docheight   ドキュメントの高さ
random      0〜1の間のランダムな数値
ID.width    指定されたIDのエレメントのwidth
ID.height   指定されたIDのエレメントのheight

四則計算（+-*/）やカッコ（ () ）を使った計算式を使うことが出来ます

実装状況

random、IDを使ったキーワードは未実装です

Sample

<toon effect="move" start="top:0;left:0;" end="top:docheight-height;left:docwidth-width;" time="1000" />
ドキュメントのtop:0, left:0の位置から、ウインドウの一番下まで移動します

↑Toon ↑TOC

© Wings-Winds 2006