欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【WPF学习笔记】WPF中动画(Animation)的简单使用

程序员文章站 2022-04-05 15:25:28
...

WPF中动画(Animation)的简单使用

动画(Animation)的部分简单属性的介绍

使用动画需要使用以下两个类:

Storyboard:创建动画需要使用故事板(Storyboard)元素,用于装载动画

XXXAnimation:具体的动画类,实现具体的动画效果;

具体的动画实现通过 XXXAnimation 中的属性实现,如下,以 DoubleAnimation 为例。不同参数类型的依赖属性需要对应使用不同的 动画类。

From:动画的起始值

To:动画的结束值。From 和 To 成对使用。

By:可以更改的总数。By 不可以和 From/To 一起使用。

通过查看 XXXAnimation 的基类 Timeline(时间线),还有以下重要属性

AutoReverse :时间线在完成向前迭代后是否按相反的顺序播放

SpeedRatio:设置在此的时间的推移的速率。

RepeatBehavior:设置此时间线的重复行为。设置重复次数。

Duration:用于此时间线播放,不计数重复的时间长度。

动画:大小变换、旋转和平移、渐变

这里就不作详细的介绍了,直接上代码,代码中有详细的注释说明,都是最简单的用法。

页面XAML代码

前端页面 XAML 代码如下,仅简单的按钮展示

<Window
    x:Class="AnimationDemo.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:AnimationDemo"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Grid>
        <TabControl>
            <TabItem Header="大小变换">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="启动"
                        Width="120"
                        Height="30"
                        Click="start_Click1" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample2" Grid.Column="1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample3" Grid.Column="2"
                            Width="100"
                            Height="50" />
                    </Grid>
                </Grid>
            </TabItem>

            <TabItem Header="旋转和移动">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="启动"
                        Width="120"
                        Height="30"
                        Click="start_Click2" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample2_1"
                            Width="100"
                            Height="50" />
                        <Button x:Name="Sample2_2" Grid.Column="1"
                            Width="100"
                            Height="50">
                            <Button.RenderTransform>
                                <RotateTransform Angle="0" CenterX="0" CenterY="0" />
                            </Button.RenderTransform>
                        </Button>
                        <Button x:Name="Sample2_3" Grid.Column="2"
                            Width="100"
                            Height="50">
                            <Button.RenderTransform>
                                <TranslateTransform X="0" Y="0" />
                            </Button.RenderTransform>
                        </Button>
                    </Grid>
                </Grid>
            </TabItem>

            <TabItem Header="渐变">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="80" />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <Button
                        Content="启动"
                        Width="120"
                        Height="30"
                        Click="start_Click3" />
                    <Grid Grid.Row="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>
                        <Button x:Name="Sample3_1"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                        <Button x:Name="Sample3_2" Grid.Column="1"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                        <Button x:Name="Sample3_3" Grid.Column="2"
                            Width="100"
                            Height="50"
                            Opacity="0" />
                    </Grid>
                </Grid>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

动画实现

动画是在 xaml.cs 中实现的。

