WPF学习 第十五章 动画基础

15 动画基础

15.1使用代码创建动画

private void Button1_Click(object sender,RoutedEventArgs e)

{

           DoubleAnimation widthAnimation = new DoubleAnimation();

            widthAnimation.From = 160;

           widthAnimation.To = 300;

           widthAnimation.Duration = TimeSpan.FromSeconds(1);

           Button1.BeginAnimation(Button.WidthProperty, widthAnimation);

}

From：起始值

To：目标值

Duration：动画持续时间，除了用TimeSpan还可以用Duration.Automatic和Duration.Forever

By：可用来代替To，说明目标值是相对起始值的偏移。如果From=160，To=300相当于From=160，By=140

IsAdditive：bool类型，说明From和To都是相对元素的当前值。如果：IsAdditive=true，则From=160相当于是160+Button.ActualWidth，To相当于是300+ Button.ActualWidth

AutoReverse：设置为true则动画执行完会反向执行

FillBehavior：值为FillBehavior.Stop则执行完动画后会回到原来直线动画前的状态， 值为FillBehavior.HoldEnd则保持执行动画后的状态。

Completed：值是一个事件处理函数，表面动画执行完处理该事件。

将BeginAnimation的第二个参数设置为null来停止动画。

例如：Button1.BeginAnimation(Button.WidthProperty, null);

BeginTime：动画开始前等待一段时间

SpeedRatio：动画的执行速度，默认是1。

AccelerationRatio：动画执行开始时加速，随后匀速

DecelerationRatio：动画在结束时减速

RepeatBehavior：重复次数，可以无限重复RepeatBehavior.Forever

15.2 使用故事板和触发器创建动画

<Button Name="Button1"Content="Button" VerticalAlignment="Center"HorizontalAlignment="Center" Width="75"Height="30">

           <Button.Triggers>

                <EventTriggerRoutedEvent="Button.Click">

                   <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard>

                               <DoubleAnimation Storyboard.TargetName="Button1"

                                                Storyboard.TargetProperty="Width"

                                                To="300" Duration="0:0:0.2">                               

                                </DoubleAnimation>

                            </Storyboard>

                       </BeginStoryboard>

                   </EventTrigger.Actions>

                </EventTrigger>

           </Button.Triggers>

       </Button>

说明：

1.故事板一般需要用事件触发器来调用。

2.代码中由于故事板写在了Button里面，所以Storyboard.TargetName="Button1"这一句可以省略。

3.如果故事板使用的属性是附加属性（如Canvas.Left）则需要加个括号写成下面形式：

<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)"

4.动画中的To使用了硬编码的值300，如果想用窗口的宽度表示需要使用数据绑定，可写成下面形式：

<DoubleAnimation Storyboard.TargetProperty="Width"To="{BindingElementName=window1, Path=Width}"

5.也可以用样式关联触发器，可以使用属性触发器和事件触发器。下面是属性触发器的代码：

<Window.Resources>

       <Style x:Key="buttonStyle">

           <Style.Triggers>

                <TriggerProperty="Button.IsPressed" Value="True">

                   <Trigger.EnterActions>

                        <BeginStoryboard>

                            <Storyboard>

                               <DoubleAnimation

                                                Storyboard.TargetProperty="Width"

                                                 To="300"Duration="0:0:0.2">

                               </DoubleAnimation>

                            </Storyboard>

                       </BeginStoryboard>

                   </Trigger.EnterActions>

                </Trigger>

           </Style.Triggers>

       </Style>

</Window.Resources>

<Canvas>

<ButtonStyle="{StaticResource buttonStyle}" Name="Button1"Content="Button" VerticalAlignment="Center"HorizontalAlignment="Center" Width="75"Height="30"></Button>

</Canvas>

15.3 控制播放动画

