アニメーション機能とは、XPLATFORMの画面を構成する画面要素にアニメーション効果を与える機能のことを意味します。アニメーション効果を与えることができる画面要素には、Visualコンポーネント、画面フォーム、フレーム、ウィジェットなどがあります。

アニメーション機能の概要

XPLATFORMでのアニメーション機能とは、ボタンの回転や移動など画面に表示されたUI要素が動的に変化することを意味します。

このアニメーションは大きくTransitionアニメーション、プロパティアニメーション、コンポジットアニメーションの4種類に分けられますが、コンポジットアニメーションはTransitionアニメーションとプロパティアニメーションを組み合わせたものです。

アニメーション機能の4種類の要素

アニメーション機能を使用するためには、大きく4種類の要素が必要です。

• 何を：どんな画面要素にアニメーション効果を与えるのかを決定します。

• どのように：どんなアニメーション効果を与えるのかを決定します。

• どれだけ：決定したアニメーション効果をどれだけの間、どんな速度で実行するのかを決定します。Interpolationとは、アニメーションにおいての時間経過の変化を表す計算式を意味します。従って、“どれだけ”というよりは“どのように”に近いと言えますが、時間の概念が含まれるため“どれだけ”に分類しました。

• いつ：アニメーション効果をいつ開始するのかを決定します。

簡単なアニメーション機能の実装

アニメーション機能は、4種類の要素が組み合わされることにより動作すると考えてください。

ここでは、簡単にイメージを回転させるアニメーション効果を例にあげて説明します。

プロジェクト及びフォームの生成過程は、既に完了したと仮定して説明を展開します。ほとんどの例題画面はUX-Studioの画面です。

ステップ1 (何を)：回転対象を選定します。即ち、アニメーションターゲットを選定します。
ここでは、TOBESOFTのロゴを出力するImageViewerコンポーネントをアニメーションターゲットに選定しました。

以下は、UX-StudioでQuick Viewを実行した画面です。

ステップ2 (どのように)：アニメーションオブジェクトを生成し、アニメーションの種類を選定します。
ここでは“TOBESOFTのロゴ”を回転させる効果を選定したため、回転効果機能があるTransitionアニメーションオブジェクトを生成します。

ステップ3 (どのように)：アニメーションオブジェクトの詳細値を設定します。
ここでアニメーションターゲットとアニメーション効果を連動させます。

アニメーションオブジェクトの設定値を概略的に説明すると、以下の通りです。

ステップ4 (どれだけ)：時間経過によってアニメーション効果をどれだけ生じさせるのかを決定します。

Interpolation値を“Interpolation.circln”と指定します。“circln”は、最初はゆっくりと動き、次第に速く動きます。

UX-Studioのアニメーションエディターを利用すれば、より便利にアニメーション効果の定義をすることができます。アニメーションオブジェクトをダブルクリックすると、該当のアニメーションオブジェクトについてのアニメーションエディターが表示されます。

アニメーションエディターは、上の画面のようにinterpolation効果をグラフ形状で見ることができます。

横のグラフは、時間が経つにつれバリュー値が急激に大きくなる効果を示します。即ち、最初はゆっくりと動き、最後に近づくと速く動きます。

ステップ5 (いつ)：アニメーショントリガーを指定します。
これでアニメーションについての全ての情報入力が終了し、作動スイッチだけを作成ばよいです。ここでは、“回転スタート”というボタンをクリックすると作動するようにします。

“回転スタート”ボタンのクリックイベントに、以下のコーディングを追加します。

function Button00_onclick(obj:Button, e:ClickEventInfo)
{
	TransitionAnimation00.beginTransition();
	TransitionAnimation00.endTransition();
	TransitionAnimation00.run();
}

このように、スクリプト上でrun()を呼び出しアニメーションを開始させるトリガーを手動トリガーと言います。

以下は、UX-StudioでQuick Viewを実行してから“回転スタート”ボタンをクリックした時に“TOBESOFT”のロゴイメージが回転する模様です。