代码中首先展示了如何具体操作动画的各个属性,然后将动画效果封装成了一个方法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace AnimationDemo
{
    /// <summary>
    /// MainWindow.xaml 的交互逻辑
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        
		/// <summary>
        /// 大小变化
        /// </summary>
        private void start_Click1(object sender, RoutedEventArgs e)
        {
            //创建动画使用 故事板(Storyboard)
            Storyboard storyboard = new Storyboard();

            //定义变更大小的动画 
            //根据属性的类型设置动画的类型。 因为下面设置的属性 Width 是 double 类型的属性,故使用DoubleAnimation
            DoubleAnimation doubleAnimation = new DoubleAnimation();

            //设置动画起始值
            //doubleAnimation.From = 0;
            //设置动画结束值
            //doubleAnimation.To = 100;

            //设置动画在原有的基础上增加一个范围
            doubleAnimation.By = 30;

            doubleAnimation.Duration = TimeSpan.FromSeconds(2);
            //设置动画无限次播放(不设置的话默认是无限次)
            doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
            //设置动画在指示时间线在完成向前迭代后是否按相反的顺序播放,从而实现反复的效果
            doubleAnimation.AutoReverse = true;

            //绑定到控件
            Storyboard.SetTarget(doubleAnimation, Sample1);
            //绑定到控件的依赖属性
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath("Width"));

            //将动画添加到故事板
            storyboard.Children.Add(doubleAnimation);

            //将动画效果封装成方法
            storyboard.Children.Add(CreatDoubleAnimation(Sample2, true, RepeatBehavior.Forever, "Height", 50));//更改Height,循环播放
            storyboard.Children.Add(CreatDoubleAnimation(Sample3, true, new RepeatBehavior(2), "Width", 50));//更改Width,播放2次

            //启动故事板包含的所有动画
            storyboard.Begin();
        }

        /// <summary>
        /// 封装动画方法
        /// </summary>
        /// <param name="uIElement">动画生效的界面元素</param>
        /// <param name="autoReverse">是否倒序</param>
        /// <param name="repeatBehavior">执行次数</param>
        /// <param name="propertyPath">动画生效的依赖属性</param>
        /// <param name="by"></param>
        /// <returns></returns>
        private Timeline CreatDoubleAnimation(UIElement uIElement, bool autoReverse, RepeatBehavior repeatBehavior, string propertyPath, double by)
        {
            DoubleAnimation doubleAnimation = new DoubleAnimation();
            doubleAnimation.By = by;
            doubleAnimation.Duration = TimeSpan.FromSeconds(2);
            doubleAnimation.RepeatBehavior = repeatBehavior;
            doubleAnimation.AutoReverse = autoReverse;
            Storyboard.SetTarget(doubleAnimation, uIElement);
            Storyboard.SetTargetProperty(doubleAnimation, new PropertyPath(propertyPath));
            return doubleAnimation;
        }

		/// <summary>
        /// 旋转和平移
        /// </summary>
        private void start_Click2(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();

            //按钮元素要支持移动\旋转的效果的话,需要给元素先添加支持移动\旋转的特性。
            Sample2_1.RenderTransform = new TranslateTransform(0, 0); //添加支持平移
            DoubleAnimation da = new DoubleAnimation();
            da.By = 50;
            da.Duration = TimeSpan.FromSeconds(1);

            Storyboard.SetTarget(da, Sample2_1);
            //这里的参数是弱类型的:new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)") 所以参数的拼写一定不能错
            Storyboard.SetTargetProperty(da, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));

            sb.Children.Add(da);

            sb.Children.Add(CreatDoubleAnimation(Sample2_2, false, new RepeatBehavior(2), 
                "(UIElement.RenderTransform).(RotateTransform.Angle)", 360));
            sb.Children.Add(CreatDoubleAnimation(Sample2_3, true, RepeatBehavior.Forever,
                "(UIElement.RenderTransform).(TranslateTransform.Y)", 30));

            sb.Begin();
        }
        
		/// <summary>
        /// 渐变
        /// </summary>
        private void start_Click3(object sender, RoutedEventArgs e)
        {
            Storyboard sb = new Storyboard();

            sb.Children.Add(CreatDoubleAnimation(Sample3_1, false, RepeatBehavior.Forever, "Opacity", 1));
            sb.Children.Add(CreatDoubleAnimation(Sample3_2, true, RepeatBehavior.Forever, "Opacity", 1));
            sb.Children.Add(CreatDoubleAnimation(Sample3_3, true, RepeatBehavior.Forever, "Opacity", 0.5));

            sb.Begin();
        }
    }
}

上述实现的动画效果,也可以使用前端 XAML 代码实现,实现格式如下:

<Window.Resources>
    <!--  动画的xaml格式  -->
    <Storyboard x:Key="test">
        <DoubleAnimation
                         Storyboard.TargetName=""
                         Storyboard.TargetProperty=""
                         From="0"
                         To="100"
                         Duration="0:0:5" />
    </Storyboard>
</Window.Resources>
相关标签: WPF wpf