終了アニメーションの応用♪
#wp7dev_jp
さて、どんな効果になるでしょう? の応用です。(アニメーションも改良しています)
このアニメーションは使える場面が限られるので、やっぱりアプリケーション終了時に使いたいところです。(まぁ、直球でMediaElement や VisualBrushに使ってみるのもありですが)
終了アニメーションの設定方法
ただ、終了時にそのままアニメーションを行ってもデフォルトの(ドアが開く感じの)アニメーションにかぶります。なので、
- 終了のために戻るボタンを押したら(protected override void OnBackKeyPress)
- まずは、正規の終了処理をキャンセルして(e.Cancel = true)
- 今回作った TVOff アニメーション開始(TVOff.Begin() )
- そしてアニメーション終了後(TVOff.Completed ) に
- アプリを強制終了(throw new App.QuitException() )
こうして、終了時のアニメーションと終了処理を行っています。なお、今回のアニメーションは背景は黒でもOK。画面を閉じながら背景を白にアニメーションしているので、光るような効果を作ることができました。
こういうのをBehaviorにしてやるといいんだろうね。
ソースコード
参照の追加:特になし
MainPage.xaml
<phone:PhoneApplicationPage
xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
x:Class="WindowsPhoneApplication27.MainPage"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="TVOff">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0.001">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.001"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="0.35">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0.35"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="LayoutRoot">
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="White"/>
<EasingColorKeyFrame KeyTime="0:0:0.6" Value="Black"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<!--LayoutRoot は、すべてのページ コンテンツが配置されるルート グリッドです-->
<Grid x:Name="LayoutRoot">
<Grid.RenderTransformOrigin>
<Point Y="0.5" X="0.5"/>
</Grid.RenderTransformOrigin>
<Grid.RenderTransform>
<CompositeTransform/>
</Grid.RenderTransform>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
:
App.xaml.cs
public partial class App : Application
{
:
public class QuitException : Exception { }
// ハンドルされていない例外に対して実行されるコード
private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e)
{
if (e.ExceptionObject is QuitException)
return;
if (System.Diagnostics.Debugger.IsAttached)
{
// ハンドルされていない例外が発生しました; 中断してデバッガーを起動します
System.Diagnostics.Debugger.Break();
}
}
MainPage.xaml.cs
public partial class MainPage : PhoneApplicationPage
{
public MainPage()
{
InitializeComponent();
}
protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
{
e.Cancel = true;
TVOff.Completed += new EventHandler(Storyboard1_Completed);
TVOff.Begin();
}
void Storyboard1_Completed(object sender, EventArgs e)
{
throw new App.QuitException();
}
}
WMAppManifest.xml これはやらなくてもいいけどね
<?xml version="1.0" encoding="utf-8"?>
<Deployment xmlns="https://schemas.microsoft.com/windowsphone/2009/deployment" AppPlatformVersion="7.1">
<App BitsPerPixel="32" xmlns="" ProductID="{d0bea28c-661d-44f1-ab8a-91c34b04e54e}" Title="WindowsPhoneApplication27" ...
<IconPath IsRelative="true" IsResource="false">ApplicationIcon.png</IconPath>
<Capabilities>