読者です 読者をやめる 読者になる 読者になる

tmytのらくがき

個人の日記レベルです

ページ遷移のアニメーション

WP7ってシステムがみんなアニメーションだらけでけまいですよね。なのに2010/08/31現在のSDKではページ遷移のトランジションが提供されていないわけでひどいはなしです。もうすぐFinalのSDKがリリースされるのでそのときにはデフォルトトランジションとかついてることを期待しつつ...
とりあえず現時点でできることは自分でトランジションを書かないとなのでとりあえず書いてみましょうか。

Blendでてきとーにアニメーションを書きます。別になんでもいいです、スライドでもいいし、システム似合わせた感じでぺろりんってのでもいいし。
このへんぽちぽちして

こんなかんじでアニメーションを。とりあえずシステムのぺろりんってやつ風味。

<Storyboard x:Name="Showing">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="phoneApplicationPage">
		<EasingDoubleKeyFrame KeyTime="0" Value="-110">
			<EasingDoubleKeyFrame.EasingFunction>
				<ExponentialEase EasingMode="EaseIn"/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
		<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="0"/>
	</DoubleAnimationUsingKeyFrames>
</Storyboard>

同じ感じで、Exitのアニメーションも。

<Storyboard x:Name="Reaving">
	<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)" Storyboard.TargetName="phoneApplicationPage">
		<EasingDoubleKeyFrame KeyTime="0" Value="0">
			<EasingDoubleKeyFrame.EasingFunction>
				<ExponentialEase EasingMode="EaseOut"/>
			</EasingDoubleKeyFrame.EasingFunction>
		</EasingDoubleKeyFrame>
		<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="110"/>
	</DoubleAnimationUsingKeyFrames>
</Storyboard>

これでアニメーションができましたね、Blendでやるととってもお手軽。

んでもってアニメーションさせないといけないわけですが、MSDNによるとOnNavigatedToとOnNavigatingFromをオーバーライドするといい感じみたいな雰囲気。
オーバーライドするとこんな感じ。

override protected void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
	Reaving.Stop();
	Reaving.Completed += (sender, ev)=>{
		base.OnNavigatingFrom(e);
	};
	Reaving.Begin();
}

override protected void OnNavigatedTo(NavigationEventArgs e)
{
	Showing.Stop();
	Reaving.Completed += (sender, ev)=>{
		base.OnNavigatedTo(e);
	};
	Showing.Begin();
}

ページ遷移アニメーションってこんだけのことで実現できるのでFinalのSDKでもこれぐらい自分で作れや。って言われそうですね...