WPF 故事板动画示例

    技术2026-08-14  12

    WPF做动画比较方便; Storyboard和Animation,你只要指定一些属性值,比如开始值和结束值、由开始值到达结束值所需的时间、需要动画的属性,便可形成一个简单的动画。 可以在xaml代码里指定;也可以在C#代码里指定;可以在C#代码里引用xaml代码里的控件;

    下面指定长方形的宽度由100变化到200,所需时间为1秒;

    <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" WindowTitle="Storyboards Example"> <StackPanel Margin="20"> <Rectangle Name="MyRectangle" Width="100" Height="100"> <Rectangle.Fill> <SolidColorBrush x:Name="MySolidColorBrush" Color="Green" /> </Rectangle.Fill> <Rectangle.Triggers> <EventTrigger RoutedEvent="Page.Loaded"> <BeginStoryboard> <Storyboard RepeatBehavior="Forever" AutoReverse="True"> <DoubleAnimation Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width" From="100" To="200" Duration="0:0:1" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Rectangle.Triggers> </Rectangle> </StackPanel> </Page>

    效果如下;一个长方形持续在改变宽度;

    WPF的动画有一个比较有用的特性;就是它动画结束会触发一个事件;可在此事件执行一些需要的代码;

    以前开发体感项目时,因为用户用体感进行手势操作,并不像鼠标键盘那么自如,经常需要屏幕有明确的提示下一步操作; 以前做的体感进入下一级菜单是,用户抬起手臂和身体成一个夹角,就触发一个光圈动画,动画时间是30秒;30秒光圈从头转到尾;如果在30秒内,用户放下手臂,就停止动画,菜单停留在当前级;如果用户一直保持抬起手臂和身体成一个夹角,光圈转完后,触发一个事件,在此事件中读取下一级菜单文本,加载下一级菜单;进入到下一级菜单;

    Processed: 0.013, SQL: 9