“回転スタート”ボタンで回転させると、 最初はゆっくりと動き、最後に近づくと速く動くことがわかります。

アニメーションの適用対象

アニメーションは、単純なコンポーネントだけでなく多様な画面要素に適用されます。以下は、その適用対象を表で表したものです。

以下は、アニメーションの適用が可能な対象です。

アニメーションの理解

前でアニメーションの概要及び使用法について簡単に言及しました。しかし、実際にアニメーション機能を自由に使用するには、もう少し多くの内容を理解しなければなりません。ここでは、より深いアニメーション機能の実装のために、事前に知っておかなければならない知識について説明します。

アニメーション用語の定義

• アニメーショントリガー

  アニメーションを開始させるきっかけを意味します。アニメーショントリガーには、手動トリガーと自動トリガーがあります。

  手動トリガーは、スクリプトで直接にコーディングしてトリガーを引きます。“5.1.2.章”で使用したrun()の呼び出しがこれに属します。

  自動トリガーは、画面の実行中に自動発生するトリガーです。自動トリガーの使用方法は、“5.4.1章”で詳細に説明します。

• アニメーションInterpolation

  Interpolationは、アニメーション効果の進行速度の変化を示す計算式です。なので開発者が直接に登録することもできますが、 XPLATFORMが提供するInterpolationを使用することを推奨します。

  XPLATFORMは、約30のinterpolationを提供します。

• アニメーションの時間と値

TimeとValue間の関係を例をあげて説明します。

先ず、以下のようにTimeとValueを設定したと仮定します。

StartTime=1000, Duration=5000, FromValue=20, ToValue=1

上記のように値を設定すると、実行結果は次のようになります。

• トリガーの発生時点から1秒(1000 milli-second)後にアニメーションが実行されます。トリガーは自動トリガーや、run()メソッドを使用した手動トリガーを使用することもできます。

• アニメーションの実行開始時点のValueは20です。

• アニメーションが実行されてから5秒後にアニメーションが終了します。

• アニメーション終了後のValueは1です。しかし、EndingMode値をFromに設定するとValueはアニメーションの終了後に20に戻ります。

• アニメーションを実行する5秒間に、Value値は20から1に変化します。値は普通 1秒に4ずつ減少しますが、EndingMode値をFromに設定すると、Value値が1になってもアニメーションの実行が終了した後のValue値は20に戻ります。

アニメーションinterpolation

Interpolationは、アニメーション進行において値の変化を示す計算式です。開発者が直接に登録することもできますが、 XPLATFORMが提供するInterpolationを使用するのをお勧めします。XPLATFORMは、約30のinterpolationを提供します。

以下はUX-Studioのアニメーションエディター画面です。

いくつかのinterpolationをグラフで説明します。この説明をお読みになれば、残りのinterpolationもグラフを見るだけでその特徴がすぐにおわかりいただけるはずです。

この他にも多くのinterpolationを提供します。全てのinterpolationがグラフを提供するので、グラフを見てinterpolationの特徴を理解することができます。

Transitionアニメーション

Transitionアニメーションとは、イメージの転換時に使用するアニメーション効果を出すアニマーションをいいます。TVでA場面からB場面に移る効果に似ています。即ち、TVの画面を変える際に、場面を回転させたりぼかし効果を与えながら他の場面に替える効果を意味します。

Transitionアニメーションのポイントとなる単語は“変化”であると言えます。従って、この効果で最も重要なことは“変化前のイメージ”と“変化後のイメージ”です。

図で表現すると以下の通りです。

変化効果には　以下ようなものがあります。

変化前後のイメージの保存及び実行

Transitionアニメーションの実装のポイントは、変化前と変化後の2つのイメージをどのように保存するのかです。その方法は非常に簡単です。

変化前のイメージは現在のイメージです。変化後のイメージは、beginTransition()関数とendTransition()関数間の保持内容です。

これを図式化すると以下の通りです。

