WPF 动画

XML编辑动画

ex：显示方块逐渐
透明

<Border Name="Bd" Width="100" Height="100" Background="Cyan" Canvas.Left="200" Canvas.Top="120">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity" AutoReverse="True" By="0.5">
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>

线性动画

UI

<Button Width="60" Height="60" Content="Move" Click="Button_Click_1" 
                HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="30" Y="30"/>
            </Button.RenderTransform>
        </Button>

后台

 private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            DoubleAnimation daX = new DoubleAnimation();
            DoubleAnimation daY = new DoubleAnimation();

            daX.By = 100;
            daY.By = 100;//现有基础上偏移

            //daX.From = 30;
            //daY.From = 30;

            //Random r = new Random();
            //daX.To = r.NextDouble() * 300;
            //daY.To = r.NextDouble() * 200;

            BounceEase bounceEase = new BounceEase();
            bounceEase.Bounces = 3;
            bounceEase.Bounciness = 2;
            daY.EasingFunction = bounceEase;


            Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
            daX.Duration = duration;
            daY.Duration = duration;

            this.tt.BeginAnimation(TranslateTransform.XProperty, daX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
        }

关键帧动画

UI

<Canvas Name="can">
        <Border Name="Bd" Width="100" Height="100" Background="Cyan" Canvas.Left="200" Canvas.Top="120">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation From="1.0" To="0.0" Duration="0:0:1" Storyboard.TargetName="Bd" Storyboard.TargetProperty="Opacity" AutoReverse="True" >
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>
        <Button Width="60" Height="60" Content="Move" Click="Button_Click_1" 
                HorizontalAlignment="Left" VerticalAlignment="Top">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="30" Y="30"/>
            </Button.RenderTransform>
        </Button>

    </Canvas>

 private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            DoubleAnimation daX = new DoubleAnimation();
            DoubleAnimation daY = new DoubleAnimation();

            daX.By = 100;
            daY.By = 100;//现有基础上偏移

            BounceEase bounceEase = new BounceEase();
            bounceEase.Bounces = 3;
            bounceEase.Bounciness = 2;
            daY.EasingFunction = bounceEase;


            Duration duration = new Duration(TimeSpan.FromMilliseconds(500));
            daX.Duration = duration;
            daY.Duration = duration;

            this.tt.BeginAnimation(TranslateTransform.XProperty, daX);
            this.tt.BeginAnimation(TranslateTransform.YProperty, daY);
        }

路径动画

UI

<Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <PathGeometry x:Key="movingPath" 
            	Figures="m 0,150 c 300,-100 300,400 600,120"/>
        </Grid.Resources>

        <Button Content="Move" HorizontalAlignment="Left" VerticalAlignment="Top"
                Width="80" Height="80" Click="Button_Click">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="0" Y="150"/>
            </Button.RenderTransform>
        </Button>
    </Grid>

后台

 private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 查找资源
            PathGeometry pathGeometry = LayoutRoot.FindResource("movingPath") as PathGeometry;

            // 设置动画时间
            Duration duration = new Duration(TimeSpan.FromMilliseconds(600));

            // 创建路径动画
            DoubleAnimationUsingPath dmpX = new DoubleAnimationUsingPath();
            dmpX.Duration = duration;
            dmpX.PathGeometry = pathGeometry;
            dmpX.Source = PathAnimationSource.X;

            DoubleAnimationUsingPath dmpY = new DoubleAnimationUsingPath();
            dmpY.Duration = duration;
            dmpY.PathGeometry = pathGeometry;
            dmpY.Source = PathAnimationSource.Y;

            // 设置来回循环效果
            dmpX.AutoReverse = true;
            dmpY.AutoReverse = true;
            dmpX.RepeatBehavior = RepeatBehavior.Forever;
            dmpY.RepeatBehavior = RepeatBehavior.Forever;

            // 动画关联属性
            tt.BeginAnimation(TranslateTransform.XProperty, dmpX);
            tt.BeginAnimation(TranslateTransform.YProperty, dmpY);
        }

场景

XML

<Window x:Class="AnimationSceneDemo.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:AnimationSceneDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Background="Black">
        <Grid.RowDefinitions>
            <RowDefinition Height="38"/>
            <RowDefinition Height="38"/>
            <RowDefinition Height="38"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition Width="60"/>
        </Grid.ColumnDefinitions>

        <Border BorderBrush="Gray" BorderThickness="1" Grid.Row="0">
            <Ellipse x:Name="ballR" Height="36" Width="36" Fill="Red"
                     HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttR"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Border BorderBrush="Gray" BorderThickness="1,0,1,1" Grid.Row="1">
            <Ellipse x:Name="ballG" Height="36" Width="36" Fill="LawnGreen"
                     HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttG"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Border BorderBrush="Gray" BorderThickness="1,0,1,1" Grid.Row="2">
            <Ellipse x:Name="ballB" Height="36" Width="36" Fill="Blue"
                     HorizontalAlignment="Left">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="ttB"/>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Button Content="Go!" Grid.Column="1" Grid.RowSpan="3">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard Duration="0:0:5">

                            <DoubleAnimation Duration="0:0:5" To="685"
                                 Storyboard.TargetName="ttR"
                                 Storyboard.TargetProperty="X"/>

                            <DoubleAnimationUsingKeyFrames Duration="0:0:5"
                        Storyboard.TargetName="ttG" Storyboard.TargetProperty="X">
                                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="685"
                                          KeySpline="0,1,1,0"/>
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames Duration="0:0:5"
                        Storyboard.TargetName="ttB" Storyboard.TargetProperty="X">
                                <SplineDoubleKeyFrame KeyTime="0:0:5" Value="685"
                                          KeySpline="1,0,0,1"/>
                            </DoubleAnimationUsingKeyFrames>

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>

</Window>