windows-phone-7 - 如何使用故事板

Question

我希望停止使用 DispatcherTimer 来显示动画，因为这是非常不可预测的。相反，我想开始使用 Storyboard，因为这显然是动画控件的最佳和最有效的方式。

我曾尝试搜索教程，但不幸的是，我还没有偶然发现一个。

谁能告诉我从哪里开始？例如，“在屏幕上移动图像”，然后“在旋转图像的同时同时移动许多图像”。

Answer 1

有很多关于 windows phone 7 中 Storyboard 动画的信息。这里有几个链接：

http://msdn.microsoft.com/en-us/library/system.windows.media.animation.storyboard(v=vs.95).aspx

http://www.silverlight.net/learn/creating-ui/animation-and-easing/animations-(silverlight-quickstart )

这是一些帮助您入门的代码

这将为一个简单的矩形设置动画，在屏幕上来回移动它。

<phone:PhoneApplicationPage 
    x:Class="PhoneApp1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Rectangle x:Name="rect" Height="25" Width="25" Fill="Red" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Rectangle.RenderTransform>
                    <TranslateTransform x:Name="transform" />
                </Rectangle.RenderTransform>
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetName="transform"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" Duration="0:0:1" AutoReverse="True" RepeatBehavior="Forever" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>
            </Rectangle>
        </Grid>
    </Grid>


</phone:PhoneApplicationPage>