Transitionアニメーションの例

ここでは、ImageViewerコンポーネントを使用してあるイメージから他のイメージに変換する画面を例として作成してみます。変化効果は立体キューブの回転とします。

ステップ1：アニメーションターゲットを選定します。
ImageViewerにイメージを乗せ、ボタンを1つ作成してアニメーションターゲットの準備をします。

ステップ2 (どのように)：Transitionアニメーションのオブジェクトを生成します。
メニューバーでTransitionアニメーションをクリックしてからフォームデザイン領域をクリックすると、TransitionアニメーションのオブジェクトがInvisibleオブジェクト領域に生成されます。生成と同時に、プロパティ領域にもTransitionアニメーションのプロパティを設定できる画面が開きます。

ステップ3 (どのように)：アニメーションオブジェクトの詳細設定をします。
ここでアニメーションターゲットとアニメーション効果を関連付けします。

アニメーションオブジェクトの設定値を概略的に説明すると、以下の通りです。

ステップ4 (いつ)：アニメーショントリガーを指定します。
これでアニメーションについての全ての情報入力が終了し、作動スイッチだけを生成すればよいです。ここでは、“アニメーション開始”というボタンをクリックすると作動するようにします。

“アニメーション開始”ボタンのクリックイベントに、以下のようなコーディングをします。

var imageFlag = 0;
function Button00_onclick(obj:Button, e:ClickEventInfo)
{
	TransitionAnimation00.beginTransition();
	if (imageFlag == 0)
	{
		ImageViewer00.image = "URL('Image3')";
		imageFlag = 1;
	}
	else
	{
		ImageViewer00.image = "URL('Image2')";
		imageFlag = 0;
	}
	TransitionAnimation00.endTransition();
	TransitionAnimation00.run();
}

このようにコーディングすると、ボタンをクリックするたびにimageFlag値が[0>1>0]と反転しながらImageViewer00.imageの値を続けて変化させます。そうすると、クリックするたびに3dキューブアニメーション機能が作動しながら2つのイメージが変化し続けます。

以下は、UX-StudioでQuick Viewを実行してから“アニメーション開始”ボタンをクリックした際にイメージが回転する様子です。

Transitionアニメーションのプロパティ

以下は、Transitionアニメーションのプロパティリストです。詳細はXPLATFORM Reference Guideを参照してください。

Transitionアニメーションのメソッド

以下は、Transitionアニメーションのメソッドリストです。詳細は、 XPLATFORM Reference Guideを参照してください。

プロパティアニメーション

プロパティアニメーションとは、アニメーションターゲットのプロパティ値をリアルタイムに変化させながらアニメーション効果を出すアニメーションをいいます。例えばプロパティ値のx、y座標のプロパティ値にプロパティアニメーションを適用すると、該当のアニメーションターゲットが動く効果を得られます。

ここで注意すべき点は、アニメーションを適用するプロパティ値が開始値、中間値、終了値を持たなければなりません。即ち、テキストやブール型タイプのように開始値、中間値、終了値の概念が曖昧なプロパティは、プロパティアニメーションの対象にはなりません。

Transitionアニメーションとプロパティアニメーションの違い

Transitionアニメーションは、2つのイメージを写真で保管した状態でその2つのイメージを交換する効果を与えます。

プロパティアニメーションは、2つのイメージを使用せずに1つのイメージのみを使用します。プロパティアニメーションターゲットのプロパティ値を変更しながら画面にリアルタイムで反映し、アニメーション効果を与えます。

注意すべき点は、Transitionアニメーションとプロパティアニメーションは相伴う概念ではないという点です。2つのアニメーションは、互いに異なる観点でアニメーション効果を提供します。例をあげると、あるイメージを回転させたい時にはTransitionアニメーションを使用し、そのイメージを移動させたい時にはプロパティアニメーションを使用します。例えば、イメージを回転しながら移動させたい時には、2つのアニメーションを組み合わせたコンポジットアニメーションを使用します。

