WPF动画

  • 在 WPF(Windows Presentation Foundation)中,主要有两种类型的动画:属性动画(Property Animation)和关键帧动画(Key - Frame Animation)。属性动画用于简单地从一个起始值平滑地过渡到一个结束值,例如改变一个控件的宽度从 100px 到 200px。关键帧动画则更加灵活,它允许你在动画过程中定义多个关键帧,每个关键帧可以有不同的值,这样可以创建更复杂的动画效果,比如一个物体先加速再减速的运动动画。

  • WPF动画主要使用Storyboard来设置动画。Storyboard是一种用于控制时间和多个动画的容器,允许你在时间轴上定义动画的开始、持续时间、暂停等。

  • 主要的动画类型包括:

  • 位移动画(DoubleAnimation):用于改变对象的位置。

  • 透明度动画(DoubleAnimation):用于改变对象的透明度。

  • 缩放动画(ScaleTransform):用于改变对象的大小。

  • 旋转动画(RotateTransform):用于改变对象的旋转角度。

  • 颜色动画(ColorAnimation):用于改变颜色。

1. 缩放动画

在XAML文件中添加按钮

cs 复制代码
<Window x:Class="Animation.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <StackPanel>
        <Button Name="AnimatedButton" Content="点击缩放!" Width="100" Height="50"
         RenderTransformOrigin="0.5, 0.5" Click="AnimatedButton_Click" Margin="20">
            <Button.RenderTransform>
                <ScaleTransform />
            </Button.RenderTransform>
        </Button>
    </StackPanel>
</Window>

编辑动画

cs 复制代码
using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;

namespace Animation.Views
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void AnimatedButton_Click(object sender, RoutedEventArgs e)
        {
            // 获取当前的缩放变换
            ScaleTransform scale = (ScaleTransform)AnimatedButton.RenderTransform;
            // 创建一个位移动画
            DoubleAnimation scaleAnimationX = new DoubleAnimation
            {
                From = 1.0, // 起始缩放
                To = 1.3,   // 结束缩放
                Duration = TimeSpan.FromSeconds(0.1), // 动画持续时间
                AutoReverse = true // 自动反转
            };
            DoubleAnimation scaleAnimationY = new DoubleAnimation
            {
                From = 1.0, // 起始缩放
                To = 1.3,   // 结束缩放
                Duration = TimeSpan.FromSeconds(0.1), // 动画持续时间
                AutoReverse = true // 自动反转
            };
            // 应用动画到缩放变换
            scale.BeginAnimation(ScaleTransform.ScaleXProperty, scaleAnimationX);
            scale.BeginAnimation(ScaleTransform.ScaleYProperty, scaleAnimationY);
        }
    }
}

动画效果

WPF缩放动画

2. 位移动画

cs 复制代码
<Window x:Class="Animation.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Canvas Name="MyCanvas">
        <Button Content="Start Animation" Click="Button_Click" Name="MyButton"/>
    </Canvas>
</Window>

在按钮的点击事件中编辑动画

cs 复制代码
using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Controls;
using Example;

namespace Animation.Views
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            
            // 创建位移动画
            DoubleAnimation animation = new DoubleAnimation
            {
                From = 0,
                To = MyCanvas.ActualWidth-MyButton.ActualWidth,
                Duration = new Duration(TimeSpan.FromSeconds(2)),
                AutoReverse = true
            };

            // 应用动画到按钮的X轴位移
            TranslateTransform translateTransform = new TranslateTransform();
            MyButton.RenderTransform = translateTransform;

            // 开始动画
            translateTransform.BeginAnimation(TranslateTransform.XProperty, animation);
        }
    }
}

动画效果

WPF位移动画

3. 旋转动画

cs 复制代码
<Window x:Class="Animation.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Canvas Name="MyCanvas">
        <Button Content="Start Animation" Click="Button_Click" Name="MyButton"/>
        <Grid>
            <Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"
                RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49">
                <Button.RenderTransform>
                    <RotateTransform x:Name="ButtonRotateTransform" Angle="0"/>
                </Button.RenderTransform>
            </Button>
        </Grid>
    </Canvas>
    
</Window>

编辑动画

cs 复制代码
using System;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media;
using System.Windows.Controls;
using Example;

namespace Animation.Views
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            
            // 创建位移动画
            DoubleAnimation animation = new DoubleAnimation
            {
                From = 0,
                To = MyCanvas.ActualWidth-MyButton.ActualWidth,
                Duration = new Duration(TimeSpan.FromSeconds(2)),
                AutoReverse = true
            };

            // 应用动画到按钮的X轴位移
            TranslateTransform translateTransform = new TranslateTransform();
            MyButton.RenderTransform = translateTransform;

            // 开始动画
            translateTransform.BeginAnimation(TranslateTransform.XProperty, animation);
        }
        private void MyButton_Click1(object sender, RoutedEventArgs e)
        {
            // 创建旋转动画
            DoubleAnimation animation = new DoubleAnimation
            {
                From = 0,
                To = 360, // 旋转360度
                Duration = new Duration(TimeSpan.FromSeconds(1)),
                RepeatBehavior = RepeatBehavior.Forever // 无限循环
            };

            // 应用动画到按钮的旋转角度
            ButtonRotateTransform.BeginAnimation(RotateTransform.AngleProperty, animation);
        }
    }
   
}

