zoukankan      html  css  js  c++  java
  • 十三、“自己”的动画——按钮

    单一动画

    第一步:在XAML文件中

    (1)需要动画的控件加上 

    <Button Content="Button" HorizontalAlignment="Left" Margin="681,128,0,0" VerticalAlignment="Top" Width="166" Height="87" x:Name="btn" Click="btn_Click">

    //动画可以有变换可投射
                <Button.RenderTransform>
                    <ScaleTransform x:Name="st" ></ScaleTransform>
                </Button.RenderTransform>
                  </Button>

    (2)加Resources

    <Page.Resources>
            <Storyboard x:Name="sb">

    //动画有好多种,可任意选择合适的。此处用的是DoubleAnimation。
                <DoubleAnimation Storyboard.TargetName="st"          //给哪个控件加动画
                                  Storyboard.TargetProperty="ScaleX"         //给控件的哪个属性加动画
                                 From="0" To="3"></DoubleAnimation>     //属性值的变化
            </Storyboard>
        </Page.Resources>

    第二步:在.cs文件中

    在点击事件处添加代码: sb.Begin();

    复合动画

    第一步:在XAML文件中

    (1)需要动画的控件加上 

    <Button Content="Button" HorizontalAlignment="Left" Margin="681,128,0,0" VerticalAlignment="Top" Width="166" Height="87" x:Name="btn" Click="btn_Click">

    //动画可以有变换可投射

                <Button.RenderTransform>

                    <ScaleTransform x:Name="st" ></ScaleTransform>

                </Button.RenderTransform>

               <Button.Projection>
                    <PlaneProjection x:Name="pp"></PlaneProjection>
                </Button.Projection>

                  </Button>

    (2)加Resources

    <Page.Resources>

            <Storyboard x:Name="sb">

    //动画有好多种,可任意选择合适的。此处用的是DoubleAnimation。

                <DoubleAnimation Storyboard.TargetName="st"          //给哪个控件加动画

                                          Storyboard.TargetProperty="ScaleX"         //给控件的哪个属性加动画

                                            From="0" To="3"></DoubleAnimation>     //属性值的变化

            </Storyboard>

            <Storyboard x:Name="sb1">

                <DoubleAnimation   Storyboard.TargetName="pp"

                                       Storyboard.TargetProperty="RotationY"  

                                      From="0" To="180">

                </DoubleAnimation>

            </Storyboard>

        </Page.Resources>

    也可放在一个Storyboard标签下,即

      <Page.Resources>
            <Storyboard x:Name="sb">
                <DoubleAnimation Storyboard.TargetName="st"
                                  Storyboard.TargetProperty="ScaleX"
                                 From="0" To="3" RepeatBehavior="2x">
                   
                </DoubleAnimation>
                <DoubleAnimation   Storyboard.TargetName="pp"
                                       Storyboard.TargetProperty="RotationY"
                                       From="0" To="180" Duration="00:00:07">
                </DoubleAnimation>
            </Storyboard>
        </Page.Resources>

    第二步:在.cs文件中

    在点击事件处添加代码: sb.Begin();

                                    sb1.Begin();

    说明:(1)如果有两个或多个动画,那么这些动画是一起播放、同时进行的,没有先后顺序。

              (2)设置动画的播放时间,默认是1秒。在DoubleAnimation  标签下加上属性Duration即可。例如用7秒完成   : Duration="00:00:07"

             (3)自动播放,即将动画播放一边之后,再反向播放一边,回到原来的状态。默认是将动画播放一边后结束。在DoubleAnimation  标签下加上AutoReverse=“true”即可。

            (4)动画重复播放的次数,默认是播放一次的。在DoubleAnimation  标签下加上属性RepeatBehavior即可,如果想重复三次,则设置为3x。

             (5) 动画按照次序播放,默认是同时播放的。在DoubleAnimation  标签下加上属性Completed即可。如果播放完此动画,播放动画sb1。首先给DoubleAnimation加事件处理程序Completed。然后,在这个方法中加上 sb1.Begin();即可。

            (5)除了DoubleAnimation  之外,还有很多其他的动画效果,这些动画都从TimeLine类继承而来,都有属性Duration、AutoReverse、RepeatBehavior、Completed事件(播放完成)、 BeginTime(延迟播放,不是立即播放)。

  • 相关阅读:
    [Android Samples视频系列之ApiDemos] AppActivityReceive Result
    【Android每日一讲】2012.11.19 我同意条款 CheckBox的isChecked属性
    Android中得到SharedPreference全面总结
    【Android每日一讲】2012.11.27 向左或向右 RadioGroup组与onCheckedChanged事件
    [Android Samples视频系列之ApiDemos] AppActivityReorder Activities
    Lc.exe已退出,代码为1
    反射和委托的两个例子
    数据库日志太大如何快速删除
    Spring.NET环境搭建之基础篇(收藏、学习)
    软件工程之编程规范
  • 原文地址:https://www.cnblogs.com/suinuaner/p/thirteen1.html
Copyright © 2011-2022 走看看