<Window x:Class="WpfApp32.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp32"
mc:Ignorable="d" WindowState="Maximized"
Title="MainWindow" Height="450" Width="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal">
<Button Content="Animation with Easing" Margin="8" FontSize="16">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1500" From="20" RepeatBehavior="Forever"
Storyboard.TargetName="e1"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:1" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1500" From="20" Storyboard.TargetName="e2"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:1" AutoReverse="True"
RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1500" From="20" Storyboard.TargetName="e3"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:1" AutoReverse="True"
RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<CircleEase EasingMode="EaseIn">
</CircleEase>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="1500" From="20" Storyboard.TargetName="e4"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:10" AutoReverse="True"
RepeatBehavior="Forever">
<DoubleAnimation.EasingFunction>
<ElasticEase x:Name="elasticEase" Oscillations="3"
Springiness="1" EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
<Canvas Grid.Row="1" >
<Ellipse Fill="Red" Stroke="Black" StrokeThickness="2"
Width="40" Height="40" Canvas.Left="20"
Canvas.Top="30" x:Name="e1"/>
<Ellipse Fill="Green" Stroke="Black" StrokeThickness="2"
Width="40" Height="40" Canvas.Left="20"
Canvas.Top="160" x:Name="e2"/>
<Ellipse Fill="Blue" Stroke="Black" StrokeThickness="2"
Width="40" Height="40" Canvas.Left="20"
Canvas.Top="260" x:Name="e3"/>
<Ellipse Fill="Yellow" Stroke="Black" StrokeThickness="2"
Width="40" Height="40" Canvas.Left="20"
Canvas.Top="360" x:Name="e4"/>
</Canvas>
</Grid>
</Window>
![]()
![]()