我如何使椭圆上下移动动画

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一起使用以在元素的Matrix属性中为MatrixTransform的RenderTransform属性设置动画。