<Window.Triggers>

       <EventTrigger SourceName="cmdStart"RoutedEvent="Button.Click">

           <BeginStoryboard Name="storyboardbegin">

                <StoryboardName="storyboard" CurrentTimeInvalidated="storyboard_CurrentTimeInvalidated">

                    <DoubleAnimationStoryboard.TargetName="pic2"Storyboard.TargetProperty="Opacity"

                                    From="1" To="0" Duration="0:0:10">

                    </DoubleAnimation>

                </Storyboard>

           </BeginStoryboard>

       </EventTrigger>

       <EventTrigger SourceName="cmdPause"RoutedEvent="Button.Click">

           <PauseStoryboard BeginStoryboardName="storyboardbegin">

           </PauseStoryboard>

       </EventTrigger>

       <EventTrigger SourceName="cmdResume"RoutedEvent="Button.Click">

           <ResumeStoryboard BeginStoryboardName="storyboardbegin">

           </ResumeStoryboard>

       </EventTrigger>

       <EventTrigger SourceName="cmdStop"RoutedEvent="Button.Click">

           <StopStoryboard BeginStoryboardName="storyboardbegin">

           </StopStoryboard>

       </EventTrigger>

       <EventTrigger SourceName="cmdMiddle"RoutedEvent="Button.Click">

           <SeekStoryboard BeginStoryboardName="storyboardbegin"Offset="0:0:5">

           </SeekStoryboard>

       </EventTrigger>

   </Window.Triggers>

   <Grid>

       <Image Name="pic1"Source="pic1.jpg"></Image>

       <Image Name="pic2"Source="pic2.jpg"></Image>

       <StackPanel Orientation="Horizontal" Height="30"Width="Auto" VerticalAlignment="Bottom"HorizontalAlignment="Center" Margin="5">

           <Button Name="cmdStart">Start</Button>

           <Button Name="cmdPause">Pause</Button>

           <Button Name="cmdResume">Resume</Button>

           <Button Name="cmdStop">Stop</Button>

           <Button Name="cmdMiddle">Middle</Button>

       </StackPanel>

       <ProgressBar Name="progressbar"HorizontalAlignment="Center" Height="20"Margin="10" VerticalAlignment="Top" Width="200"Value="0" Minimum="0" Maximum="1"/>

</Grid>

 

private voidstoryboard_CurrentTimeInvalidated(object sender, EventArgs e)

        {

            Clock storyboardclock =(Clock)sender;

            if (storyboardclock.CurrentProgress== null)

            {

                progressbar.Value = 0;

            }

            else

            {

                progressbar.Value =(double)storyboardclock.CurrentProgress;

            }

        }

说明：

1.控制故事板的动作类包括：BeginStoryboard、PauseStoryboard、ResumeStoryboard、StopStoryboard、SeekStoryboard等。

2.监视动画进度使用代码实现，故事板的当前时间向前移动时触发

CurrentTimeInvalidated事件，通过故事板的CurrentProgress属性获取当前的进度（0到1）。

15.4实现动画缓动效果

<Window.Triggers>
        <EventTrigger SourceName="Button1" RoutedEvent="Button.Click">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Button1" Storyboard.TargetProperty="(Canvas.Top)" To="150" Duration="0:0:10">
                        <DoubleAnimation.EasingFunction>
                            <ElasticEase EasingMode ="EaseOut" Oscillations="10"></ElasticEase>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
            
        </EventTrigger>
    </Window.Triggers>
    <Canvas>
        <Button Name="Button1" Canvas.Left="200" Canvas.Top="50" Height="50" Width="50" VerticalAlignment="Center" HorizontalAlignment="Center">Button
        </Button>
    </Canvas>

说明：

1.动画缓动效果使得动画不再是线性执行，而是按照某个定义的动画函数来变化。

2.WPF提供了多种缓动效果，ElasticEase是摆动效果，就像皮球从高处落地再弹起再落地这样反复的过程。

3.EaseIn和EaseOut表示在缓动效果是先缓后急还是先急后缓。

4.其它的缓动效果有：BackEase、BounceEase、CircleEase、CubicEase、ElasticEase、PowerEase、SineEase等。