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动画的应用很广泛和也很灵活，如关键帧动画的设计，动画的数据绑定，这里只是简单的示范，后续在使用过程中会再更。。