动画缓动

线性动画有一个缺点，通常让人觉得机械和不够自然（图1、图2）。改进动画并创建更趋自然的动画的秘诀是改变变化速率。不是创建以固定不变的速率改变属性的动画，而是需要设计根据某种方式加速或减速的动画，实现更趋自然的动画的最简单方法是使用预置的缓动函数(EasingFunction)。EasyingFunction属性只能接受单个缓动函数对象，所以不能为同一个动画结合不同的缓动函数。

图1

 

图2

 

图1、图2分别是一个简单的事件触发器和一个简单的同步动画，这里就是拿来做一个对比。这两个动画都有一点不够自然，没有那种顺滑的感觉。下面就整一个有那种顺滑的感觉的缓动动画。

 

代码：

<Window.Resources>

        <Style TargetType="Button">

            <Style.Triggers>

                <EventTrigger RoutedEvent="Click">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard Storyboard.TargetProperty="Width">

                                <DoubleAnimation To="300" Duration="0:0:5">

                                    <!--使用缓动函数-->

                                    <DoubleAnimation.EasingFunction>

                                        <!--设置缓动模式和振荡次数-->

                                        <ElasticEase EasingMode="EaseOut" Oscillations="5"></ElasticEase>

                                    </DoubleAnimation.EasingFunction>

                                </DoubleAnimation>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Style.Triggers>

        </Style>

    </Window.Resources>

    <Grid>

        <Button Width="150" Height="50" Content="缓动动画" FontSize="20"></Button>

    </Grid>

 

效果：