15WPF---动画控制与事件

学习内容

1.生命周期事件

CurrentTimeInValidated:时间线变化，60帧

CurrentGlobalSpeedInvalidated:速度变化

CurrentStateInValidated:状态变化

RemoveRequested:动画正在被移除的时候触发

Completed 动画完成

    <Window.Resources>
        <Storyboard x:Key="sb" 
                    Completed="Storyboard_Completed"
                    CurrentGlobalSpeedInvalidated="Storyboard_CurrentGlobalSpeedInvalidated"
                    CurrentTimeInvalidated="Storyboard_CurrentTimeInvalidated"
                    CurrentStateInvalidated="Storyboard_CurrentStateInvalidated">
            <DoubleAnimation Duration="0:0:3"
                             To="500"
                             Storyboard.TargetName="bor"
                             Storyboard.TargetProperty="Width"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn">
            <BeginStoryboard Storyboard="{StaticResource sb}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Border x:Name="bor" Width="100" Height="50" Background="Orange"/>
        <Button x:Name="btn" Content="执行动画" VerticalAlignment="Bottom" Height="30"/>
    </Grid>

2.动画控制

BeginStoryboard:开始中一个故事版

PauseStoryborad:暂停

ResumeStorboard:恢复

StopStoryboard:停止

SeekStoryboard:跳转某一时间

SetStoryboardSpeedRatio:加速、减速

   <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Height" Value="30"/>
        </Style>

        <Storyboard x:Key="sb">
            <DoubleAnimation Duration="0:0:10"
                             To="500"
                             Storyboard.TargetName="bor_1"
                             Storyboard.TargetProperty="Width"/>
        </Storyboard>

        <Storyboard x:Key="sb_event"
        >
            <DoubleAnimation Duration="0:0:1"
                             To="500"
                             Storyboard.TargetName="bor_1"
                             Storyboard.TargetProperty="Width"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <!--开始-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_1">
            <!--注意Name-->
            <BeginStoryboard Storyboard="{StaticResource sb}" Name="bsb"/>
            <!--<BeginStoryboard Storyboard="{StaticResource sb_event}"/>-->
        </EventTrigger>
        <!--暂停-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_2">
            <PauseStoryboard BeginStoryboardName="bsb"/>
        </EventTrigger>
        <!--恢复-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_3">
            <ResumeStoryboard BeginStoryboardName="bsb"/>
        </EventTrigger>
        <!--停止-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_4">
            <StopStoryboard BeginStoryboardName="bsb"/>
        </EventTrigger>
        <!--跳转到某个时刻-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_5">
            <SeekStoryboard BeginStoryboardName="bsb" Offset="0:0:3"/>
        </EventTrigger>
        <!--加速-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_6">
            <SetStoryboardSpeedRatio BeginStoryboardName="bsb" SpeedRatio="3"/>
        </EventTrigger>
        <!--减速-->
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn_7">
            <SetStoryboardSpeedRatio BeginStoryboardName="bsb" SpeedRatio="0.3"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Border Background="Orange" Width="50" Height="50" Name="bor_1" HorizontalAlignment="Left"/>
        <UniformGrid Rows="1" VerticalAlignment="Bottom">
            <Button Content="开始" Name="btn_1"/>
            <Button Content="暂停" Name="btn_2"/>
            <Button Content="恢复" Name="btn_3"/>
            <Button Content="停止" Name="btn_4"/>
            <Button Content="跳转某一帧" Name="btn_5"/>
            <Button Content="加速" Name="btn_6"/>
            <Button Content="减速" Name="btn_7"/>
        </UniformGrid>
    </Grid>

3.动画帧率DesiredFrameRate

