在Metro风格应用中，有没有一种方法可以使Margin属性动画化？

Question

我正在尝试使用Storyboard类从代码中进行一些动画操作。但是发现没有ThicknessAnimation类可用，我还尝试使用Blend来构建Storyboard，但是效果不佳。动画会直接跳转到新值，没有流畅的动画效果。

更新：我尝试使用TranslateX变换。但是当我将其用于图像时，图像被裁剪了。 我的目标是在小网格内缓慢地对大图像进行动画处理，以产生这种效果（类似于Zune和Windows Phone Gallery内部的效果）。图像打开后，我开始动画，这是我的代码：

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();
    }

Xaml：

<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>

- Ateik

Answer 1

首先，动画化margin不是一个好主意（这将需要更新整个树）。你想要实现什么样的效果？你想要移动对象吗？如果是，请使用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();

- Lukasz Madon

---

请再次检查我的问题，我添加了一些细节。谢谢 :) - Ateik

@user836252为什么不把那个图像放在一个StackPanel里面，然后移动这个面板呢？ - Lukasz Madon

仍然，图像被裁剪了。 :( - Ateik

如果我想把一个物体向上移动，并且所有在它下面的物体也随之向上移动呢？我应该同时对所有物体进行动画处理吗？ - Jakub Wisniewski

Answer 2

我今天遇到了完全相同的问题。为了解决它，我做了以下操作：

我的Storyboard首先将边距重置为我想要的值，并通过设置TranslateTransform来抵消它。这样可以达到没有效果的效果，但现在我可以在TranslateTransform中实现我的动画并显示图像。

<Storyboard x:Name="rotateViews">
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="root">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Thickness>0,-100,0,0</Thickness>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="root">
        <EasingDoubleKeyFrame KeyTime="0" Value="100"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.7" Value="0">
            <EasingDoubleKeyFrame.EasingFunction>
                <CubicEase EasingMode="EaseInOut"/>
            </EasingDoubleKeyFrame.EasingFunction>
        </EasingDoubleKeyFrame>
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

- Kelps Sousa Alux

---

这个动画有卡顿。在Windows Phone上直接动画化Margin没有任何办法吗？ - Karthik Nishanth