如何为椭圆设置动画以上下移动

Question

所以我试图让我的椭圆以波浪的方式上下移动。 问题是我只能让它向前和向下，我不知道我怎么让它像横着走一样S 像这样 visual representation of what I want

这就是我目前所得到的

<Canvas Name="Can1">
            <Ellipse Name="Rect1" Canvas.Left="10" Fill="LightSeaGreen"
                   Stroke="Bisque"
                   StrokeThickness="5"
                   Width="100" Height="100">
                <Ellipse.Triggers>
                    <EventTrigger RoutedEvent="Window.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                Storyboard.TargetName="Rect1"
                                Storyboard.TargetProperty="(Canvas.Left)"
                                From="10" To="100"
                                Duration="0:0:2"/>

                                <DoubleAnimation
                                Storyboard.TargetName="Rect1"
                                Storyboard.TargetProperty="(Canvas.Top)"
                                From="10" To="100"
                                Duration="0:0:2"/>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Ellipse.Triggers>
            </Ellipse>
        </Canvas>

Answer 1

为垂直动画使用适当的EasingFunction。同时设置AutoReverse和RepeatBehavior：

<Ellipse x:Name="ellipse"
         Fill="LightSeaGreen"
         Stroke="Bisque"
         StrokeThickness="5"
         Width="100" Height="100">
    <Ellipse.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation
                        Storyboard.TargetName="ellipse"
                        Storyboard.TargetProperty="(Canvas.Left)"
                        From="0" To="1000"
                        Duration="0:0:10"/>

                    <DoubleAnimation
                        Storyboard.TargetName="ellipse"
                        Storyboard.TargetProperty="(Canvas.Top)"
                        From="0" To="100"
                        Duration="0:0:1"
                        AutoReverse="True"
                        RepeatBehavior="Forever">
                        <DoubleAnimation.EasingFunction>
                            <SineEase EasingMode="EaseInOut"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Ellipse.Triggers>
</Ellipse>

---

对于更复杂的动作，创建一个PathGeometry 并将其与MatrixAnimationUsingPath 一起使用，以在元素的RenderTransform 属性中为MatrixTransform 的Matrix 属性设置动画。