WPF动画

devtools/2024/11/24 9:42:54/
  • 在 WPF（Windows Presentation Foundation）中，主要有两种类型的动画：属性动画（Property Animation）和关键帧动画（Key - Frame Animation）。属性动画用于简单地从一个起始值平滑地过渡到一个结束值，例如改变一个控件的宽度从 100px 到 200px。关键帧动画则更加灵活，它允许你在动画过程中定义多个关键帧，每个关键帧可以有不同的值，这样可以创建更复杂的动画效果，比如一个物体先加速再减速的运动动画。
  • WPF动画主要使用Storyboard来设置动画。Storyboard是一种用于控制时间和多个动画的容器，允许你在时间轴上定义动画的开始、持续时间、暂停等。

  • 主要的动画类型包括：

  • 位移动画（DoubleAnimation）：用于改变对象的位置。
  • 透明度动画（DoubleAnimation）：用于改变对象的透明度。
  • 缩放动画（ScaleTransform）：用于改变对象的大小。
  • 旋转动画（RotateTransform）：用于改变对象的旋转角度。
  • 颜色动画（ColorAnimation）：用于改变颜色。

1. 缩放动画

在XAML文件中添加按钮

<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>

编辑动画

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. 位移动画

<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>

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

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. 旋转动画

<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>

编辑动画

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接定义颜色动画

<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"><ColorAnimationStoryboard.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>

点击按钮时触发动画

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

动画效果

WPF颜色动画

5. 透明度动画

<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"><ColorAnimationStoryboard.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>

编辑动画

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


http://www.ppmy.cn/devtools/136521.html

相关文章

如何在 Ubuntu 20.04 上的 PyCharm 中使用 Conda 安装并配置 IPython 交互环境

如何在 Ubuntu 20.04 上的 PyCharm 中使用 Conda 安装并配置 IPython 交互环境

如何在 Ubuntu 20.04 上的 PyCharm 中使用 Conda 安装并配置 IPython 交互环境 要在 Ubuntu 20.04 上的 PyCharm 中配置 IPython 交互环境&#xff0c;并使用 Conda 作为包管理器进行安装&#xff0c;你需要遵循一系列明确的步骤。这些步骤将确保你可以在 PyCharm 中使用 Cond…
阅读更多...
【汇编】有关AI人工智能

【汇编】有关AI人工智能

随着 AI 技术的不断发展&#xff0c;AI大模型正在重塑软件开发流程&#xff0c;从代码自动生成到智能测试&#xff0c;未来&#xff0c;AI 大模型将会对软件开发者、企业&#xff0c;以及整个产业链都产生深远的影响。欢迎与我们一起&#xff0c;从 AI 大模型的定义、应用场景、…
阅读更多...
钉钉报销集成金蝶付款单的技术实现方案

钉钉报销集成金蝶付款单的技术实现方案

钉钉报销【月结贷款】集成到金蝶付款单【晨丰】的技术实现 在企业日常运营中&#xff0c;数据的高效流转和准确对接是提升业务效率的重要环节。本文将分享一个具体的系统对接集成案例&#xff0c;即如何将钉钉平台上的报销数据&#xff08;【月结贷款】&#xff09;无缝集成到…
阅读更多...
重学SpringBoot3-Spring Retry实践

重学SpringBoot3-Spring Retry实践

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-Spring Retry实践 1. 简介2. 环境准备3. 使用方式3.1 注解方式基础使用自定义重试策略失败恢复机制重试和失败恢复效果注意事项 3.2 编程式使用3.3 监听…
阅读更多...
设计模式的学习思路

设计模式的学习思路

学习设计模式确实需要一定的时间和实践&#xff0c;尤其是对于刚入门的人来说&#xff0c;因为一开始可能会感到有些混淆&#xff0c;尤其是当多个设计模式看起来有相似之处时。本博客是博主学习设计模式的思路历程&#xff0c;大家可以一起学习进步。设计模式学习-CSDN博客 1…
阅读更多...
k8s启动springboot容器的时候，显示找不到application.yml文件

k8s启动springboot容器的时候，显示找不到application.yml文件

因为在k8s中 applicaton.yml文件需要加一段配置&#xff0c;才能使用kubectl apply -f config.yaml 下面是我之前的错误配置 apiVersion: v1 kind: ConfigMap metadata:name: test-cmnamespace: test-ns data:application.yaml: |-server:port: 8080spring:cache:jcache:conf…
阅读更多...
谈一下开源生态对 AI人工智能大模型的促进作用

谈一下开源生态对 AI人工智能大模型的促进作用

谈一下开源生态对 AI人工智能大模型的促进作用 作者&#xff1a;开源呼叫中心系统 FreeIPCC&#xff0c;Github地址&#xff1a;https://github.com/lihaiya/freeipcc 开源生态对大模型的促进作用是一个多维度且深远的话题&#xff0c;它不仅加速了技术创新的速度&#xff0c;…
阅读更多...
C++ 中的智能指针

C++ 中的智能指针

智能指针的作用&#xff1a; 当使用普通指针来管理动态分配的内存时&#xff0c;程序员需要手动负责在合适的时候释放内存&#xff0c;否则可能会导致内存泄漏。而智能指针通过自动管理内存的生命周期&#xff0c;在适当的时候自动释放内存&#xff0c;大大降低了内存管理的复杂…
阅读更多...
最新文章

Copyright @ 2022~2023