プロパティアニメーションの例

ここでは、ボタン2つと形状1つを利用してプロパティアニメーションの例題を作成します。

この例題は以下の機能を持たせます。

• ボタンの上にマウスを置くとボタンが長くなります。

• ボタンの上のマウスが他の所に移動すると、ボタンの長さが元に戻ります。

• 上のボタンをクリックすると、右側のボールが落ちます。

• 下のボタンをクリックすると、右側のボールが元の位置に戻ります。

この例題を作成するためには、以下の事項を考慮しなければなりません。

• アニメーションターゲットは3つです。

  buttonコンポーネント2つ、shapeコンポーネント1つの合計3つです。

• 合計6つのプロパティアニメーションのオブジェクトが必要です。

  2つのbuttonコンポーネントの長さが長くなる効果を出すアニメーション2つ。

  2つのbuttonコンポーネントの長さが短くなる効果を出すアニメーション2つ。

  shapeが落ちる移動効果を出すアニメーション1つ。

  shapeが元の位置に戻る移動効果を出すアニメーション1つ。

• しかし、実際のアニメーションオブジェクトは3つのみ使用します。

  buttonコンポーネントの長さが伸び縮みする効果に対するアニメーション1つ。

  shapeが落ちる移動効果に対するアニメーション1つ。

  shapeが元の位置に戻る移動効果に対するアニメーション1つ。

  即ち、1つのアニメーションオブジェクトをいくつかのアニメーションターゲットに使用することができます。

ステップ1：アニメーションターゲットを選定します。
ボタンコンポーネント2つ、シェープコンポーネント1つを準備します。
そして、ボックス内の説明のようにコンポーネントのプロパティ値を設定しました。

ステップ2 (どのように)：プロパティアニメーションのオブジェクトを生成します。
プロパティアニメーションのオブジェクトを2つ生成します。合計3つの内の2つは静的に、残りの1つは動的に生成します。そして、ボックス内の説明のようにアニメーションオブジェクトのプロパティ値を設定しました。

• PropertyAnimation00は、buttonの長さを調節するために使用します。

• PropertyAnimation01は、玉型のshapeを落とすために使用します。

• PropertyAnimation02は、玉型のshapeを元の位置に戻すために使用し、5段階で動的に生成します。

ステップ3 (いつ/どのように)：2つのボタンに対するイベントをコーディングします。
ここでは、2つのボタンの上にマウスを置くとボタンの長さが長くなる効果を実装します。
2つのボタンコンポーネントを同時にドラッグしてから、onmouseenterとonmouseleaveイベントを登録します。

上のようにコンポーネントを一緒に選択してからイベント登録すると、選択されたコンポーネントで発生したイベントを1つのイベントファンクションで処理することができます。

イベントファンクションのコーディングは、以下のように登録します。

// *******************************************************************
// マウスが該当コンポーネントの上に置かれると、プロパティアニメーションを利用
// して該当コンポーネントのwidthを伸ばします。
// *******************************************************************
function Button_onmouseenter(obj:Button, e:MouseEventInfo)
{
	PropertyAnimation00.targetcomp = obj.name
	PropertyAnimation00.tovalue = 150;
	PropertyAnimation00.run();
}

// *******************************************************************
// マウスが該当コンポーネントから他の所に移動すると、プロパティアニメーション
// を利用して該当コンポーネントのwidthを縮めます。
// *******************************************************************
function Button_onmouseleave(obj:Button, e:MouseEventInfo)
{
	PropertyAnimation00.targetcomp = obj.name;
	PropertyAnimation00.tovalue = 100;
	PropertyAnimation00.run();
}

ステップ4 (いつ)：ボタンをクリックするとボールが落ちる効果を関連付けします。
Button00(ボールを落とすボタン)のイベントトリガーのプロパティであるclickeffectプロパティにPropertyAnimation01を関連付けしてButton00をクリックすると、PropertyAnimation01が作動するようにします。

