Silverlight学习笔记--动画效果-- 关键帧动画

最新推荐文章于 2019-06-27 03:03:44 发布

蝈蝈俊

最新推荐文章于 2019-06-27 03:03:44 发布

阅读量3.7k

点赞数

分类专栏： Silverlight 文章标签： silverlight animation blend methods object class

本文链接：https://blog.csdn.net/ghj1976/article/details/5056916

版权

Silverlight 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

按照动画的形成方式，Silverlight 动画可以分为两种：

渐变风格方式（也可以叫From/To/By 动画）（确定开始和结束，然后按照一个固定的频率完成渐变）；
关键帧生成方式（设定若干中间帧，可以按照指定的节奏来变化，节奏可以忽快忽慢）；

渐变式动画的讲解请看博客： Silverlight学习笔记--动画效果-- 渐变风格方式动画本文介绍关键帧动画：

与渐变（From/To/By ）动画类似，关键帧动画以动画形式显示了目标属性的值。它通过定义其持续时间（Duration属性）创建其目标值之间的过渡。但是，与From/To/By 动画创建两个值之间的过渡不同，单个关键帧动画可以创建任意数量的目标值之间的过渡。

与 From/To/By 动画不同，关键帧动画没有设置其目标值所需的 From、To 或 By 属性。而是使用关键帧对象描述关键帧动画的目标值。若要指定动画的目标值，需要创建关键帧对象并将其添加到动画的 KeyFrames 属性。动画运行时，将在您指定的帧之间过渡。

几种关键帧动画的动画过度方法（Interpolation Methods）

关键帧动画从一帧到另外一帧，是如何过度的，这个过度策略就是 Interpolation Methods ，MSDN上的翻译竟然叫“内插方法”，我晕，翻译真垃圾。这个过度策略有三种方式：线性（linear interpolation 线性内插）、离散（Discrete Interpolation 离散内插）和样条（Splined Interpolation 样条内插）。

linear interpolation 线性

使用线性过度，指定时间段内，动画的播放速度将是固定的。比如，如果关键帧段在 5 秒内，从 0 过渡到 10，则该动画会在指定的时间产生如下表所示的值。

时间	输出值
0	0
1	2
2	4
3	6
4	8
4.25	8.5
4.5	9
5	10

Discrete Interpolation 离散

使用离散过度，动画函数将从一个值跳到下一个没有内插的值。如果关键帧段在 5 秒内从 0 过渡到 10，则该动画会在指定的时间产生如下表所示的值。动画在持续期间恰好结束之前不会更改其输出值，一直到到了时间点，才会修改。

时间	输出值
0	0
1	0
2	0
3	0
4	0
4.25	0
4.5	0
5	10

Splined Interpolation 样条

样条过度可用于达到更现实的计时效果。由于动画通常用于模拟现实世界中发生的效果，因此您可能需要精确地控制对象的加速和减速，并且需要严格地对计时段进行操作，这时你就会用到样条关键帧。样条关键帧比起其他关键帧，多一个 KeySpline 属性，用于获取或设置用于定义此关键帧的动画进度的两个控制点。

若要了解 KeySpline 的工作原理，首先需要了解三次方贝塞尔曲线。一条三次方贝塞尔曲线由一个起点、一个终点和两个控制点来定义。

KeySpline 中的两个坐标定义这两个控制点。在描述关键样条时，贝塞尔曲线的起点始终为 0，终点始终为 1，这也就是只定义两个控制点的原因。所生成的曲线指定如何在一个时间段内内插动画；也就是说，该曲线表示该时间段内动画的目标属性的变化速率。

下面是来自MSDN的演示：

<SplineDoubleKeyFrame Value="500" 
  KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
控制点为 (0.0, 1.0) 和 (1.0, 0.0) 的关键样条

上面的关键帧在开始时快速运动，再减速，然后再次加速，直到结束。

更多演示参看： http://msdn.microsoft.com/zh-cn/library/cc189038(VS.95).aspx 以及微软的演示 KeySpline 的例子，在这里可以看到：运行此示例

例子

下面我们先看一个简单例子:

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="MySilverlight3Study_Animation2.MainPage"
	Width="640" Height="480">
	<Canvas>
    <Canvas.Resources>
        <Storyboard x:Name="myStoryboard">
            
  
  
            <DoubleAnimationUsingKeyFrames
       Storyboard.TargetName="MyAnimatedTranslateTransform"
       Storyboard.TargetProperty="X"
       Duration="0:0:10">
                
  
  
                <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />

                
  
  
                <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />

                
  
  
                <SplineDoubleKeyFrame KeySpline="0.6,0.0 0.9,0.00" Value="0" KeyTime="0:0:8" />

   	        
  
  
            
  
  DoubleAnimationUsingKeyFrames>
        
   
   Storyboard>
    
    
    Canvas.Resources>

    <Rectangle MouseLeftButtonDown="Mouse_Clicked" Fill="BlueViolet"
 Width="50" Height="50">
        <Rectangle.RenderTransform>
            <TranslateTransform x:Name="MyAnimatedTranslateTransform" X="20" Y="20" />
        
     
     Rectangle.RenderTransform>
    
      
      Rectangle>
 
       Canvas>  
        UserControl>

事件代码

private void Mouse_Clicked(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
	myStoryboard.Begin();
}

例子的演示效果如下，点击方块，开始动画：

style="width: 600px; height: 100px" src="http://silverlight.services.live.com/invoke/111821/Hongjunguo%20Study%20Silverlight%20Animation%2002/iframe.html" frameborder="0" scrolling="no">

代码说明：

我们对一个正方形的进行二维坐标平移来实现动画，动画是通过分帧的方式来定义实现的。

