Windows Phone开发(41):漫谈关键帧动画之下篇 转:http://blog.csdn.net/tcjiaan/article/details/7573396

也许大家已经发现,其实不管什么类型的动画,使用方法基本是一样的,不知道大家总结出规律了没有?当你找到规律之后,你会发现真的可以举一反六的,不骗你。

为了能帮助大家找到规律,今天,我们再来写两个例子。

一、DiscreteObjectKeyFrame

简单介绍一下这个吧,它只是为了方便我们进行一些大的切换而提供,但它也不是万能的,尽管它的目标类型是object类型,前提是它与其它动画一样,只能针对某对象的某属性进行动画处理。与Flash相比,Silverlight是少了一些灵活性,但我们知道,毕竟Silverlight并不是真的为了做动画而诞生的,微软推出它的意义是用于企业级应用。而所谓的对多媒体支持或动画之类,是为了提供更好的用户体验罢了,不要真把它当成娱乐专用哦。

好,F话就说到这里,下面开始练习,首先你可以参照下面XAML代码完成前台布局,随便你写在哪,反正你找到Grid控件当容器就行了。练习嘛也是很灵活的,我从来不会对大家做死搬硬套的要求。

  1. <Grid>  
  2.     <Rectangle x:Name="rec" Margin="100,200" Loaded="rec_Loaded"/>  
  3.       
  4.     <Grid.Resources>  
  5.         <Storyboard x:Name="std">  
  6.             <ObjectAnimationUsingKeyFrames  
  7.                 Duration="0:0:8"  
  8.                 Storyboard.TargetName="rec"  
  9.                 Storyboard.TargetProperty="Fill"  
  10.                 RepeatBehavior="Forever">  
  11.                 <DiscreteObjectKeyFrame KeyTime="0:0:0">  
  12.                     <DiscreteObjectKeyFrame.Value>  
  13.                         <SolidColorBrush Color="Blue"/>  
  14.                     </DiscreteObjectKeyFrame.Value>  
  15.                 </DiscreteObjectKeyFrame>  
  16.                 <DiscreteObjectKeyFrame KeyTime="0:0:3">  
  17.                     <DiscreteObjectKeyFrame.Value>  
  18.                         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">  
  19.                             <GradientStop Color="Red" Offset="0"/>  
  20.                             <GradientStop Color="Yellow" Offset="0.5"/>  
  21.                             <GradientStop Color="Purple" Offset="1"/>  
  22.                         </LinearGradientBrush>  
  23.                     </DiscreteObjectKeyFrame.Value>  
  24.                 </DiscreteObjectKeyFrame>  
  25.                 <DiscreteObjectKeyFrame KeyTime="0:0:5">  
  26.                     <DiscreteObjectKeyFrame.Value>  
  27.                         <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">  
  28.                             <GradientStop Color="Snow" Offset="0"/>  
  29.                             <GradientStop Color="Green" Offset="1"/>  
  30.                         </RadialGradientBrush>  
  31.                     </DiscreteObjectKeyFrame.Value>  
  32.                 </DiscreteObjectKeyFrame>  
  33.             </ObjectAnimationUsingKeyFrames>  
  34.         </Storyboard>  
  35.     </Grid.Resources>  
  36. </Grid>  


上面代码中,我们定义了一个rec_Loaded事件处理程序,目的是启动动画,所以,在上面代码中的rec_Loaded处单击右键,从弹出的菜单中选择“导航到事件处理程序”,这样就生成了一个事件处理方法rec_Loaded了,接着我们在这里开始播放动画。

  1. private void rec_Loaded(object sender, RoutedEventArgs e)  
  2. {  
  3.     this.std.Begin();  
  4. }  


 

现在请你调试运行,观赏一下效果吧。

二、LinearPointKeyFrame

这个东西大家一定熟悉,就是对两个点之间进行动画,前面的例子有,但这是关键帧动画,也就是说可以在N个点间产生动画,使用XAML时,它是PointAnimationUsingKeyFrames的子元素。

请参考下面的XAML代码构建UI界面。

  1. <Grid>  
  2.     <Ellipse x:Name="ell" Width="400" Height="400" Loaded="ell_Loaded">  
  3.         <Ellipse.Fill>  
  4.             <RadialGradientBrush Center="0,0.5" RadiusX="1" RadiusY="0.5">  
  5.                 <GradientStop Color="Gold" Offset="0"/>  
  6.                 <GradientStop Color="Red" Offset="1"/>  
  7.             </RadialGradientBrush>  
  8.         </Ellipse.Fill>  
  9.     </Ellipse>  
  10.     <Grid.Resources>  
  11.         <Storyboard x:Name="std">  
  12.             <PointAnimationUsingKeyFrames  
  13.                     Duration="0:0:12"  
  14.                     Storyboard.TargetName="ell"  
  15.                     Storyboard.TargetProperty="(Ellipse.Fill).(RadialGradientBrush.Center)"  
  16.                     RepeatBehavior="Forever">  
  17.                 <LinearPointKeyFrame KeyTime="0:0:3" Value="0.5,1"/>  
  18.                 <LinearPointKeyFrame KeyTime="0:0:6" Value="1,0.5"/>  
  19.                 <LinearPointKeyFrame KeyTime="0:0:9" Value="0.5,0"/>  
  20.                 <LinearPointKeyFrame KeyTime="0:0:12" Value="0,0.5"/>  
  21.             </PointAnimationUsingKeyFrames>  
  22.         </Storyboard>  
  23.     </Grid.Resources>  
  24. </Grid>  


不要忘了启动动画。

  1. private void ell_Loaded(object sender, RoutedEventArgs e)  
  2. {  
  3.     std.Begin();  
  4. }  


好,看看效果如何。

不知道大家通过练习,感觉如何,如果你WPF基础很扎实的话,我相信这些例子你根本不用看都懂了,当然,如果你是初学者,也不要被这些东西吓,如果你真想学习,哪怕理论上的东西你搞不懂(其实,理论的东西没几个人真的会懂的)也不要紧,关键是多动手,多练习。还是那句话,你会穿衣服就行了,没有人说非得要懂得怎么做衣服后才能穿衣服的。是不是这个道理呢?如果你不理解农民伯伯是怎么把菜种出来的,难道你不吃菜了不成?

原文地址:https://www.cnblogs.com/songtzu/p/2607094.html