xaml - 有没有办法在 Metro 风格的应用程序中为 Margin 属性设置动画

Question

我正在尝试使用 Storyboard 类从代码中制作一些动画。没有 ThicknessAnimation 类。而且我还尝试使用 Blend 构建 Storyboard，但它在那里不起作用。它只是直接跳转到新值，没有流畅的动画。

更新:我尝试使用 TranslateX 转换。但是当我在图像上使用它时，图像会被剪裁。
我想要做的是在小网格内以非常慢的速度为大图像设置动画，因此它具有这种效果(类似于 Zune 和 Windows Phone 画廊中的效果)。图像打开后，我开始动画，这是我的代码:

private void Image_ImageOpened_1(object sender, RoutedEventArgs e)
    {
        var img = sender as Image;

        Storyboard sb = new Storyboard();
        var doubleAnimationx = new DoubleAnimation() { To = -100, SpeedRatio = 0.1, From = 0 };
        Storyboard.SetTarget(doubleAnimationx, img);
        Storyboard.SetTargetProperty(doubleAnimationx, "(UIElement.RenderTransform).(CompositeTransform.TranslateX)");
        sb.Children.Add(doubleAnimationx);
        sb.Begin();
    }

Xml:

<Grid  IsSwipeEnabled="True" ItemsSource="{Binding Source={StaticResource cvs1}}" ItemClick="ItemsGridView_ItemClick_1"
                            x:Name="ItemsGridView" Margin="50,20,116,46" SelectionMode="None" IsItemClickEnabled="True"
                            AutomationProperties.AutomationId="ItemsGridView" 
                            AutomationProperties.Name="Grouped Items">
                <Grid.ItemTemplate>
                    <DataTemplate>
                        <Grid Height="250" VariableSizedWrapGrid.ColumnSpan="{Binding ColumnSpan}" Margin="2">
                            <Image ImageOpened="Image_ImageOpened_1" Stretch="UniformToFill" Source="{Binding ImageHQ}" >
                                <Image.RenderTransform>
                                    <CompositeTransform />
                                </Image.RenderTransform>
                            </Image>
                            <StackPanel VerticalAlignment="Bottom" Background="#AA000000">
                                <TextBlock Margin="5,5,5,0" FontSize="26" Text="{Binding Name,Mode=OneWay}" FontFamily="Arial Black" />
                                <TextBlock Margin="5,0,5,5" FontSize="24" Text="{Binding Section,Mode=OneWay}" Foreground="{Binding SectionColor,Mode=OneWay}" />
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </Grid.ItemTemplate>
</Grid>

Answer 1

首先，动画边缘不是一个好主意(它需要更新整个树)。你想达到什么样的效果？你想移动对象吗？如果是，请使用 DoubleAnimation 更改 TranslateTransform。

我还没有在 Windows 8 中这样做过，但我敢打赌，这与 WPF 中的几乎相同。最好在 XAML 中定义动画

<Window.Resources>

    <Storyboard  x:Key="mainInAnimation">
        <DoubleAnimation Storyboard.TargetName="panelTrans" 
                                Storyboard.TargetProperty="X"
                                BeginTime="0:0:0.2"
                                Duration="0:0:0.3" To="0" >
            <DoubleAnimation.EasingFunction>
                <ExponentialEase  EasingMode="EaseOut"  />
            </DoubleAnimation.EasingFunction>
        </DoubleAnimation>
    </Storyboard>

然后你需要渲染变换到面板

    <StackPanel Name="leftPanel"  ... >
        <StackPanel.RenderTransform>
            <TranslateTransform x:Name="panelTrans" X="-10"></TranslateTransform>
        </StackPanel.RenderTransform>

在代码中开始动画(我更喜欢这种方式)

        Storyboard anim = (Storyboard)this.Resources["mainInAnimation"];
        anim.Begin();