3

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

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

2 回答 2

4

除了同时设置动画之外Canvas.Left，Canvas.Top您还可 以为分配给EllipseMatrix属性的 a的属性设置动画。将由. _MatrixTransformRenderTransformMatrixMatrixAnimationUsingPath

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

使用 aMatrixAnimationUsingPath甚至可以通过设置DoesRotateWithTangent="True". 这当然只有在动画元素不是圆形时才可见。

于 2013-07-24T19:34:10.057 回答
2

您不能同时为两者设置动画Canvas.Top，Canvas.Left但可以使用两个单独的动画。制作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>
于 2013-07-24T18:58:11.997 回答