Windows Phone开发（42）：缓动动画 from：http://blog.csdn.net/tcjiaan/article/details/7588637

前面在讨论关键帧动画的时候，我有意把几个带缓动动画的关键帧动画忽略掉，如EasingColorKeyFrame、EasingDoubleKeyFrame和EasingPointKeyFrame，其实为数不多，就这么几个。因为我希统一放到这节课程来吹一下缓动函数。

所谓缓动函数，就是我们在代数里面说的函数，说白了嘛，就是根特定的函数规则，用输入的值算出最终值，使得动画在两个关键帧之间不再是均衡过度，而是带有加/减速或其他效果，当然，还要取决于算法。

比如函数

所以，我们看出来了，缓动函数涉及复杂的数学运算，不过，灰常幸运的是，常用的缓函数MS已经为我们封装好了，这也是从WPF/Silverlight中迁移到WP的，集成性兼容性MD的好，所以，在使用的时候，大家可以轻松一大把了，因此，当你在练习的时候，记得冲一杯咖啡放在桌上，一边写代码一边品尝吧。呵呵，编程快乐，快乐编程。

如果你干过WPF或SL，这些东西你会觉得灰常Easy，我不是第一次强调了，所以说，基础很重要，把基础扎实了，无论你学习什么新玩意儿，都可以一通百通的，不管你信不信，反正我信了。

如何你对缓动函数没有一个直观的认识也不要紧，下面推荐大家一个游戏，很好玩的，不玩你学WP会后悔的。游戏地址：http://samples.msdn.microsoft.com/Silverlight/silverlight_next/Animations/easing_functions_gallery/testpage.html

记住要认真玩，这样你才会熟悉缓动函数与相关的类。

某致理名言说得好，“自己动手，丰衣足食”，还是老规矩，实例决定一切，动手干活吧。

演练一、请参考以下XAML代码构建你的UI。

[html] view plaincopyprint?
  1. <Grid Loaded="gridLoaded">  
  2.     <Ellipse HorizontalAlignment="Left"  
  3.              VerticalAlignment="Top"  
  4.              Fill="Orange"  
  5.              Width="100"  
  6.              Height="100"  
  7.              x:Name="elp">  
  8.         <Ellipse.RenderTransform>  
  9.             <TranslateTransform x:Name="trm"/>  
  10.         </Ellipse.RenderTransform>  
  11.     </Ellipse>  
  12.       
  13.     <Grid.Resources>  
  14.         <Storyboard x:Name="std">  
  15.             <DoubleAnimationUsingKeyFrames Duration="0:0:8"  
  16.                                            Storyboard.TargetName="trm"  
  17.                                            Storyboard.TargetProperty="Y"  
  18.                                            RepeatBehavior="30">  
  19.                 <LinearDoubleKeyFrame KeyTime="0:0:0" Value="0"/>  
  20.                 <EasingDoubleKeyFrame KeyTime="0:0:8" Value="485">  
  21.                     <EasingDoubleKeyFrame.EasingFunction>  
  22.                         <BounceEase Bounciness="3" Bounces="3"/>  
  23.                     </EasingDoubleKeyFrame.EasingFunction>  
  24.                 </EasingDoubleKeyFrame>  
  25.             </DoubleAnimationUsingKeyFrames>  
  26.         </Storyboard>  
  27.     </Grid.Resources>  
  28. </Grid>  


后台C#代码启用动画。

[csharp] view plaincopyprint?
  1. private void gridLoaded(object sender, RoutedEventArgs e)  
  2. {  
  3.     this.std.Begin();  
  4. }  


现在，运行上面的示例，你会发现圆在下落的过程发生了两次回弹，动画才结束，而且一开始较慢，后来渐渐加速，这就是缓动函数所产生的效果。

演练二。

参考以下XAML代码创建UI界面。

[html] view plaincopyprint?
  1. <Grid Loaded="gridLoaded">  
  2.     <Rectangle Margin="35" x:Name="rec">  
  3.         <Rectangle.Fill>  
  4.             <LinearGradientBrush x:Name="brs" StartPoint="0,0.5" EndPoint="1,0.5">  
  5.                 <GradientStop Color="Blue" Offset="0"/>  
  6.                 <GradientStop Color="Yellow" Offset="0.5"/>  
  7.                 <GradientStop Color="Blue" Offset="1"/>  
  8.             </LinearGradientBrush>  
  9.         </Rectangle.Fill>  
  10.     </Rectangle>  
  11.       
  12.     <Grid.Resources>  
  13.         <Storyboard x:Name="std">  
  14.             <DoubleAnimationUsingKeyFrames Duration="0:0:10"  
  15.                                            Storyboard.TargetName="brs"  
  16.                                            Storyboard.TargetProperty="(LinearGradientBrush.GradientStops)[1].(GradientStop.Offset)"  
  17.                                            RepeatBehavior="35"  
  18.                                            AutoReverse="True">  
  19.                 <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0.2"/>  
  20.                 <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0.8">  
  21.                     <EasingDoubleKeyFrame.EasingFunction>  
  22.                         <ElasticEase Oscillations="4" Springiness="1"/>  
  23.                     </EasingDoubleKeyFrame.EasingFunction>  
  24.                 </EasingDoubleKeyFrame>  
  25.             </DoubleAnimationUsingKeyFrames>  
  26.         </Storyboard>  
  27.     </Grid.Resources>  
  28. </Grid>  


 

在gridLoaded上右击，从弹出的菜单中选择“导航到事件处理程序”，在生成的方法中完成以下C#代码。

[csharp] view plaincopyprint?
  1. private void gridLoaded(object sender, RoutedEventArgs e)  
  2. {  
  3.     std.Begin();  
  4. }  


 

