在WPF中,通常会使用以下的一些标签来创建和控制动画。
1.Storyboard:
Storyboard 是 Window Presentation Foundation (WPF) 中一种强大的工具,可用于创建自定义动画效果。WPF 中的动画是通过变化特定属性的值来产生的,并且这些变化都是随时间而进行的。
<Window x:Class="WpfAnimationDemo.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Animation Demo" Height="350" Width="525"> <Grid> <Button Name="DemoButton" Content="Click me" Width="100" Height="50"/> </Grid> </Window>步骤 3:编写动画效果
<Button x:Name="DemoButton" Width="100" Height ="100" Content="Animate Me!" Click="DemoButton_Click" Grid.Row="0" Grid.Column="0"/> private void DemoButton_Click(object sender, RoutedEventArgs e) { DoubleAnimation widthAnimation = new DoubleAnimation(); widthAnimation.From = 100; // 起始值 widthAnimation.To = 300; // 结束值 widthAnimation.Duration = new Duration(TimeSpan.FromSeconds(1)); // 动画长度 Storyboard storyboard = new Storyboard(); storyboard.Children.Add(widthAnimation); Storyboard.SetTarget(widthAnimation, DemoButton); Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty)); storyboard.Begin(); }这个方法是 DemoButton 的点击事件处理器。当点击这个按钮时,这个方法就会被调用。点击时将会发生动画效果,按钮的宽度内部值从100逐渐变化到300,过程时间为1秒。这是通过WPF中的 Storyboard 和 DoubleAnimation 来完成的。
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void DemoButton_Click(object sender, RoutedEventArgs e) { DoubleAnimation widthAnimation = new DoubleAnimation(); widthAnimation.From = 100; // 起始值 widthAnimation.To = 300; // 结束值 widthAnimation.Duration = new Duration(TimeSpan.FromSeconds(2)); // 动画长度 // 堆代码 duidaima.com Storyboard storyboard = new Storyboard(); storyboard.Children.Add(widthAnimation); Storyboard.SetTarget(widthAnimation, DemoButton); Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty)); storyboard.Begin(); } }通过xaml实现
<Window ...> <!-- ... --> <Grid> <Button Name="DemoButton" Content="Click me" Width="100" Height="50"> <Button.Triggers> <EventTrigger RoutedEvent="Button.Click"> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:1"/> </Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> </Grid> </Window> <Window ...> <!-- ... -->这个<Window...>标签用于定义整个窗口的开始和结束。
<Grid>是WPF内的一种特布面板标签,它提供了一个灵活的格子系统,用于在多行和多列中进行UI元素布局。
<Button Name="myButton" Content="Click me" Width="100" Height="50">在这里,我们定义了一个按钮(Button)。Name属性是给按钮设定的名称,它在XAML和代码之间可以进行关联;Content属性设置按钮的文本为"Click me";Width和Height属性则设置了按钮的宽度和高度。
<Button.Triggers>Triggers标签指定触发器,它定义在一定的条件下触发某些行为。
<EventTrigger RoutedEvent="Button.Click">此处定义了一个EventTrigger事件触发器。该触发器在Button.Click事件——也就是按钮被点击的事件——发生时触发。
<BeginStoryboard>BeginStoryboard会使得包含在其中的Storyboard开始播放。
<Storyboard>Storyboard是WPF中对动画的最高级别的封装。一个Storyboard可以包含多个动画,这些动画会在BeginStoryboard命令下同步启动。
<DoubleAnimation Storyboard.TargetName="myButton" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:1"/>这段代码定义了一个DoubleAnimation双值动画。
</Storyboard> </BeginStoryboard> </EventTrigger> </Button.Triggers> </Button> </Grid> </Window>以上是各个元素的结束标签,用于指定相应元素的结束位置。
保存你的代码,运行程序,然后点击按钮观察动画效果。