終了アニメーションの応用♪

#wp7dev_jp

さて、どんな効果になるでしょう? の応用です。(アニメーションも改良しています)

このアニメーションは使える場面が限られるので、やっぱりアプリケーション終了時に使いたいところです。(まぁ、直球でMediaElement や VisualBrushに使ってみるのもありですが)

終了アニメーションの設定方法

ただ、終了時にそのままアニメーションを行ってもデフォルトの(ドアが開く感じの)アニメーションにかぶります。なので、

  1. 終了のために戻るボタンを押したら(protected override void OnBackKeyPress)
  2. まずは、正規の終了処理をキャンセルして(e.Cancel = true)
  3. 今回作った TVOff アニメーション開始(TVOff.Begin() )
  4. そしてアニメーション終了後(TVOff.Completed ) に
  5. アプリを強制終了(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>

TVOff_Sample.xap