欢迎光临
我的个人博客网站

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


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> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » 【WPF学习笔记】WPF中动画(Animation)的简单使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