动画效果

WPF旋转动画

4. 颜色动画

在页面中直给Button2接定义颜色动画

cs 复制代码
<Window x:Class="Animation.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Window.Resources>
        <Storyboard x:Key="ColorAnimationStoryboard">
            <ColorAnimation
                Storyboard.TargetName="MyButton2"
                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                From="Green"
                To="GreenYellow"
                Duration="0:0:1.5"
                AutoReverse="True"
                RepeatBehavior="Forever" />
        </Storyboard>
    </Window.Resources>
    <Canvas Name="MyCanvas">
        <Button Content="Start Animation" Click="Button_Click" Name="MyButton"/>
        <Grid>
            <Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"
                RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49">
                <Button.RenderTransform>
                    <RotateTransform x:Name="ButtonRotateTransform" Angle="0"/>
                </Button.RenderTransform>
            </Button>
        </Grid>
        <Button Name="MyButton2" Width="100" Height="50" Content="点击我" Click="MyButton_Click2" Canvas.Left="162" Canvas.Top="167"/>
    </Canvas>
    
</Window>

点击按钮时触发动画

cs 复制代码
 private void MyButton_Click2(object sender, RoutedEventArgs e)
 {
     // 从资源中获取Storyboard并开始动画
     Storyboard storyboard = (Storyboard)FindResource("ColorAnimationStoryboard");
     storyboard.Begin();
 }

动画效果

WPF颜色动画

5. 透明度动画

cs 复制代码
<Window x:Class="Animation.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:prism="http://prismlibrary.com/"
        prism:ViewModelLocator.AutoWireViewModel="True"
        Title="{Binding Title}" Height="350" Width="525" >
    <Window.Resources>
        <Storyboard x:Key="ColorAnimationStoryboard">
            <ColorAnimation
                Storyboard.TargetName="MyButton2"
                Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)"
                From="Green"
                To="GreenYellow"
                Duration="0:0:1.5"
                AutoReverse="True"
                RepeatBehavior="Forever" />
        </Storyboard>
    </Window.Resources>
    <Canvas Name="MyCanvas">
        <Button Content="Start Animation" Click="Button_Click" Name="MyButton"/>
        <Grid>
            <Button Name="MyButton1" Width="100" Height="50" Content="点击我" Click="MyButton_Click1"
                RenderTransformOrigin="0.5, 0.5" Margin="178,49,-178,-49">
                <Button.RenderTransform>
                    <RotateTransform x:Name="ButtonRotateTransform" Angle="0"/>
                </Button.RenderTransform>
            </Button>
        </Grid>
        <Button Name="MyButton2" Width="100" Height="50" Content="点击我" Click="MyButton_Click2" Canvas.Left="162" Canvas.Top="167"/>

        <Button Name="MyButton3" Width="100" Height="50" Content="点击我" Click="MyButton_Click3" Background="Blue" RenderTransformOrigin="0.897,3.506" Canvas.Left="162" Canvas.Top="245"/>
    </Canvas>
    
</Window>

编辑动画

cs 复制代码
 private void MyButton_Click3(object sender, RoutedEventArgs e)
 {
     // 创建透明度动画
     DoubleAnimation opacityAnimation = new DoubleAnimation
     {
         From = 1.0,  // 初始透明度
         To = 0.4,    // 目标透明度
         Duration = new Duration(TimeSpan.FromSeconds(1)), // 动画持续时间
         AutoReverse = true  ,// 动画反向播放
          RepeatBehavior = RepeatBehavior.Forever // 无限循环
     };

     // 应用动画到按钮的透明度
     MyButton3.BeginAnimation(UIElement.OpacityProperty, opacityAnimation);
 }

动画效果

WPF透明度动画

WPF动画的应用很广泛和也很灵活,如关键帧动画的设计,动画的数据绑定,这里只是简单的示范,后续在使用过程中会再更。。

相关推荐
Tiger_shl5 小时前
【.Net技术栈梳理】03-核心框架与运行时(异常处理)
开发语言·.net
ISDF-工软未来10 小时前
C# 泛型简单案例
c#
I'mSQL12 小时前
WPF资源字典合并报错
wpf
疯狂的维修12 小时前
C#中一段程序类比博图
c#
时光追逐者14 小时前
C#/.NET/.NET Core技术前沿周刊 | 第 53 期(2025年9.1-9.7)
c#·.net·.netcore
冷冷的菜哥14 小时前
ASP.NET Core使用MailKit发送邮件
后端·c#·asp.net·发送邮件·mailkit
weixin_4471035814 小时前
C#之LINQ
c#·linq
ysn1111115 小时前
反编译分析C#闭包
c#
one99617 小时前
WPF应用程序中的异常处理
c#·.net·wpf