Windows Phone 8.1 中的画布移动动画

Posted 2023-04-13

【中文标题】Windows Phone 8.1 中的画布移动动画

【英文标题】：Canvas moving animation in Windows Phone 8.1

【发布时间】：2017-06-14 14:21:54

【问题描述】：

我无法解决在 windows phone 8.1 中画布平滑移出屏幕边框的问题，尽管 Opacity 属性发生了很好的变化。

<Storyboard x:Name="moveOut">
   <DoubleAnimation
        Storyboard.TargetProperty="Opacity"
        Storyboard.TargetName="CanvCalling"
        From="1.0" To="0.0" Duration="0:0:1" />
</Storyboard>

我已经使用 PointAnimation 解决了图元（椭圆、正方形）的问题，但它不适用于画布。

以前它使用 ThicknessAnimation 和 Margin 属性工作，但它在 UWP 和 windows phone 8.1 中不起作用

简述：

我需要使用动画平滑地更改 Margin 属性，我想在 XAML 中进行，

或

我怀疑这是通过RenderTransform

实现的

【参考方案1】：

您可以使用 LayoutTransform，但就平滑度而言，它不如 RenderTransform...

当您使用 LayoutTransform 时，您实际上将对象移动到新规范，而使用 RenderTransform 您只需移动对象的可视侧。对我来说，当您遇到剪辑问题或需要在动画期间更改其他元素的大小/位置时，最好使用 LayoutTransform。例如...如果您使用 RenderTransform / ScaleTransform / Scale.X 和 Y 并增加项目大小，它只会在视觉上增长。与它的交互也会增加，因此所有用户输入事件都会像视觉上应该的那样工作。 如果您使用与 LayoutTransform 相同的控件，则控件不仅会增加大小，而且它周围的所有对象都会移动或缩小，或者任何需要适应新大小的东西。一个很好的例子是高度设置为自动的网格行。如果您将对象 RenderTransform 更大，则行的高度不会改变以适应新的大小，但如果您使用 LayoutTransform，行将改变以适应新的大小。

希望这会有所帮助。

【参考方案2】：

在 TargetProperty 中使用 CompositeTransform 解决 XAML 下面...

            <Canvas.RenderTransform>
            <CompositeTransform />
        </Canvas.RenderTransform>

        <Canvas.Resources>
            <Storyboard x:Name="moveTo">
                <DoubleAnimation
        Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
                    Storyboard.TargetName="CanvCalling"
        From="0" To="200" Duration="0:0:1" RepeatBehavior="Forever"
        />
            </Storyboard>