Dojo アニメーション (シンプルアクション)

アニメーションをコントロールに適用します。

定義場所

拡張ライブラリ

シンプルアクションのタイプ

Dojo 効果 (クライアント)

構文

<xe:dojoAnimateProperty node="target" duration="ms" rate="ms" delay="ms loaded="true|false" easing="function" repeat="number" var="name"><xe:this.attributes><xp:parameter name="name" value="value" loaded="true|false"</xp:parameter>...</xe:this.attributes><xe:this.properties><xe:dojoAnimationProps name="width" start="200" end="400" loaded="true|false" unit="px|pc|pt|mm|cm|in|ex|em"></xe:dojoAnimationProps> ...</xe:this.properties> ...</xe:dojoAnimateProperty>

表 1. 属性
属性	説明
`attributes="json"`	現状のまま渡される JSON 形式の値のリスト。
`delay="ms"`	アニメーションが開始されるまでの待ち時間 (ミリ秒単位)。デフォルトは 0 です。
`duration="ms"`	アニメーションの表示時間 (ミリ秒)。デフォルトは 350 です。
`easing="function"`	アニメーションの表示時間内におけるアニメーションの変化の速度を返す関数。
`left="pixels"`xxx	ターゲットがスライドしてくる左位置 (ピクセル単位)。
`loaded="true\|false"`	コントロールのロード時に、タグインスタンスを作成するかどうか。デフォルトは `true` です。
`top="pixels"`xxx	ターゲットがスライドしてくる上位置 (ピクセル単位)。
`node="target"`	アニメーションが適用されるコントロールの識別子。
`properties="props"`	プロパティのセット。各セットには、以下のプロパティがあります。 `end`: 終了値を示します。 `loaded`: コントロールのロード時にタグインスタンスを作成します。 `name`: プロパティの名前を指定します。 `start`: 開始値を示します。 `unit`: 計測単位を指定します (ピクセルの場合は `px` (デフォルト)、パイカの場合は `pc`、ポイントの場合は `pt`、ミリメートルの場合は `mm`、センチメートルの場合は `cm`、インチの場合は `in`、小文字の `x` の高さの場合は `ex`、現在のフォントサイズの場合は `em`)。
`rate="ms"`	フレーム間の待ち時間 (ミリ秒単位)。デフォルトは 20 (1 秒あたり 50 フレーム) です。
`repeat="number"`	アニメーションのループ回数。
`var="name"`	アニメーションを識別する変数名。

例

以下の例は、領域のサイズを大きくするボタンと小さくするボタンを示しています。

<xp:div id="div1" style="width: 200px; height: 200px;
	font-size:16pt;font-weight:bold;text-align:center;
	background-color:rgb(128,255,255)">Testing testing testing
</xp:div>
<xp:button value="Label" id="button1">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoAnimateProperty node="div1" duration="3000" rate="100">
				<xp:this.properties>
					<xe:dojoAnimationProps name="width" start="200" end="400"></xe:dojoAnimationProps>
					<xe:dojoAnimationProps name="height" start="200" end="400"></xe:dojoAnimationProps>
				</xp:this.properties>
			</xe:dojoAnimateProperty>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>
<xp:button value="Label" id="button2">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script>
			<xe:dojoAnimateProperty node="div1" duration="3000" rate="100">
				<xp:this.properties>
					<xe:dojoAnimationProps name="width" start="400" end="200"></xe:dojoAnimationProps>
					<xe:dojoAnimationProps name="height" start="400" end="200"></xe:dojoAnimationProps>
				</xp:this.properties>
			</xe:dojoAnimateProperty>
		</xp:this.script>
	</xp:eventHandler>
</xp:button>