Question

我在试图让椭圆正确地跟随画布上的路径时遇到问题。我认为这个问题源于我的迷你语法定义了x和y值之间的移动，但我只定位了我的目标属性中的一个值（例如（Canvas.Top或Canvas.Left）。我不能似乎在画布上找到任何附加的“位置”属性，该属性将采用可与我的路径一起使用的位置类型。使这条路径起作用的正确方法是什么？

<Canvas Name="WaitingCanvas">
            <Ellipse Name="WaitingEllipse"
                     Canvas.Top="100"
                     Canvas.Left="50"
                     Height="20"
                     Width="20"
                     Fill="White">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Loaded">
                        <BeginStoryboard>
                            <Storyboard RepeatBehavior="Forever">
                                <DoubleAnimationUsingPath
                                    Storyboard.TargetName="WaitingEllipse"
                                    Storyboard.TargetProperty="(Canvas.Top)"

                                    Source="X" 
                                    Duration="0:0:5">
                                    <DoubleAnimationUsingPath.PathGeometry>
                                        <PathGeometry Figures="M 50,100 C 100,50 150,100 200, 100"/>
                                    </DoubleAnimationUsingPath.PathGeometry>
                                </DoubleAnimationUsingPath>


                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </Canvas>

Answer 1

您可能也可能为Canvas.Left的{{1}}属性设置动画，而不是同时为Canvas.Top和Matrix制作动画。MatrixTransform属性分配给RenderTransform属性椭圆。 Matrix将动画为MatrixAnimationUsingPath。

<Ellipse Height="20" Width="20" Fill="White">
    <Ellipse.RenderTransform>
        <MatrixTransform x:Name="transform" Matrix="1,0,0,1,50,100"/>
    </Ellipse.RenderTransform>
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard>
                <Storyboard RepeatBehavior="Forever">
                    <MatrixAnimationUsingPath
                        Storyboard.TargetName="transform"
                        Storyboard.TargetProperty="Matrix"
                        Duration="0:0:5">
                        <MatrixAnimationUsingPath.PathGeometry>
                            <PathGeometry Figures="M 50,100 C 100,50 150,100 200,100"/>
                        </MatrixAnimationUsingPath.PathGeometry>
                    </MatrixAnimationUsingPath>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

使用MatrixAnimationUsingPath甚至可以通过设置DoesRotateWithTangent="True"来沿动画路径的切线旋转动画元素。如果动画元素不是圆圈，那当然只能看到。

Answer 2

您无法同时为Canvas.Top和Canvas.Left添加动画，但您可以use two separate animations。使PathGeometry成为资源，以便共享：

<Canvas Name="WaitingCanvas">
    <Canvas.Resources>
        <PathGeometry x:Name="AnimationPath" Figures="M 50,100 C 100,50 150,100 200, 100"/>
    </Canvas.Resources>
        <Ellipse Name="WaitingEllipse"
                 Canvas.Top="100"
                 Canvas.Left="50"
                 Height="20"
                 Width="20"
                 Fill="White">
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard RepeatBehavior="Forever">
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="WaitingEllipse"
                                Storyboard.TargetProperty="(Canvas.Left)"
                                PathGeometry="{StaticResource AnimationPath}"
                                Source="X" 
                                Duration="0:0:5" />
                            <DoubleAnimationUsingPath
                                Storyboard.TargetName="WaitingEllipse"
                                Storyboard.TargetProperty="(Canvas.Top)"
                                PathGeometry="{StaticResource AnimationPath}"
                                Source="Y" 
                                Duration="0:0:5" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>
    </Canvas>

如何使椭圆跟随画布上的曲线

2 个答案: