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>

如何使用故事板

1 个答案: