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>

 

 

 

posted @ 2024-04-02 21:55  FredGrit  阅读(4)  评论(0编辑  收藏  举报