Button01(ボールを元の位置に戻すボタン)もイベントトリガープロパティを利用することができますが、ここではもう少し多様な使用例をあげるために一般のイベント処理を行います。詳細な例は5段階を参照してください。

5段階(いつ/どのように)：ボタンをクリックするとボールを元の位置に戻すようにアニメーションを関連付けし実行するコーディングをします。
Button01(ボールを元の位置に戻すボタン)もイベントトリガープロパティを利用することができますが、ここではもう少し多様な使用例をあげるために一般のイベント処理を行います。

先ず、Button01のonclickイベントをイベント関数に割り当てます。

イベント関数のコーディングは、以下のように登録します。

// *******************************************************************
// Button01をクリックした時に動的にプロパティアニメーションのオブジェクトを
// 生成し、該当のアニメーションオブジェクトの詳細設定を行ってから作動させます。
// PropertyAnimation01により他の位置に移された玉を
// もう1度元の位置に戻すようコーディングします。
// *******************************************************************
function Button01_onclick(obj:Button, e:ClickEventInfo)
{
	PropertyAnimation02 = new PropertyAnimation(); // プロパティアニメーションの生成
	PropertyAnimation02.duration = 500; // 0.5秒間作動
	PropertyAnimation02.interpolation = Interpolation.linear; // linear効果
	PropertyAnimation02.targetcomp = Shape00; // アニメーションターゲットを玉型の形状にする
	PropertyAnimation02.targetprop = "position.y"; // y軸の移動
	PropertyAnimation02.endingmode = "to";
	PropertyAnimation02.starttime = 0;
	PropertyAnimation02.tovalue = 30; // y軸の値が30ならば元の位置です
	PropertyAnimation02.run(); // アニメーションの実行
}

以下は、UX-StudioでQuick Viewを実行した後の画面です。

ここでマウスカーソルをボタンの上に置くとボタンの長さが長くなり、ボタンの上から他の位置に移動するとボタンの長さが元の長さに戻ります。実行画面は以下の通りです。

ここで“落とす”ボタンをクリックすると、右側の赤いボールが下に落ちます。実行画面は以下の通りです。

次に“戻す”ボタンをクリックすると、右側の赤いボールが元の位置に戻ります。実行画面は以下の通りです。

プロパティアニメーションのプロパティ

以下は、プロパティアニメーションのプロパティリストです。詳細はXPLATFORM Reference Guideを参照してください。

プロパティアニメーションのメソッド

以下は、プロパティアニメーションのメソッドリストです。詳細はXPLATFORM Reference Guideを参照してください。

コンポジットアニメーション

コンポジットアニメーションは、プロパティアニメーションとTransitionアニメーションが組み合わされたアニメーションです。従って、プロパティアニメーションとTransitionアニメーションを合わせて実行しても似たような効果を得ることができます。しかし、別々に実行する場合には同時にトリガーすることができないため、微妙に開始時間に差が生じ、複合されたアニメーション効果を同期化させることができません。

以下の図は、4つのアニメーションを1つのコンポジットアニメーションに登録した内容を図式化したものです。

上の図のコンポジットアニメーションを実行する場合には4つのアニメーションが作動し、その内容は以下のようになります。

• Transitionアニメーション1が終了した後にTransitionアニメーション2が開始されます。

• プロパティアニメーション1、プロパティアニメーション2、Transitionアニメーション1が同時に開始します。

• プロパティアニメーション1が終了してもプロパティアニメーション2は1秒間実行し続けます。

• コンポジットアニメーションは開始後に2秒間作動します。

コンポジットアニメーションの例

ここでは、大砲を撃って目標に落ちると爆発するコンポジットアニメーションを例題として作成してみます。

この例題は以下の機能を持ちます。

• 発射ボタンをクリックすると大砲が砲弾を発射します。

• 砲弾は3秒間弾道線を描いて飛び、目標に落ちます。

• 砲弾が目標に落ちると爆発します。