前3秒，平滑过渡，然后停下来，一直到第4秒，突然变化，然后加速运动。

LinearDoubleKeyFrame : 通过使用线性内插，可以在前一个关键帧的 Double 值及其自己的 Value 之间进行动画处理。

DiscreteDoubleKeyFrame ：离散关键帧，在值之间产生突然"跳跃"（无内插算法）。换言之，已经过动画处理的属性在到达此关键帧的关键时间后才会更改，此时已经过动画处理的属性会突然转到目标值。

SplineDoubleKeyFrame ：通过贝塞尔曲线方式来定义动画变化节奏。详细看前面的介绍。

通过上面的代码，我们可以看到完成关键帧动画有以下3个步骤：

首先声明一个Duration对象
在每个节奏点上加入一个KeyFrame
把动画效果和元素进行绑定

不同的属性类型有不同的动画类型。关键帧动画也是类似，如下是关键帧对应的分类。

属性类型	对应的关键帧动画类	支持的动画过渡方法
Color	ColorAnimationUsingKeyFrames	离散、线性、样条
Double	DoubleAnimationUsingKeyFrames	离散、线性、样条
Point	PointAnimationUsingKeyFrames	离散、线性、样条
Object	ObjectAnimationUsingKeyFrames	离散

ObjectAnimationUsingKeyFrames 很强大，我可以可以修改元素的任何属性，下面就是一个简单的例子：

例子使用了 ObjectAnimationUsingKeyFrames 对 Rectangle 的 Fill 属性进行动画处理。此动画按如下方式使用两个关键帧：

1.通过使用 DiscreteObjectKeyFrame，Rectangle 的 Fill 属性会在动画的前两秒之后突然更改为 LinearGradientBrush。

2.在动画的第三秒之后，Fill 属性会突然更改为另一个 LinearGradientBrush，然后一直保持到动画结束（总共四秒）。

<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="MySilverlight3Study_Animation2.MainPage"
	Width="120" Height="120">
<StackPanel>
	<StackPanel.Triggers>
	 <EventTrigger RoutedEvent="StackPanel.Loaded">
	 	<BeginStoryboard>
		<Storyboard x:Name="myStoryboard">

            <ObjectAnimationUsingKeyFrames
         Storyboard.TargetName="animatedRectangle"
         Storyboard.TargetProperty="Fill"
         Duration="0:0:4" RepeatBehavior="Forever">
                <ObjectAnimationUsingKeyFrames.KeyFrames>
		    
  
  
                    <DiscreteObjectKeyFrame KeyTime="0:0:2">
                        <DiscreteObjectKeyFrame.Value>
                            <LinearGradientBrush>
                                <LinearGradientBrush.GradientStops>
                                    <GradientStop Color="Yellow" Offset="0.0" />
                                    <GradientStop Color="Orange" Offset="0.5" />
                                    <GradientStop Color="Red" Offset="1.0" />
                                
  
  LinearGradientBrush.GradientStops>
                            
   
   LinearGradientBrush>
                        
    
    DiscreteObjectKeyFrame.Value>
                    
     
     DiscreteObjectKeyFrame>

                    
      
      
                    <DiscreteObjectKeyFrame KeyTime="0:0:3">
                        <DiscreteObjectKeyFrame.Value>
                            <RadialGradientBrush GradientOrigin="0.75,0.25">
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Color="White" Offset="0.0" />
                                    <GradientStop Color="MediumBlue" Offset="0.5" />
                                    <GradientStop Color="Black" Offset="1.0" />
                                
      
      RadialGradientBrush.GradientStops>
                             
       RadialGradientBrush>  
        DiscreteObjectKeyFrame.Value>  
         DiscreteObjectKeyFrame>  
          ObjectAnimationUsingKeyFrames.KeyFrames>  
           ObjectAnimationUsingKeyFrames>  
            Storyboard>  
             BeginStoryboard>  
              EventTrigger>  
               StackPanel.Triggers>  
                 <Rectangle x:Name="animatedRectangle" Width="100" Height="100" Fill="Aqua" Margin="10" />  
                StackPanel>  
                 UserControl>

执行效果如下：

style="width: 150px; height: 150px" src="http://silverlight.services.live.com/invoke/111821/Hongjunguo%20Study%20Silverlight%20Animation%2003/iframe.html" frameborder="0" scrolling="no">

参考资料：

Animations
http://silverlight.net/learn/quickstarts/animations/

Silverlight 使用 XAML 和 Expression Blend 创建动画
http://msdn.microsoft.com/zh-cn/magazine/cc721608.aspx

关键帧动画
http://msdn.microsoft.com/zh-cn/library/cc189038(VS.95).aspx

稳扎稳打Silverlight(11) - 2.0动画之ColorAnimation, DoubleAnimation, PointAnimation, 内插关键帧动画
http://www.cnblogs.com/webabcd/archive/2008/11/06/1327758.html

使用 XAML 和 Expression Blend 创建动画
http://msdn.microsoft.com/zh-cn/magazine/cc721608.aspx

ObjectAnimationUsingKeyFrames 类
http://msdn.microsoft.com/zh-cn/library/system.windows.media.animation.objectanimationusingkeyframes(VS.95).aspx

蝈蝈俊

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Silverlight学习笔记--动画效果-- 关键帧动画

按照动画的形成方式，Silverlight 动画可以分为两种：渐变风格方式（也可以叫From/To/By 动画）（确定开始和结束，然后按照一个固定的频率完成渐变）；关键帧生成方式（设定若干中间帧，可以按照指定的节奏来变化，节奏可以忽快忽慢）；渐变式动画的讲解请看博客： Silverlight学习笔记--动画效果-- 渐变风格方式动画本文介绍关键帧动画：与渐变（
复制链接

扫一扫