Bouncing Ball with ParallelTimeline

image_pdfimage_print


   
      

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:s="clr-namespace:System;assembly=mscorlib">


    <Ellipse Name="elips" Width="20" Height="20" Fill="Red" 
             Canvas.Left="200">

        <Ellipse.Triggers>
            <EventTrigger RoutedEvent="Ellipse.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="elips" RepeatBehavior="Forever">
                        <DoubleAnimation 
                                Storyboard.TargetProperty="(Canvas.Top)"
                                From="96" To="490" Duration="0:0:1"
                                AutoReverse="True" 
                                AccelerationRatio="1" />

                        <ParallelTimeline BeginTime="0:0:0.98" 
                                          AutoReverse="True">

                            <DoubleAnimation Storyboard.TargetProperty="Width"
                                             To="32" Duration="0:0:0.02" />

                            <DoubleAnimation Storyboard.TargetProperty="Height"
                                             To="16" Duration="0:0:0.02" />

                            <DoubleAnimation 
                                    Storyboard.TargetProperty="(Canvas.Left)"
                                    From="0" To="-4"  Duration="0:0:0.02"
                                    IsAdditive="True" />
                        </ParallelTimeline>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Ellipse.Triggers>
    </Ellipse>
</Canvas>