3.WP8.1开发_为控件增加动画

示例:

把一个按钮的宽度从100变到500

根据WPF的经验，会把代码写成如下:

<Grid>
        <Button x:Name="btn" Content="Button" HorizontalAlignment="Left" Margin="167,236,0,0" VerticalAlignment="Top">
            <Button.Triggers>
                <EventTrigger>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="btn"
                                Storyboard.TargetProperty="Width"
                                From=""
                                To=""
                                Duration="0:0:5"
                                ></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>

但是运行起来却没有效果，也不报错。

后来 加入 EnableDependentAnimation="True" 属性之后 就出现效果了。

代码:

  <Grid>
        <Button x:Name="btn" Content="Button" HorizontalAlignment="Left" Margin="167,236,0,0" VerticalAlignment="Top">
            <Button.Triggers>
                <EventTrigger>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="btn"
                                Storyboard.TargetProperty="Width"
                                From=""
                                To=""
                                Duration="0:0:5"
                                EnableDependentAnimation="True"
                                ></DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

    </Grid>

查了一下原因，好像是因为:

Animation只对某个值(依赖属性)感兴趣,而其实对动画的实现不感兴趣,或者说,你有计划地改变某个值完全可以不是为了动画,所以,Animation一般在其他的线程下执行(非UI线程)，为的是UI线程可以响应用户的操作。然而，我们当前的操作是为了动画，大家知道，在非UI线程中不能直接去修改在UI线程中创建的控件属性(抛异常)，因为它的改变会引起布局的重新刷新,即非UI线程直接修改了界面,这显然是不可取的。WinRT不希望animation运行在UI线程中,但是为了让动画代码能在UI线程下运行,你必须将DoubleAnimation的EnableDependentAnimation设置为True,来告诉WinRT这个动画是依赖于UI线程才能达到代码目的的(dependent on the user interface thread)。

下图显示了 EasingMode 的不同值，其中 f(t) 表示动画进度，而 t 表示时间。

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

QuadraticEase

QuarticEase

QuinticEase

SineEase