CODEWITHSUNDEEP
c#.netwpfxamlstoryboard
Riley Varga
Riley Varga

Reputation: 720

How do I animate an ellipse to go up and down

So I'm trying to animate my ellipse to go up and down in a wave type of way. The thing is I can only make it go forward and down, I'm not sure how I would make it go like a sideway S Like this visual representation of what I want

This is what I've got so far

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

Upvotes: 1

Views: 177

Answers (1)

Clemens
Clemens

Reputation: 128061

Use an appropriate EasingFunction for the vertical animation. Also set AutoReverse and 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>

For a more complex movement, create a PathGeometry and use it with a MatrixAnimationUsingPath to animate the Matrix property of a MatrixTransform in the RenderTransform property of an element.

Upvotes: 2

Related Questions