ステップ1：アニメーションターゲットを選定します。
Buttonコンポーネント1つとShapeコンポーネントで大砲と砲弾を描画します。
GraphicPathコンポーネントで地面と爆発の様子を描画します。

上の図で、赤色のボックス内に表示したコンポーネントがアニメーションと関連のあるコンポーネントです。ここでは、イメージではなくGraphicPathやShapeコンポーネントで全ての画面要素を構成しましたが、必要に応じてはイメージ処理しても差し支えありません。

ステップ2 (どのように)：コンポジットアニメーションのオブジェクトを生成します。
コンポジットアニメーションのオブジェクト1つを生成します。

コンポジットアニメーションはアニメーションエディターがなくては編集が難しいですので、コンポジットアニメーションを生成した後にアニメーションエディターを開いてください。

ステップ3 (どのように)：コンポジットアニメーションのオブジェクトにいくつかのアニメーションを登録します。
ここでは5つのアニメーションを登録しました。

“+”ボタンで登録する際には、“Transitionアニメーション”と“プロパティアニメーション”中の1つを選択しなければなりません。ここでは2つのTransitionアニメーションと3つのプロパティアニメーションを登録します。

ステップ4 (どのように)：登録した5つのアニメーションの詳細情報を入力します。
ここでは5つのアニメーションを登録しました。
以の図はアニメーションエディターの画面です。

コンポジットアニメーションは、id以外にいかなる値も設定しません。それは、コンポジットアニメーションのプロパティ値はアニメーション効果に影響を与えず、登録されたアニメーションのプロパティ値を設定しない時に使用するデフォルト値であるからです。

従って、ここではコンポジットアニメーションのプロパティ値を設定する必要がありません。

5つの登録されたアニメーションのプロパティ値は以下の通りです。

1. TransitionAnimation00の設定値 (砲弾の回転)

   砲弾が飛びながら1回転する効果を与えます。

2. PropertyAnimation00の設定値(砲弾をx軸に移動)

   砲弾をx軸の値である400 pixelほど移動します。これにより砲弾が左側から右側に3秒間移動します。

3. PropertyAnimation01の設定値(砲弾をy軸移動-上に上げる)

   砲弾をy軸の値である-150 pixelほど移動します。これにより砲弾が1.5秒間最高点まで上がります。

4. PropertyAnimation02の設定値(砲弾をy軸移動-下に落ちる)

   砲弾をy軸の値である150 pixelほど移動します。これにより砲弾が1.5秒間で最高点から最低点に落ちます。

5. TransitionAnimation01の設定値(爆発する様子を描画)

   爆発する様子であるGraphicPath01のコンポーネントをvisible=falseからvisible=trueに状態を変化させ、フェード効果により描画します。

ステップ5 (いつ)：発射ボタンをクリックすると大砲を発射するようにします。
発射ボタンのonclickイベントファンクションに以下のように入力します。

function Button00_onclick(obj:Button, e:ClickEventInfo)
{
	Shape00.position.x = 59; // 砲弾を発射位置に移す
	Shape00.position.y = 196; // 砲弾を発射位置に移す
	Shape00.visible = true; // 砲弾を表示
	CompositeAnimation00.run(); // 砲弾の発射
}

以下は、UX-StudioでQuick Viewを実行した後の画面です。

コンポジットアニメーションのプロパティ

以下は、コンポジットアニメーションのプロパティリストです。詳細XPLATFORM Reference Guideを参照してください。

コンポジットアニメーションのメソッド

以下は、コンポジットアニメーションのメソッドリストです。詳細な内容はXPLATFORM Reference Guideを参照してください。

高度なアニメーション機能の使用

アニメーション機能は、その応用方法により多様・多角に使用することができます。ここではいくつかの追加的な使用方法を説明します。

自動トリガーの使用

スクリプトでrun()を呼び出し、手動でアニメーションを開始するものを手動トリガーと言います。自動トリガーはこれらのスクリプトのコーディングをせずに、自動でアニメーションを開始させるトリガーです。

