WPF 之动画（十二）

WPF 中的动画主要分为 AnimationTimeline（简单动画） 和 Storyboard（一组协同的动画）。

一、简单线性动画

        <Button Height="80" Width="200" Content="Move" Click="ButtonBase_OnClick">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt" X="0" Y="0"></TranslateTransform>
            </Button.RenderTransform>
        </Button>

        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            DoubleAnimation dx = new DoubleAnimation();
            DoubleAnimation dy = new DoubleAnimation();

            // 指定起点
            dx.From = 0;
            dy.From = 0;

            // 指定终点
            dx.To = new Random().NextDouble() * 200;
            dy.To = new Random().NextDouble() * 200;

            //// 指定幅度
            //dx.By = 100;
            //dy.By = 100;

            // 指定时长
            dx.Duration = new Duration(TimeSpan.FromMilliseconds(1000));
            dy.Duration = new Duration(TimeSpan.FromMilliseconds(2000));

            // 动画主体（TranslateTransform）
            tt.BeginAnimation(TranslateTransform.XProperty,dx);
            tt.BeginAnimation(TranslateTransform.YProperty,dy);
        }

二、高级动画控制

        <!--弹跳移动-->
        <Button  Margin="0,0,600,350" Content="弹跳" Click="ButtonBase_OnClick1">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt1" X="0" Y="0"></TranslateTransform>
            </Button.RenderTransform>
        </Button>

        private void ButtonBase_OnClick1(object sender, RoutedEventArgs e)
        {
           DoubleAnimation dx=new DoubleAnimation();
           DoubleAnimation dy=new DoubleAnimation();

            // 设置弹跳
            BounceEase be=new BounceEase()
            {
                Bounces = 4, // 弹跳次数
                Bounciness = 2,// 弹跳值
            };
            dy.EasingFunction = be;

            // 设置终点
            dx.To = 300;
            dy.To = 300;

            // 设置时长
            dx.Duration = new Duration(TimeSpan.FromMilliseconds(2000));
           dy.Duration = new Duration(TimeSpan.FromMilliseconds(2000));

            // 动画主体
            tt1.BeginAnimation(TranslateTransform.XProperty,dx);
           tt1.BeginAnimation(TranslateTransform.YProperty, dy);
        }

三、关键帧动画

        <!--路径-->
        <PathGeometry x:Key="MovePath" Figures="M0,150 C300,-100 300,400 600,120"></PathGeometry>
        <!--路径移动-->
        <Button  Margin="0,100,600,250" Content="路径移动" Click="ButtonBase_OnClick2">
            <Button.RenderTransform>
                <TranslateTransform x:Name="tt2" X="0" Y="0"></TranslateTransform>
            </Button.RenderTransform>
        </Button>

        private void ButtonBase_OnClick2(object sender, RoutedEventArgs e)
        {
            PathGeometry path=this.FindResource("MovePath") as PathGeometry;
            Duration duration =new Duration(TimeSpan.FromMilliseconds(3000));

            // 创建动画
            DoubleAnimationUsingPath dx=new DoubleAnimationUsingPath()
            {
                PathGeometry = path,
                Source = PathAnimationSource.X,
                Duration = duration,
            };

            DoubleAnimationUsingPath dy = new DoubleAnimationUsingPath()
            {
                PathGeometry = path,
                Source = PathAnimationSource.Y,
                Duration = duration,
            };

            // 执行动画
            tt2.BeginAnimation(TranslateTransform.XProperty,dx);
            tt2.BeginAnimation(TranslateTransform.YProperty, dy);
        }

四、场景——Storyboard

例如：实现三个小球（红球、绿球、蓝球）分别沿着跑到运动的动画，具体示例如下：

     <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="100"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0" BorderThickness="2" BorderBrush="Red">
            <Ellipse x:Name="RedEllipse" Width="36" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Red">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="RedTransform"></TranslateTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Border Grid.Row="1" Grid.Column="0" BorderThickness="2" BorderBrush="Green">
            <Ellipse x:Name="GreenEllipse" Width="36" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Green">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="GreenTransform"></TranslateTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Border Grid.Row="2" Grid.Column="0" BorderThickness="2" BorderBrush="Blue">
            <Ellipse x:Name="BlueEllipse" Width="36" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Left" Fill="Blue">
                <Ellipse.RenderTransform>
                    <TranslateTransform x:Name="BlueTransform"></TranslateTransform>
                </Ellipse.RenderTransform>
            </Ellipse>
        </Border>

        <Button Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" Content="GO!">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="RedTransform"
                                             Storyboard.TargetProperty="X"
                                             To="650"
                                             Duration="0:1:0"
                                             ></DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="GreenTransform"
                                             Storyboard.TargetProperty="X"
                                             To="650"
                                             Duration="0:0:0.8"
                            ></DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="BlueTransform"
                                             Storyboard.TargetProperty="X"
                                             To="650"
                                             Duration="0:0:10"
                            ></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>