控制播放.
程序员文章站
2022-06-08 14:57:50
...
到目前为止,已经在事件触发器中使用了一个动作,加载动画的BeginStoryboard动作,然而,一旦创建故事板,就可以使用其他动作控制故事板,这些动作都继承自ControllableStoryboardAction类,控制故事板的主要类如下:
PauseStoryboard 停止播放动画并且保持当前位置
ResumeStoryboard 恢复播放暂停的动画
StopStoryboard 停止播放动画,并将动画时钟重新设置到开始位
SeekStoryboard 跳到动画时间线中的特定位置,如果当前动画正在播放,就继续从新位置播放。如果当前动画是暂停的,就继续保持暂停
SetStoryboardSpeedRatio 改变整个故事板的SpeedRatio属性值
SkipStoryboardToFill 将故事板移动到时间线的终点。FillBehavior属性设置为HoldEnd,动画继续保持最后的值
RemoveStoryboard 移除故事板,停止所有正在运行的动画,并将属性返回为原来的、最后一次设置的数值
为了成功地执行这些动作,必须在同一个Triggers集合中定义所有的触发器,如果将BeginStoryboard动作的触发器和PauseStoryboard动作的触发器放置到不同的集合中,PauseStoryboard动作就无法工作。
接下来是代码和效果图:
Title="控制播放" Height="768" Width="1366">
<Window.Triggers>
<!-- 事件触发器 -->
<EventTrigger RoutedEvent="Button.Click" SourceName="btn_start">
<!-- 开始动画 -->
<BeginStoryboard Name="beginstoryboard1">
<!-- 故事板 -->
<Storyboard>
<!-- 改变图片img透明度Opacity -->
<DoubleAnimation Storyboard.TargetName="img" Storyboard.TargetProperty="Opacity" From="1" To="0" Duration="0:0:6"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- 停止动画 -->
<EventTrigger RoutedEvent="Button.Click" SourceName="btn_pause">
<!-- PauseStoryboard 停止播放动画 并且保持当前位置 -->
<PauseStoryboard BeginStoryboardName="beginstoryboard1"/>
</EventTrigger>
<!-- 恢复动画 -->
<EventTrigger RoutedEvent="Button.Click" SourceName="btn_resume">
<!-- ResumeStoryboard 恢复播放暂停的动画 -->
<ResumeStoryboard BeginStoryboardName="beginstoryboard1"/>
</EventTrigger>
<!-- 停止动画 -->
<EventTrigger RoutedEvent="Button.Click" SourceName="btn_stop">
<!-- StopStoryboard 停止播放动画,并将动画时钟重新设置到开始位置 -->
<StopStoryboard BeginStoryboardName="beginstoryboard1"/>
</EventTrigger>
<!-- 移除动画 -->
<EventTrigger RoutedEvent="Button.Click" SourceName="btn_remove">
<!-- 移除故事板,停止所有正在运行的动画,并将属性返回为原来的、最后一次设置的数值 -->
<RemoveStoryboard BeginStoryboardName="beginstoryboard1"/>
</EventTrigger>
</Window.Triggers>
<!-- 页面布局 -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="3*"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!-- 图片 -->
<Image Name="img" Source="33.jpg"/>
<!-- 操作按钮 -->
<WrapPanel Grid.Row="1" Orientation="Horizontal" ItemWidth="200" ItemHeight="100" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Name="btn_start" Content="开始" Margin="10" FontSize="20" Background="#FF97DCA1"/>
<Button Name="btn_pause" Content="暂停" Margin="10" FontSize="20" Background="#FFA2BAE4"/>
<Button Name="btn_resume" Content="恢复" Margin="10" FontSize="20" Background="#FFDCF194"/>
<Button Name="btn_stop" Content="停止" Margin="10" FontSize="20" Background="#FFB98DE6"/>
<Button Name="btn_remove" Content="移除" Margin="10" FontSize="20" Background="Red"/>
</WrapPanel>
</Grid>
上一篇: XAML 界面原理与语法