以下は自動トリガーのリストです。

ここでは、このトリガーの中からMouseEnterを例にあげて説明します。MouseEnterトリガーは、マウスが特定コンポーネントの領域内に進入した時に発生するトリガーです。

ステップ1 (どのように)：アニメーションオブジェクトを生成し、アニメーションの種類を選定します。
アニメーションの種類を選択する方法は、“Transitionアニメーションの例”の2段階と同じです。手動トリガーはアニメーションターゲットを先に生成しますが、自動トリガーはアニメーションオブジェクトを先に生成します。

下の図を見ると、手動トリガーと違って自動トリガーはアニメーションターゲットがアニメーションオブジェクト情報を持たなければならないため、アニメーションオブジェクトを先に生成しなければなりません。

詳細な説明は段階を追って説明します。

以下は生成の例です。

ステップ1 (どのように/どれだけ)：アニメーションオブジェクトを生成し詳細値を設定します。

targetcomp値を設定しないのは、アニメーション効果の適用を受けるアニメーションターゲットがまだ決定されていないからです。

ステップ2 (何を)：回転対象を選定し、どんな場合に回転するのかを決定します。
“TOBESOFT”のロゴを出力するImageViewer00コンポーネントの領域の中にマウスが進入した時に回転するよう、アニメーションオブジェクトを関連付けします。

上の画面を見ると、アニメーションターゲットであるImageViewer00のmouseentereffectのプロパティ値にTransitionAnimation00を関連付けしていることがわかります。

User Interpolationの作成

XPLATFORMが提供するinterpolation以外に、開発者は直接にinterpolationを開発することができます。Interpolation関数を作成し、アニメーションのinterpolationプロパティに登録するだけでよいです。

以下はinterpolation関数の内容です。

function useInterpolation(info)
{
	var d = info.duration;
	var t = info.progresstime;
	info.progressvalue = t/d;
}

• 関数名は自由に入力します。

• 関数の引数であるinfoオブジェクトは、3つのプロパティを持ちます。

• 計算された結果値をinfo.progressvalueに割り当てます。

  参考に、ここで使用した式は“Interpolation.linear”と同じ効果を持ちます。

開発者が直接に開発したUser Interpolationは、該当アニメーションのInterpolationに登録します。以下は、アニメーションプロパティ画面でUser Interpolationを入力した内容です。

これからInterpolationを使用してアニメーション効果を変えてみます。

以下は、ボタンをクリックした時に、ボタンが左側から右側に移動するアニメーションを設定した画面です。ここでは、アニメーショントリガーについては言及しません。

プロパティアニメーションのオブジェクトの主要設定値は、以下の通りです。

この例題を実行させると、ボタンをクリックするとボタンが左側から右側に1度だけ移動します。これを2度往復移動し、最終には元の位置に戻るようにします。

この場合、2度往復するためのinterpolationはXPLATFORMでは提供しません。以下のようにinterpolation関数を定義します。

function useInterpolation(info)
{
	var d = info.duration;
	var t = info.progresstime;
	var kk = 4*t/d;
	if (kk<1)
		info.progressvalue = kk; // 0~1秒間に0から1に増加させます。 
	else if (kk<2)
		info.progressvalue = 2-kk; // 1~2秒間に1から0に減少させます。
	else if (kk<3)
		info.progressvalue = kk-2; // 2~3秒間に0から1に増加させます。
	else
		info.progressvalue = 4-kk; // 3~4秒間に1から0に減少させます。
}

この関数は、“0>1>0>1>0”でinfo.progressvalue値を変化させます。この関数を上のプロパティアニメーションのinterpolationプロパティに適用させると、ボタンが4秒間に2度往復移動するようになります。

その他のアニメーションの適用

その他にもフレーム、フォーム、ウィジェットにアニメーションを適用することができます。

ここでは、簡単にアニメーションの適用方法のみを説明します。

• フレームアニメーションの適用方法

• フォームアニメーションの適用方法