前面我们已经说过一些做动画的方法,但是需要指出的是,我们以前用Timer做的动画,没有调优的空间,他的播放频率永远是定死在了你的代码里面,而且当笔记本或平板电脑没有电的时候,操作系统会自动帮我们调慢动画的播出频率,这点,是以前的Timer做不到的,所以这里引出了Storyboard这个东西

首先定义一个按钮,定义了两个动画事件

        <Button Content="aaa" Margin="20,30,0,0" Click="Button_Click_1" >
            <Button.RenderTransform>
                <ScaleTransform ScaleX="3" x:Name="st1"></ScaleTransform>
            </Button.RenderTransform>
            <Button.Projection>
                <PlaneProjection x:Name="pp1" RotationY="30"></PlaneProjection>
            </Button.Projection>
        </Button>

然后再资源文件中定义动画的样式

复制代码
 <Page.Resources>

        <!--
            此页所显示的分组项的集合,绑定到完整
            项列表的子集,因为无法虚拟化组中的项
        -->
        <Storyboard x:Name="sb1">
            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" From="0" To="3" Duration="00:00:03" AutoReverse="True" RepeatBehavior="Forever"></DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="sb2">
            <DoubleAnimation Storyboard.TargetName="pp1" Storyboard.TargetProperty="RotationY" From="0" To="360">
                <DoubleAnimation.EasingFunction>
                    <BackEase></BackEase>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
复制代码

其中Duration为动画多少时间执行完毕,AutoReverse为自动反向运行,即自动从3再变成0,RepeatBehavior表示重复次数,2X,3X,Forever

BackEase为弹性效果,即变成3时先到达3.2再回到3。

还有其他的一些变幻曲线,都在 <DoubleAnimation.EasingFunction>下面做定义。(BounceEase弹性拉伸效果)

 

 

最后,我们去触发这个事件

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            sb1.Begin();
            sb2.Begin();
            //这里面的两个动画是一起播放的
        }

注意,资源文件里面用的是X:NAME,不是Key,这个是StoryBoard的特殊用法

 

动画的顺序播放

        <Storyboard x:Name="sb3">
            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" From="1" To="3"></DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleY" From="1" To="3"></DoubleAnimation>
        </Storyboard>
        <Button Content="aaa" Margin="20,30,0,0" Click="Button_Click_1" >
            <Button.RenderTransform>
                <ScaleTransform  x:Name="st1"></ScaleTransform>
            </Button.RenderTransform>
        </Button>

这里需要注意下面BUTTON的定义,并没有指明在那个方向进行缩放,而且这样的一个动画的两个DOUBLEANIMATION是同时执行的,如果希望他顺序执行,则需要注册Completed事件

  <Storyboard x:Name="sb3" Completed="sb3_Completed_1">
            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleY" From="1" To="3"></DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="sb4">
            <DoubleAnimation Storyboard.TargetName="st1" Storyboard.TargetProperty="ScaleX" From="1" To="3"></DoubleAnimation>
        </Storyboard>
复制代码
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
          //  sb1.Begin();
            sb3.Begin();
            //这里面的两个动画是一起播放的
        }

        private void sb3_Completed_1(object sender, object e)
        {
            sb4.Begin();
        }
复制代码

 当我们动态的往容器里面添加控件或内容时,以前都是很死板的直接往容器里面加,现在WIN8加入了动画的效果,之主要在容器上注明一下就可以了

<stackpanel>

  <stackpanel.childrentransitions>

    <transitioncollectin>

      <adddeletethemtransition>(这个有很多效果,可以自己去试)

 还有就是当页面自己需要动画效果显示

在头部加上

<page.transitions>

  <transitioncollection>

    <entrancethemetransition>(这个有很多效果,可以自己去试)

      

posted on   振宇爸爸  阅读(286)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示