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="100"
                                To="500"
                                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="100"
                                To="500"
                                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

BackEase EasingMode 图表。

BounceEase

BounceEase EasingMode 图表。

CircleEase

CircleEase EasingMode 图表。

CubicEase

CubicEase EasingMode 图表。

ElasticEase

具有不同 easingmode 图表的 ElasticEase。

ExponentialEase

具有不同 easingmode 图表的 ExponentialEase。

QuadraticEase

具有不同 easingmode 图表的 QuadraticEase。

QuarticEase

具有不同 easingmode 图表的 QuarticEase。

QuinticEase

具有不同 easingmode 图表的 QuinticEase。

SineEase

SineEase 图形。

原文地址:https://www.cnblogs.com/xdoudou/p/4238474.html