Silverlight & Blend动画设计系列九：动画（Animation）与视图状态管理

Silverlight & Blend动画设计系列九：动画（Animation）与视图状态管理2011-04-20 博客园 BeniaoSilverlight中的动画（Animation）与视图状态管理（Visual State Manager）结合使用是非常常见的，动画用于管理对象在某段事件段内执行的动画动作，视图状态管理则用于控制对象在多个不同的视觉状态之间切换、导航。本篇主要介绍动画（Animation）与视图状态管理（Visual State Manager）的结合应用，关于视图状态管理的详细内容请大家查看相关资料。

举一个简单的示例，比如在开发一个项目中有一个按钮，当我点击这个按钮的时候就动态的从某个方向（如从上到下的方向，也就是从屏幕的上方动态的滑动到屏幕中）呈现出一个面板。

要实现这个简单示例，可以通过《Silverlight & Blend动画设计系列一：偏移动画（TranslateTransform）》里介绍的偏移动画特性去实现，为了效果上能够更加美观，可以增加一些其他的变换，比如在面板向下滑动出现的过程中动态的改变面板的透明度，从完全透明到不透明效果。当我们清楚了需求接下来就可以在Blend中进行设计了，首先布局界面（ Button,Border[TextBlock]）如下图所示：

添加Storyboard并选中第一秒时间线，设置border对象的Transform.Y为-296（这个值可以在设计中直接通过鼠标拖动 Border对象确定），然后移动时间线到第三秒位置，设置 Transfrom.Y为0。通过还可以在第一秒的时候设置border不透明度值为0%，第三秒的时候设置不透明度为100%，这样在动画过程中的效果会更好。

通过上图中布局的Button去触发动画开发，编译运行程序就可以查看到其效果，当点击按钮的时候就会看到一个面板从顶部已模糊到清晰的动画载入到界面上。另外可以将Border对象默认设置为不显示（Visibility="Collapsed"），当启动动画的时候将其设置为显示（Visibile）。

<Storyboard x:Name="Storyboard1">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetName="border"
         Storyboard.TargetProperty="（UIElement.RenderTransform）. （TransformGroup.Children）[3].（TranslateTransform.Y）">
         <EasingDoubleKeyFrame KeyTime="00:00:00" Value="-296"/>
         <EasingDoubleKeyFrame KeyTime="00:00:01" Value="0"/>
     </DoubleAnimationUsingKeyFrames>
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetName="border"
         Storyboard.TargetProperty="（UIElement.Opacity）">
         <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.3"/>
         <EasingDoubleKeyFrame KeyTime="00:00:01" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
     <ObjectAnimationUsingKeyFrames BeginTime="00:00:00"  Storyboard.TargetName="border"
         Storyboard.TargetProperty="（UIElement.Visibility）">
         <DiscreteObjectKeyFrame KeyTime="00:00:00">
             <DiscreteObjectKeyFrame.Value>
                 <Visibility>Visible</Visibility>
             </DiscreteObjectKeyFrame.Value>
         </DiscreteObjectKeyFrame>
         <DiscreteObjectKeyFrame KeyTime="00:00:01">
             <DiscreteObjectKeyFrame.Value>
                 <Visibility>Visible</Visibility>
             </DiscreteObjectKeyFrame.Value>
         </DiscreteObjectKeyFrame>
     </ObjectAnimationUsingKeyFrames>
</Storyboard>