さて、どんな効果になるでしょう？

Article
12/07/2011

#wp7dev_jp

さて、以下のコードを追加するといったいどんな効果ができるでしょう？答えは自分でコンパイル実行。Blendでアニメーション解析するとわかりやすい。2秒以降のアニメーションは繰り返し実行するためのもの。

参照の追加：System.Windows.Interactivity、 Microsoft.Expression.Interactions

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"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:eim="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
x:Class="WindowsPhoneApplication27.MainPage"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="Storyboard1">
        <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"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.001"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="1"/>
        </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"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.35"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="1"/>
        </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"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2.1" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

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>

さて、どんな効果になるでしょう？

Additional resources