1

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

起初，我尝试了DoubleAnimation属性Margin.Left，但在搞砸了一些例外，并在谷歌上搜索了一下，我发现我无法为“非依赖属性”设置动画。（这实际上是有道理的）

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

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

4

2 回答 2

2

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

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

于 2013-10-03T09:33:27.180 回答
1

正如 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 再次允许元素上发生更多事情（旋转等）

于 2013-10-03T10:27:11.190 回答