DesiredFrameRate越大界面变化连续、CPU的占用率高，反之变化有弹跳现象，CPU占用低

   <Window.Resources>
        <!--界面变化连续、CPU的占用率-->
        <Storyboard x:Key="sb_1" Timeline.DesiredFrameRate="10">
            <DoubleAnimation Duration="0:0:3"
                             From="50"
                             To="500"
                             Storyboard.TargetName="bor_1"
                             Storyboard.TargetProperty="Width"/>
        </Storyboard>
        <Storyboard x:Key="sb_2" Timeline.DesiredFrameRate="60">
            <DoubleAnimation Duration="0:0:3"
                             From="50"
                             To="500"
                             Storyboard.TargetName="bor_2"
                             Storyboard.TargetProperty="Width"/>
        </Storyboard>
        <Storyboard x:Key="sb_3" Timeline.DesiredFrameRate="120">
            <DoubleAnimation Duration="0:0:3"
                             From="50"
                             To="500"
                             Storyboard.TargetName="bor_3"
                             Storyboard.TargetProperty="Width"/>
        </Storyboard>


        <Storyboard x:Key="sb_4">
            <DoubleAnimation Duration="0:0:5"
                             From="0"
                             To="500"
                             Storyboard.TargetName="bor"
                             Storyboard.TargetProperty="(Canvas.Left)"/>
            <DoubleAnimation Duration="0:0:5"
                             From="0"
                             To="300"
                             Storyboard.TargetName="bor"
                             Storyboard.TargetProperty="(Canvas.Top)"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn">
            <BeginStoryboard Storyboard="{StaticResource sb_1}"/>
            <BeginStoryboard Storyboard="{StaticResource sb_2}"/>
            <BeginStoryboard Storyboard="{StaticResource sb_3}"/>
            <!--<BeginStoryboard Storyboard="{StaticResource sb_4}"/>-->
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Canvas Name="canvas">
            <Polyline Name="polyline" Stroke="Black" StrokeThickness="1">
                <!--背景内容不会改变时有效-->
                <Polyline.CacheMode>
                    <BitmapCache RenderAtScale="2"/>
                </Polyline.CacheMode>
            </Polyline>
            <Border Width="150" Height="50" Background="Blue" Name="bor"/>
        </Canvas>
        <StackPanel>
            <Border Background="Orange" Width="50" Height="50" Name="bor_1" HorizontalAlignment="Left"/>
            <Border Background="Green" Width="50" Height="50" Name="bor_2" HorizontalAlignment="Left"/>
            <Border Background="Red" Width="50" Height="50" Name="bor_3" HorizontalAlignment="Left"/>
        </StackPanel>

        <Button Content="开始执行" Height="30" VerticalAlignment="Bottom" Name="btn"/>
    </Grid>

4.位图缓存CacheMode

    <Window.Resources>
        <Storyboard x:Key="sb_4">
            <DoubleAnimation Duration="0:0:5"
                             From="0"
                             To="500"
                             Storyboard.TargetName="bor"
                             Storyboard.TargetProperty="(Canvas.Left)"/>
            <DoubleAnimation Duration="0:0:5"
                             From="0"
                             To="300"
                             Storyboard.TargetName="bor"
                             Storyboard.TargetProperty="(Canvas.Top)"/>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="Button.Click" SourceName="btn">
            <BeginStoryboard Storyboard="{StaticResource sb_4}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>
        <Canvas Name="canvas">
            <Polyline Name="polyline" Stroke="Black" StrokeThickness="1">
                <!--背景内容不会改变时有效-->
                <Polyline.CacheMode>
                    <!--RenderAtScale缓存的分辨率越大越清晰-->
                    <BitmapCache RenderAtScale="2"/>
                </Polyline.CacheMode>
            </Polyline>
            <Border Width="150" Height="50" Background="Blue" Name="bor"/>
        </Canvas>

        <Button Content="开始执行" Height="30" VerticalAlignment="Bottom" Name="btn"/>
    </Grid>

若不进行缓存，Border移动到线条密集的地方会出现卡顿，其原因是移动过程中会重新渲染Border覆盖的地方，缓存的目的是保存背景不变