win8开发-Xaml学习笔记三

12.动画

1）StoryBoard

eg：添加一个button控件，使其x轴方向上伸缩

  <Button Content="Button" HorizontalAlignment="Left" Height="71" Margin="85,45,0,0" VerticalAlignment="Top" Width="134" Click="Button_Click_1">
            <Button.RenderTransform>
                <ScaleTransform x:Name="st1"></ScaleTransform>
            </Button.RenderTransform>
            <Button.Projection>
                <PlaneProjection x:Name="pp1" RotationY="30"></PlaneProjection>
            </Button.Projection>
        </Button>

UIElement.RenderTransform 属性。获取或设置变换影响此元素的呈现位置的信息。 这是一个依赖项属性。 http://msdn.microsoft.com/zh-cn/library/vstudio/system.windows.uielement.rendertransform.aspx

<Page.Resources>
        <Storyboard x:Name="sb1">//当动画启动的时候，让ScaleX的值从0变化到3
            <DoubleAnimation Storyboard.TargetName="st1" 
                                          Storyboard.TargetProperty="ScaleX"
                                          From="0" To="3">
                
            </DoubleAnimation>
        </Storyboard>       
</Page.Resources>

DoubleAnimation 在指定的 Duration 内使用线性内插对两个目标值之间的 Double 值进行动画处理。DoubleAnimation 对象可创建两个目标值之间的过渡。 若要设置目标值，请使用对象的 From、To 和 By 属性。

From 和To

表示动画从 From 属性的值继续到 To 属性的值。http://msdn.microsoft.com/zh-cn/library/bb979715(v=VS.95).aspx

 private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            sb1.Begin();
        }

 再添加一个storyboard，使其在Y轴上360度旋转

<Storyboard x:Name="sb2">
            <DoubleAnimation Storyboard.TargetName="pp1" 
                                          Storyboard.TargetProperty="RotationY"
                                          From="0" To="360"></DoubleAnimation>
        </Storyboard>

<Button.Projection>
                <PlaneProjection x:Name="pp1" RotationY="30"></PlaneProjection>
            </Button.Projection>
        </Button>

UIElement.Projection 属性。获取或设置在呈现此 UIElement 时要应用的透视投影（三维效果）。http://msdn.microsoft.com/zh-cn/library/system.windows.uielement.projection(v=VS.95).aspx

 Storyboard的其他一些属性:

  Duration="00:00:03"变化时间控制在三秒 <!--Storyboard变化时间默认一秒钟-->
  AutoReverse="True"自动从0到3，再从3到0(自动反向播放)
  RepeatBehavior="Forever"永远重复播放（在不需要的时候尽快停止，否则可能会导致计算机无法进入省电模式），如果要重复三次则设置为“3x”

   除了DoubleAnimation外，还有很多其他动画，均从TimeLine类继承，均有的属性AutoReverse、RepeatBehavior、Duration、BeginTime（延迟播放）和Completed事件（播放完成）等。 

   指定EasingFunction属性可以设定动画的缓动曲线。

<DoubleAnimation.EasingFunction>
                    <BounceEase></BounceEase>
                </DoubleAnimation.EasingFunction>

//点击按钮，弹簧弹出效果。

动画缩放播放效果

//Storyboard放多个DoubleAnimation时，动画执行是同时进行，不分先后
        <Storyboard x:Name="sbGuan2">           
            <DoubleAnimation Storyboard.TargetName="stGuan2"
                                          Storyboard.TargetProperty="ScaleX"
                                          From="1" To="3"></DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="stGuan2"
                                          Storyboard.TargetProperty="ScaleY"
                                          From="1" To="3"></DoubleAnimation>
        </Storyboard>

 此时X轴方向的缩放和Y轴方向的缩放时同时进行的。

private void imgGuan2_Tapped(object sender, TappedRoutedEventArgs e)
        {
            sbGuan2.Begin();   
        }

如果，想要先进行X轴方向上的缩放，再进行Y轴方向上的缩放，则要做如下改变。

 <Storyboard x:Name="sbGuan2_1" Completed="sbGuan2_1_Completed">//Completed="sbGuan2_1_Completed"，指当sbGuan2_1执行后再执行之后的任务
            <DoubleAnimation Storyboard.TargetName="stGuan2"
                                          Storyboard.TargetProperty="ScaleX"
                                          From="1" To="3"></DoubleAnimation>        
        </Storyboard>
        <Storyboard x:Name="sbGuan2_2" >           
            <DoubleAnimation Storyboard.TargetName="stGuan2"
                                          Storyboard.TargetProperty="ScaleY"
                                          From="1" To="3"></DoubleAnimation>
        </Storyboard>

 private void imgGuan2_Tapped(object sender, TappedRoutedEventArgs e)
        {
            //sbGuan2.Begin();
            sbGuan2_1.Begin();
        }

        private void sbGuan2_1_Completed(object sender, object e)
        {
            sbGuan2_2.Begin();//在2_1播放完之后再播放2_2
        }

还有其他属性，见silverlight之easing。

2）图片翻转

eg:点击图片一，使其从0转到90，然后图片二从90转到0

<Page.Resources>
        <Storyboard x:Name="sbPP1" Completed="sbPP1_Completed">
            <DoubleAnimation Storyboard.TargetName="ppImg"
                                          Storyboard.TargetProperty="RotationX"
                                           From="0" To="90"></DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="sbPP2">
            <DoubleAnimation Storyboard.TargetName="ppImg"
                                          Storyboard.TargetProperty="RotationX"
                                           From="90" To="0"></DoubleAnimation>
        </Storyboard>
    </Page.Resources>

<Image x:Name="imgMM" Source="ms-appx:///Image/1b.jpg" HorizontalAlignment="Left" Height="226" Margin="184,193,0,0" VerticalAlignment="Top" Width="341" Tapped="Image_Tapped_1">
            <Image.Projection>
                <PlaneProjection x:Name="ppImg" ></PlaneProjection>
            </Image.Projection>
        </Image>

Tapped="Image_Tapped_1"用到了Image中的Tapped

 private void sbPP1_Completed(object sender, object e)
        {
            imgMM.Source = new BitmapImage(new Uri("ms-appx:///Image/2b.jpg"));//不能用“Image/2b.jpg" 
            //要访问存储在应用程序包中的文件，但是从没有任何基文档 URI 的代码中访问，请指定 ms-appx: 架构。  
            sbPP2.Begin();
        }

        private void Image_Tapped_1(object sender, TappedRoutedEventArgs e)
        {
            sbPP1.Begin();
        }

 3)Button中动态添加元素

 eg:点击button,往stackpanel中添加元素

  private void btn1_Click(object sender, RoutedEventArgs e)
        {
            Button btn = new Button();
            btn.Content = DateTime.Now;
            sp1.Children.Add(btn);
        }

 4)Transition

 eg:改变stackpanel中孩子的效果(StackPanel.ChildrenTransitions)

 <StackPanel.ChildrenTransitions>
                <TransitionCollection>//这个别忘记写！
                    //<AddDeleteThemeTransition></AddDeleteThemeTransition渐渐出现添加删除效果,而不是一点击就产生效果
                    //<ContentThemeTransition></ContentThemeTransition>效果从右向左出现
                    <EntranceThemeTransition></EntranceThemeTransition>//不同特效
                </TransitionCollection>
            </StackPanel.ChildrenTransitions>
        </StackPanel>

如果改变page本身的效果,则不用加children

<Page.Transitions>
         <TransitionCollection>
             <EntranceThemeTransition></EntranceThemeTransition>
         </TransitionCollection>
  </Page.Transitions>