Mango Jump Start 抜粋：Expression Blend でアニメーションを作成する

Jump Start (04)より抜粋

Expression Blend を利用してカードが回転するアニメーションを作ります。

まずにカードの表と裏の画像を用意し、ソリューションに追加します。

Expression Blend 上でまず裏面画像をメインページにドラッグ&ドロップします（マージンはすべて50に設定します）。

追加した裏面画像のアニメーションを指定していきます。[オブジェクトとタイムライン]からストーリーボードの[新規作成]をクリックします。

名前を指定してストーリーボードを作成します（FlipFromBackStoryboard）

タイムラインが開きます。追加した裏面画像（image）が選択されていることを確認して[キーフレームの記録]（
米粒のようなアイコン）をクリックします。裏面画像の0秒の位置にキームレームが作成されます。

タイムラインの目盛上の矢印をドラッグし0秒から1秒に移動させ、再び[キーフレームの記録]をクリックします。

裏面画像（image）のプロパティタブの[変換]セクションにおいてProjectionのY軸の値を-90に設定します。

Expression Blend のアニメーションは各オブジェクトのキーフレームにおけるオブジェクトのプロパティの変化をタイムラインにしたがって表現します。今回の例の場合、最初に作成したキーフレームと2番目に作成したキーフレームの裏面画像のプロパティの差はProjectionのY軸の値です（0→-90）。よってアニメーションではタイムラインに設定されている通り、1秒かけて裏面画像のProjectionのY軸の値を0から-90に変更してくれます。実際に再生ボタンを押すと画像が半回転するアニメーションを確認できます。

既定の設定ではタイムライン上でのプロパティ値の変更は均等に行われますが、このタイミングを変更することができます。実際にカードの回転を最初はゆっくり、あとから徐々に早くに変更してみます。

タイムライン上で2つ目に作成したキーフレーム（米粒）をクリックします。キーフレームのプロパティでイージングを[なし]から[Exponential In]に変更します。再度タイムラインを再生すると回転速度が変わったのが確認できます。

では残りのアニメーションも作っていきます。一度ストーリーボードを閉じます。

表面画像をメインページにドラッグ&ドロップします。プロパティでマージンをすべて50に設定し、[変換]セクションにおいてProjectionのY軸の値を90に設定します（表画像が回転し見えなくなります）。

ストーリーボード（FlipFromBackStoryboard）を開きます。

タイムラインの矢印が0秒にあることを確認して[キーフレームの記録]をクリックし、表面画像（image1）のプロパティタブの[変換]セクションにおいてProjectionのY軸の値を90に設定します（※すでに90になっていますが再入力してください）。タイムラインの矢印を1秒まで移動させ再び[キーフレームの記録]をクリックし、ProjectionのY軸の値を90に設定します（※すでに90になっていますが再入力してください）。これで0秒から1秒までのあいだ表画像はProjectionのY軸の値が90を維持します。

タイムラインの2秒の上に作成された米粒（キーフレーム）をクリックし、キーフレームのプロパティでイージングを[なし]から[Exponential Out]に変更します。これでアニメーションの設定は完了です。

表画像のキーフレームの設定で90の再入力の部分は無駄に見えますがこれを行わないと自分の環境ではKeyTime="0"のキーフレームが定義されませんでした。なにはともあれMainPage.xamlでストーリーボードが以下のように記述されていればOKです。

<Storyboard x:Name="FlipFromBackStoryboard">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
		<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-90">
			<EasingDoubleKeyFrame.EasingFunction>
				<ExponentialEase EasingMode="EaseIn"/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image1">
		<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
			<EasingDoubleKeyFrame.EasingFunction>
				<ExponentialEase EasingMode="EaseOut"/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
</Storyboard>

最後にアニメーションの実行設定です。裏面画像（image）のプロパティタブをイベントに切り替え[Tap]をダブルクリックします。

イベントハンドラ内でストーリーボード（FlipFromBackStoryboard）を開始します。

{
    // TODO: ここにイベント ハンドラーのコードを追加します。
    this.FlipFromBackStoryboard.Begin();
}

デバッグ実行をさせ裏面画像をタップすると画像がくるりと回転します。カードをぐるぐるさせたい場合は、新しいストーリーボードを作成し、上の手順の裏画像と表画像を置き換えたタイムラインを作成します。表画像のProjectionのY軸の値は：0（0秒）→-90（1秒）となり、裏画像のProjectionのY軸の値は：90（0秒）→90（1秒）→0（2秒）となります。以下はその設定とxamlです。

<Storyboard x:Name="FlipFromFrontStoryboard">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image1">
		<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="-90">
			<EasingDoubleKeyFrame.EasingFunction>
				<ExponentialEase EasingMode="EaseIn"/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="image">
		<EasingDoubleKeyFrame KeyTime="0" Value="90"/>
		<EasingDoubleKeyFrame KeyTime="0:0:1" Value="90"/>
		<EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
			<EasingDoubleKeyFrame.EasingFunction>
				<ExponentialEase EasingMode="EaseOut"/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
	</DoubleAnimationUsingKeyFrames>
</Storyboard>