运行程序后，你会看到渐变填充中间黄色的色块在左右来回移动。

演练三：

请参照以下XAML建立UI。

[html] view plaincopyprint?
  1. <phone:PhoneApplicationPage   
  2.     x:Class="Sample.Page3"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"  
  6.     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"  
  7.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  8.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  9.     FontFamily="{StaticResource PhoneFontFamilyNormal}"  
  10.     FontSize="{StaticResource PhoneFontSizeNormal}"  
  11.     Foreground="{StaticResource PhoneForegroundBrush}"  
  12.     SupportedOrientations="Portrait" Orientation="Portrait"  
  13.     mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"  
  14.     shell:SystemTray.IsVisible="True">  
  15.   
  16.     <!--LayoutRoot 是包含所有页面内容的根网格-->  
  17.     <Grid x:Name="LayoutRoot" Background="Transparent">  
  18.         <Grid.RowDefinitions>  
  19.             <RowDefinition Height="Auto"/>  
  20.             <RowDefinition Height="*"/>  
  21.         </Grid.RowDefinitions>  
  22.   
  23.         <!--TitlePanel 包含应用程序的名称和页标题-->  
  24.         <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">  
  25.             <TextBlock x:Name="ApplicationTitle" Text="我的应用程序" Style="{StaticResource PhoneTextNormalStyle}"/>  
  26.             <TextBlock x:Name="PageTitle" Text="页面名称" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>  
  27.         </StackPanel>  
  28.   
  29.         <!--ContentPanel - 在此处放置其他内容-->  
  30.         <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">  
  31.             <Rectangle HorizontalAlignment="Left" VerticalAlignment="Bottom"  
  32.                        Width="60" Height="45" Fill="White"  
  33.                        MouseLeftButtonDown="onShow"/>  
  34.             <TextBlock HorizontalAlignment="Center"  
  35.                        VerticalAlignment="Center"  
  36.                        Text="请点击左下角的白色矩形。"  
  37.                        TextWrapping="Wrap"  
  38.                        Margin="30,0,40,0"  
  39.                        FontSize="45"/>  
  40.             <StackPanel x:Name="sp" Background="LightBlue"  
  41.                         Height="180"  
  42.                         VerticalAlignment="Bottom">  
  43.                 <TextBlock Foreground="Red"   
  44.                            Margin="20,22,20,20"  
  45.                            FontSize="32"  
  46.                            Text="你好，点击下面的按钮吧。"/>  
  47.                 <Button Content="确    定" Background="Blue"  
  48.                         Click="onHide"/>  
  49.                 <StackPanel.RenderTransform>  
  50.                     <TranslateTransform x:Name="trm"  
  51.                                         Y="180"/>  
  52.                 </StackPanel.RenderTransform>  
  53.             </StackPanel>  
  54.               
  55.             <Grid.Resources>  
  56.                 <Storyboard x:Name="stdShow">  
  57.                     <DoubleAnimationUsingKeyFrames  
  58.                         Storyboard.TargetName="trm"  
  59.                         Storyboard.TargetProperty="Y"  
  60.                         Duration="1">  
  61.                         <EasingDoubleKeyFrame  
  62.                             KeyTime="0:0:0" Value="180"/>  
  63.                         <EasingDoubleKeyFrame  
  64.                             KeyTime="0:0:1" Value="0">  
  65.                             <EasingDoubleKeyFrame.EasingFunction>  
  66.                                 <PowerEase Power="10"/>  
  67.                             </EasingDoubleKeyFrame.EasingFunction>  
  68.                         </EasingDoubleKeyFrame>  
  69.                     </DoubleAnimationUsingKeyFrames>  
  70.                 </Storyboard>  
  71.                   
  72.                 <Storyboard x:Name="stdHide">  
  73.                     <DoubleAnimationUsingKeyFrames  
  74.                         Duration="0:0:1"  
  75.                         Storyboard.TargetName="trm"  
  76.                         Storyboard.TargetProperty="Y">  
  77.                         <EasingDoubleKeyFrame KeyTime="0:0:0"  
  78.                                               Value="0"/>  
  79.                         <EasingDoubleKeyFrame KeyTime="0:0:1"  
  80.                                               Value="180">  
  81.                             <EasingDoubleKeyFrame.EasingFunction>  
  82.                                 <PowerEase Power="10"/>  
  83.                             </EasingDoubleKeyFrame.EasingFunction>  
  84.                         </EasingDoubleKeyFrame>  
  85.                     </DoubleAnimationUsingKeyFrames>  
  86.                 </Storyboard>  
  87.             </Grid.Resources>  
  88.         </Grid>  
  89.     </Grid>  
  90. </phone:PhoneApplicationPage>  


分别在onShow和onHide方法上右击，从弹出的菜单中选择“导航到事件处理程序”，完成后台代码逻辑。

[csharp] view plaincopyprint?
  1. private void onShow(object sender, MouseButtonEventArgs e)  
  2. {  
  3.     if (stdHide.GetCurrentState() != ClockState.Stopped)  
  4.     {  
  5.         stdHide.Stop();  
  6.     }  
  7.     stdShow.Begin();  
  8. }  
  9.   
  10. private void onHide(object sender, RoutedEventArgs e)  
  11. {  
  12.     if (stdShow.GetCurrentState() != ClockState.Stopped)  
  13.     {  
  14.         stdShow.Stop();  
  15.     }  
  16.     stdHide.Begin();  
  17. }  


 

现在，运行程序，单击屏幕左下方的白色矩形，这时候屏幕下方会弹出一个面板，再点击面板上的按钮，面板会缩下去。

这样，使用动画，我们就做出了一个类似工具条的效果。

     

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/songtzu/p/2672407.html