Wpf Beginstoryboard Storyboard DoubleAnimation Storyboart.TargetName,Storyboary.TargetProperty RepeatBehavior,ease function,elastic,springness osciliations
<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>