闽公网安备 35020302035485号
在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>
以上是各个元素的结束标签,用于指定相应元素的结束位置。保存你的代码,运行程序,然后点击按钮观察动画效果。