Question

我正在尝试创建一个Win8应用程序，我现在面临的一个问题是为Margin属性设置动画。

首先，我在DoubleAnimation属性上尝试了Margin.Left，但在搞了一些例外和谷歌搜索之后，我发现我无法动画“非DependencyProperty” 。（这实际上很有意义）

所以，我发现实际上可以设置margin属性的唯一方法是使用ObjectAnimationUsingKeyFrames对象，但这只是一个对象的逐帧状态。它不会制作任何动画，只需在画布上重新定位我的椭圆。

所以我的问题;我以某种方式在Margin属性上创建一个漂亮而干净的动画，而不添加一堆具有不同值的DiscreteObjectKeyFrame个对象？

Answer 1

您可以为Canvas.Left / Canvas.Top设置动画或使用RenderTransform设置动画并设置TranslateX / TranslateY属性的动画，而不是尝试设置边距动画以重新定位画布中的椭圆。

我个人会推荐第二个选项（使用RenderTransform），因为这实际上创建了所谓的“独立动画”，它将以更高的效率运行。

Answer 2

正如Nigel所提到的，这通常是通过动画CompsiteTransform或TranslateTransform的TranslateX或TranslateY属性来实现的，如下所示。

<Storyboard x:Name="ShowThatFunkyEllipse">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="MyMovingElement">
        <EasingDoubleKeyFrame KeyTime="0" Value="-350"/>
        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0" />
    </DoubleAnimationUsingKeyFrames>
</Storyboard>

... snip ...

<Ellipse x:Name="MyMovingElement">
    <Ellipse.RenderTransform>
        <CompositeTransform TranslateX="-350" />
    </Ellipse.RenderTransform>
</Ellipse>

请注意，我在此示例中使用了DoubleAnimationUsingKeyframes - 如果您的动画是非线性的，它会提供更大的灵活性，但如果您愿意，可以使用简单的DoubleAnimation。此外，如果您愿意，可以将CompositeTransform切换为TranslateTransform。我倾向于使用CompositeTransform再次允许在元素上发生更多（旋转等）

C＃Windows 8 / Modern UI - 动画保证金属性

2 个答案: