到目前为止，我们只看到简单的点到点的动画。我们使用了To和From属性或者By属性来设计动画——相对于当前的属性值。这很适合简单的动画，但是我们可以构造序列来创建更复杂的动画，这可能是非常麻烦的。幸运的是，这是没有必要的。WPF提供了动画对象，允许我们详细指出一系列时间和值。
在影视中传统的动画中，这是普通的开始——通过绘制最重要的动画步骤。这些关键帧定义了场景的基本流程，捕获了它的最重要的点。只要一旦这些关键帧是满意的，是保留的帧绘图。这些关键帧之间的图像并不要求非常创造性的输入，它们只是简单的打算添加进去，从一个关键帧到另一个。WPF优化了同样的概念。你可以考虑简单的From和To方法——等价于提供两个关键帧，一个“before”帧和一个“after”帧——WPF会为你添加这两个帧。关键帧动画简单的扩展了多个帧的概念。
作为最简单的动画类型，关键帧仍然一次性为属性设定目标。因此它们并不与传统动画中关键帧一样，每一帧组成了整个的绘图。你不能提供两个绘图并告诉WPF从一个变换到另一个。
关键帧动画类型使用了命名装换TypeAnimationUsingKeyFrames。示例8-24显示了一个简单的动画：一个弹起的矩形，使用到了DoubleAnimationUsingKeyFrames。
&Window&Text="Key&Frames"&Width="850"&Height="300"
&&&&xmlns="/winfx/avalon/2005"
&&&&xmlns:x="/winfx/xaml/2005"&
&&&&&Window.Storyboards&
&&&&&&&&&SetterTimeline&TargetName="rect"&Path="(Canvas.Left)"
&&&&&&&&&&&&&&&&&&&&&&&&RepeatBehavior="Forever"&AutoReverse="True"&
&&&&&&&&&&&&&DoubleAnimation&From="0"&To="800"&Duration="0:0:10"&/&
&&&&&&&&&/SetterTimeline&
&&&&&&&&&SetterTimeline&TargetName="rect"&Path="(Canvas.Top)"&
&&&&&&&&&&&&&DoubleAnimationUsingKeyFrames&Duration="0:0:2"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&RepeatBehavior="Forever"&
&&&&&&&&&&&&&&&&&DoubleAnimationUsingKeyFrames.KeyFrames&
&&&&&&&&&&&&&&&&&&&&&LinearDoubleKeyFrame&Value="0"&KeyTime="0:0:0"&/&
&&&&&&&&&&&&&&&&&&&&&LinearDoubleKeyFrame&Value="50"&KeyTime="0:0:0.5"&/&
&&&&&&&&&&&&&&&&&&&&&LinearDoubleKeyFrame&Value="200"&KeyTime="0:0:1"&/&
&&&&&&&&&&&&&&&&&&&&&LinearDoubleKeyFrame&Value="50"&KeyTime="0:0:1.5"&/&
&&&&&&&&&&&&&&&&&&&&&LinearDoubleKeyFrame&Value="0"&KeyTime="0:0:2"&/&
&&&&&&&&&&&&&&&&&/DoubleAnimationUsingKeyFrames.KeyFrames&
&&&&&&&&&&&&&/DoubleAnimationUsingKeyFrames&
&&&&&&&&&/SetterTimeline&
&&&&&/Window.Storyboards&
&&&&&Canvas&
&&&&&&&&&Rectangle&x:Name="rect"&Fill="Red"&Width="20"&Height="20"&/&
&&&&&/Canvas&
这里有两个timeline。第一个移动矩形从左到右，使用常规的DoubleAnimation，第二个通过使用DoubleAnimationUsingKeyFrames控制了垂直的位置。这控制了5个帧，详细指出了矩形的需要的垂直位置，在半秒的时间内。如图8-12所示，这些关键帧显示了这个矩形，在它的跳动的顶部和底部，伴随着中途的点比中间点稍微高一点，指出一段时间的速度渐变。WPF为我们在这些位置之间加入了新元素。
示例8-24中每个关键帧的值都使用LinearDoubleKeyFrame详细指出。这说明了使用了线形添写。改变的速度是介于两个帧之间的常量。这就引起了运动并不是特别平滑的。这个矩形在它下降时提高速度，而速度上的改变发生在可见的“阶段”——从动画的一幕到下一幕。我们可以减少这种影响，通过添加更多的关键帧，但是这里有一条更容易的方式。不是图8-13中左边显示的简单线性插值，而是获取一个曲线插值如右边显示，提高了平滑度，而不需要添加更多的关键帧。
为了在我们想要的动画速度上获取更平滑的改动，我们可以使用SplineDoubleKeyFrame。带有一个样条关键帧，一条贝塞尔曲线详细指出了动画值是应该如何改变的。可是，这种曲线使用的方式并不是完全直接的。正如我们在第7章看到的，贝塞尔曲线可以用于定义曲线形状。可是，使用动画，我们不能简单地定义路径。一个点沿示例中的贝塞尔曲线而行。这条曲线是一个二维的形状，但是这个动画对象仅修改了y轴，这意味着它只在一个维度上产生影响。（记得示例8-24使用了2个SetterTimeline元素，每个都对应一个维度。）
代替以定义点的路径，贝塞尔曲线在一个样条关键帧上定义了一个数学函数的形式。这个函数把它的输入理解为关键帧的流逝时间的比例。作为输出，它提供了一个数字，指出之前的和当前的值混合在一起的比例。这条曲线总是从(0,0)移动到(1,1)，但是你定位这两个控制点，决定了它的形状在这些极限之间。使用关键帧的KeySpline属性设置这些值。
图8-14显示了3个动画样条的示例，控制点标记在小矩形上。记得这些曲线简单的决定了动画前进的速度。第一个“曲线”是一条直线，意味着这个动画以常速前进。这等价于一个LinearDoubleKeyFrame。第二条曲线指出了动画开始缓慢而后加速。第三条曲线显示了动画开始迅速而后减速到停止。
示例8-25是示例8-24的对关键帧的修改版本。这个动画传递了同样的关键帧值，但是使用样条来指出动画的速度应该逐渐改变。这使得这个动画感觉很平滑，而不需要添加更多的关键帧。
&SetterTimeline&TargetName="rect"&Path="(Canvas.Top)"&
&&&&&DoubleAnimationUsingKeyFrames&Duration="0:0:2"&RepeatBehavior="Forever"&
&&&&&&&&&DoubleAnimationUsingKeyFrames.KeyFrames&
&&&&&&&&&&&&&LinearDoubleKeyFrame&Value="0"&KeyTime="0:0:0"&/&
&&&&&&&&&&&&&SplineDoubleKeyFrame&Value="50"&KeyTime="0:0:0.5"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeySpline="0.4,0&0.75,0.75"&/&
&&&&&&&&&&&&&SplineDoubleKeyFrame&Value="200"&KeyTime="0:0:1"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeySpline="0.2,0.2&1,0.4"&/&
&&&&&&&&&&&&&SplineDoubleKeyFrame&Value="50"&KeyTime="0:0:1.5"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeySpline="0,0.3&0.75,0.75"&/&
&&&&&&&&&&&&&SplineDoubleKeyFrame&Value="0"&KeyTime="0:0:2"
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeySpline="0.25,0.25&0.6,1"&/&
&&&&&&&&&/DoubleAnimationUsingKeyFrames&
.KeyFrames&
&&&&&/DoubleAnimationUsingKeyFrames&
&/SetterTimeline&
第一帧仍然使用LinearDoubleKeyFrame，因为这里没有“before”帧以进行插值。两个“downward”关键帧使用了曲线形状——类似于图8-14中间的那个。这导致了这个动画开始缓慢然后加速，正如你希望的在一个下落对象的动画中。两个“upward”关键帧使用了曲线形状——类似于图8-14右边的那个。这导致了这个动画逐渐缓慢直到这个对象到达顶部。这就提供了一个更有力的可视化近似：关于一个真实的对象是如何运动的。
这里还有一种可利用的的插值样式：四点插值细分算法。如果你使用了这样一个关键帧，WPF根本不会真正地“插值”。它会突然跳到详细指定的值。这就易于引进中断到你的动画中，如果必要。
注意到，WPF提供了关键帧的版本——大多数动画类型都支持它，不仅是Double类型，表8-2列出了这些类型。
Table 8-2. Key-frame animation types
BooleanAnimationUsingKeyFrames
PointAnimationUsingKeyFrames
ByteAnimationUsingKeyFrames
Rect3DAnimationUsingKeyFrames
CharAnimationUsingKeyFrames
RectAnimationUsingKeyFrames
ColorAnimationUsingKeyFrames
Rotation3DAnimationUsingKeyFrames
DecimalAnimationUsingKeyFrames
SingleAnimationUsingKeyFrames
DoubleAnimationUsingKeyFrames
Size3DAnimationUsingKeyFrames
Int16AnimationUsingKeyFrames
SizeAnimationUsingKeyFrames
Int32AnimationUsingKeyFrames
StringAnimationUsingKeyFrames
Int64AnimationUsingKeyFrames
ThicknessAnimationUsingKeyFrames
MatrixAnimationUsingKeyFrames
Vector3DAnimationUsingKeyFrames
Point3DAnimationUsingKeyFrames
VectorAnimationUsingKeyFrames
阅读(...) 评论()posts - 341,&
comments - 36,&
trackbacks - 0
&Height="100"&Width="80"&CornerRadius="11,11,11,11"&Margin="5"&BorderThickness="2"&Background="Brown"&IsEnabled="False"&Name="Bord11"&&
&&&&&&&&&RoutedEvent="Border.Loaded"&&&
&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&Storyboard.TargetProperty="Visibility"&Duration="0:0:4"&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeyTime="0:0:1"&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Visible&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeyTime="0:0:2"&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Hidden&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&KeyTime="0:0:3"&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&Collapsed&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&
&&&&&&&&&&
&&&&&Height="39"&Name="label1"&Width="62"ABCDEFGH&&
后台实现：
[c-sharp]&
ObjectAnimationUsingKeyFrames&animate&=&new&ObjectAnimationUsingKeyFrames();&&
animate.Duration&=&new&TimeSpan(0,0,4);&&
animate.RepeatBehavior&=&RepeatBehavior.F&&
DiscreteObjectKeyFrame&kf1&=&new&DiscreteObjectKeyFrame(Visibility.Visible,&new&TimeSpan(0,&0,&1));&&
DiscreteObjectKeyFrame&kf2&=&new&DiscreteObjectKeyFrame(Visibility.Hidden,&new&TimeSpan(0,&0,&2));&&
DiscreteObjectKeyFrame&kf3&=&new&DiscreteObjectKeyFrame(Visibility.Collapsed,&new&TimeSpan(0,&0,3));&&
animate.KeyFrames.Add(kf1);&&
animate.KeyFrames.Add(kf2);&&
animate.KeyFrames.Add(kf3);&&
Bord11.BeginAnimation(Border.VisibilityProperty,&animate);&&
阅读(...) 评论()WPF_Prism_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
&&WPF-Prism培训教材
大小：1.58MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢下次自动登录
现在的位置:
& 综合 & 正文
wpf XMAL中隐藏控件
首先，需要解决怎样在Click事件后设置Visibility属性？WPF中的EventSetter只能连接事件和事件处理的方法。而EventTrigger则只能定义TriggerAction，而不能添加任何SetterBase。
解决方案就是用一个关键帧动画，这样可以用在EventTrigger中，接着用一个DiscreteObjectKeyFrame来设置属性值就可以了。这个关键帧的KeyTime是0:0:0，这样在动画开始的时候，这个值会被立即设置。
接着怎样引用Visibility的枚举值？用x:Static标记扩展就可以了
&Window x:Class="WpfApplication1.MainWindow"
xmlns="/winfx/2006/xaml/presentation"
xmlns:x="/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="263"&
&StackPanel&
&Button Content="Click Hide"&
&Button.Triggers&
&EventTrigger RoutedEvent="Button.Click"&
&EventTrigger.Actions&
&BeginStoryboard&
&Storyboard Storyboard.TargetName="text"
Storyboard.TargetProperty="Visibility"&
&ObjectAnimationUsingKeyFrames&
&DiscreteObjectKeyFrame Value="{x:Static Visibility.Hidden}" KeyTime="0:0:0"/&
&/ObjectAnimationUsingKeyFrames&
&/Storyboard&
&/BeginStoryboard&
&/EventTrigger.Actions&
&/EventTrigger&
&/Button.Triggers&
&Button Name="text" Height="20" Width="40" Margin="18,30,113,161"&
zxl&/Button&
&/StackPanel&
&&&&推荐文章:
【上篇】【下篇】WPF的动画实现方式 - CSDN博客
WPF的动画实现方式
过去实现动画的经典方法是建立一个定时器，然后根据其频率循环调用回调函数或者一个事件处理函数。在这个函数中可以手动更新目标属性，直到达到最终值，这时可以停止定时器。这就是基于计时器的动画。WPF中也提供了DispatcherTimer类型的定时器，可以通过该类实现这样的方案。如下代码定义了一动画改变长方形的宽度：
&Window x:Class=&DispatcherTimer.MainWindow&
xmlns=&/winfx/2006/xaml/presentation&
xmlns:x=&/winfx/2006/xaml&
Title=&MainWindow& Height=&350& Width=&525&&
&Grid.RowDefinitions&
&RowDefinition Height=&7*&/&
&RowDefinition Height=&3*&/&
&/Grid.RowDefinitions&
&Rectangle Grid.Row=&0& x:Name=&rectangle& Width=&30& Height=&100& Fill=&Blue&&
&/Rectangle&
&Button Grid.Row=&1& x:Name=&buttonStart& Width=&100& Height=&30& Click=&buttonStart_Click&&
C#代码为：
public partial class MainWindow : Window
private double maxWidth = 200;
//最大的宽度
private double startWidth = 0;
//开始的宽度
public MainWindow()
InitializeComponent();
startWidth = rectangle.W
private void buttonStart_Click(object sender, RoutedEventArgs e)
//创建DispatcherTimer对象
System.Windows.Threading.DispatcherTimer tmr = new System.Windows.Threading.DispatcherTimer();
//设置间隔时间
tmr.Interval = TimeSpan.FromSeconds(0.01);
//绑定函数
tmr.Tick += new EventHandler(tmr_Tick);
tmr.Start();//启动计时器
void tmr_Tick(object sender, EventArgs e)
rectangle.Width += 1;
if (rectangle.Width &= maxWidth)
rectangle.Width = startW
(sender as System.Windows.Threading.DispatcherTimer).Stop();
当单击开始动画这个按钮的时候，长方形的宽度会逐渐变宽，效果图如下：
& & & & & & & & &&
现在，WPF提供了一种基于帧的动画实现方式，由CompositonTarget类来完成。它提供了一个回调函数（Rendering的事件处理函数），WPF会在每次界面刷新时调用该回调函数。CompositionTarget的刷新频率与窗体保持一致，因此很难人工控制动画的快慢。在动画中，可以使用移动的元素、颜色变化、变换等制作平滑的效果。WPF使动画的制作非常简单，还可以连续改变任意依赖属性的值。动画的主要元素有：
1.时间轴——定义了值随时间的变化方式。有不同类型的时间轴，可用于改变不同类型的值。所有时间轴的基类都是Timeline。为了连续改变double的值，可以使用DoubleAnimation类。Int32Animation类是int值的动画类。PointAnimation类用于连续改变点，ColorAnimation类用于连续改变颜色。
2.故事板——用于合并动画。Storyboard派生自基类TimelineGroup，TimelineGroup又派生自基类Timeline。使用Storyboard类可以合并所有应连接在一起的动画。
3.触发器——通过触发器可以启动和停止动画。我们可以创建事件触发器，当事件发生时，事件触发器就会激活。
如果想要顺利地使用WPF动画，需要满足以下条件：
1.改变的属性必须是依赖属性。
2.应用动画的属性所属的类必须派生自DependencyObject，而且实现了IAnimation接口。由于WPF绝大多数类都会派生自DependencyObject，所以实现IAnimation接口主要有3个类，即UIElement、ContentElement和Animatable，应用动画属性所属的类必然派生自这3个类。
3.该属性的类型必须是可以应用动画的类型，如Double、Int、Point或者Color。例如Window类型就不是一个可以应用动画的类型，WPF针对22种基本类型提供了相应的动画类。如果希望一些类型可以应用动画，则需要扩展动画类。
一、时间轴
时间轴定义了值随时间变化的方式。下面的示例连续改变椭圆的大小。在代码中，DoubleAnimation用来改变椭圆的宽度，ColorAnimation用来连续改变填充椭圆的颜色。把Ellipse类的Triggers属性设置为EventTrigger，椭圆加载时，就激活用EventTrigger的RoutedEvent属性定义的事件触发器。BeginStoryboard是启动故事板的触发器动作。这个动画在3秒内把椭圆的宽度从100改为300，在之后的3秒再恢复原状。
&Ellipse Height=&50& Width=&100&&
&Ellipse.Fill&
&SolidColorBrush x:Name=&ellipseBrush& Color=&SteelBlue&/&
&/Ellipse.Fill&
&Ellipse.Triggers&
&EventTrigger RoutedEvent=&Ellipse.Loaded&&
&EventTrigger.Actions&
&BeginStoryboard&
&Storyboard Duration=&00:00:06& RepeatBehavior=&Forever&&
&DoubleAnimation Storyboard.TargetProperty=&(Ellipse.Width)&
Duration=&0:0:3& AutoReverse=&True& FillBehavior=&Stop&
RepeatBehavior=&Forever& AccelerationRatio=&0.9&
DecelerationRatio=&0.1& From=&100& To=&300&&
&DoubleAnimation.EasingFunction&
&BounceEase EasingMode=&EaseInOut&/&
&/DoubleAnimation.EasingFunction&
&/DoubleAnimation&
&ColorAnimation Storyboard.TargetName=&ellipseBrush& Storyboard.TargetProperty=&(SolidColorBrush.Color)&
Duration=&0:0:3& AutoReverse=&True& FillBehavior=&Stop&
RepeatBehavior=&Forever& From=&Yellow& To=&Red&/&
&/Storyboard&
&/BeginStoryboard&
&/EventTrigger.Actions&
&/EventTrigger&
&/Ellipse.Triggers&
&/Ellipse&
如下图为动画效果：
下面的示例说明了如何在样式中定义动画。在Windows资源中，有一个用于按钮的AnimationButtonStyle样式。在模板中定义一个矩形outline，这个模型使用很细的笔触，把其宽度设置为0.4.该模板为IsMouseOver属性定义了一个属性触发器。当鼠标移过按钮时，就应用这个按钮的EnterActions属性。启动动作的是BeginStoryboard，它是一个触发器动作，可以包含并启动Storyboard元素。当IsMouseOver事件被触发时，这个按钮四周的边框粗细就会平滑地增加一个指定的值，这个值是由By属性指定。由于设置了AutoReverse=&True&，当动画结束时，边框的粗细将重置为其初始值。
&Window x:Class=&动画.MainWindow&
xmlns=&/winfx/2006/xaml/presentation&
xmlns:x=&/winfx/2006/xaml&
Title=&MainWindow& Height=&350& Width=&525&&
&Window.Resources&
&Style x:Key=&AnimatedButtonStyle& TargetType=&{x:Type Button}&&
&Setter Property=&Template&&
&Setter.Value&
&ControlTemplate TargetType=&{x:Type Button}&&
&Rectangle Name=&outline& RadiusX=&9& RadiusY=&9& Stroke=&Black&
Fill=&{TemplateBinding Background}& StrokeThickness=&1.6&&&/Rectangle&
&ContentPresenter VerticalAlignment=&Center& HorizontalAlignment=&Center&/&
&ControlTemplate.Triggers&
&Trigger Property=&IsMouseOver& Value=&True&&
&Trigger.EnterActions&
&BeginStoryboard&
&Storyboard&
&DoubleAnimation Duration=&0:0:0.3& AutoReverse=&True& Storyboard.TargetProperty=&(Rectangle.StrokeThickness)&
Storyboard.TargetName=&outline& By=&1.2&/&
&/Storyboard&
&/BeginStoryboard&
&/Trigger.EnterActions&
&/Trigger&
&/ControlTemplate.Triggers&
&/ControlTemplate&
&/Setter.Value&
&/Window.Resources&
&Button Style=&{StaticResource ResourceKey=AnimatedButtonStyle}& Width=&200& Height=&100& Content=&Click Me!& Margin=&152,12,151,199& /&
根据Timeline的类型，还可以使用其它的一些属性。例如，使用DoubleAnimation，可以为动画的开始和结束设置From和To属性，还可以设置By属性，用Bound属性的当前值启动动画，该属性递增由By属性指定的值。
二、非线性动画
定义非线性动画的一种方式是设置AccelerationRatio和DecelerationRatio，指定动画在开始和结束的速度。几个动画类有EasingFunction属性，这个属性接受一个实现了IEasingFunction接口的对象。通过这个接口，缓动函数对象可以定义值随着时间如何变化动画效果。有几个缓动函数可用于创建非线性动画，如ExponentialEase，它给动画使用指数公式；QuadraticEase、CubicEase、QuarticEase和QuinticEase的指数分别是2、3、4、5，PowerEase的指数是可以配置的。特别有趣的是SineEase，它使用正弦曲线，BounceEase创建弹跳效果，ElasticEase用弹簧的来回震荡来模拟动画值。要在XAML中指定这种缓动效果时，具体方法是把该缓动效果添加到动画的EasingFunction属性中。添加不同的函数，就会看到不同的有趣的效果。如下代码：
&DoubleAnimation.EasingFunction&
&BounceEase EasingMode=&EaseInOut&/&
&/DoubleAnimation.EasingFunction&
三、事件触发器
事件触发器在事件发生时激活，这种事件的例子包括控件的Load事件、按钮的Click事件，以及MouseMove事件等。先看代码，下面的例子通过形状创建一个笑脸，然后给这个笑脸创建一个动画，一旦点击按钮时，这个笑脸的眼睛就会移动。
&Window x:Class=&会动的笑脸.MainWindow&
xmlns=&/winfx/2006/xaml/presentation&
xmlns:x=&/winfx/2006/xaml&
Title=&MainWindow& Height=&350& Width=&525&&
&DockPanel&
&DockPanel.Triggers&
&EventTrigger RoutedEvent=&Button.Click& SourceName=&buttonBeginMoveEyes&&
&BeginStoryboard x:Name=&beginMoveEyes&&
&Storyboard&
&DoubleAnimation RepeatBehavior=&Forever& DecelerationRatio=&0.8&
AutoReverse=&True& By=&6& Duration=&0:0:1&
Storyboard.TargetName=&eyeLeft&
Storyboard.TargetProperty=&(Canvas.Left)&/&
&DoubleAnimation RepeatBehavior=&Forever&
AutoReverse=&True& By=&6& Duration=&0:0:5&
Storyboard.TargetName=&eyeLeft&
Storyboard.TargetProperty=&(Canvas.Top)&/&
&DoubleAnimation RepeatBehavior=&Forever& DecelerationRatio=&0.8&
AutoReverse=&True& By=&-6& Duration=&0:0:3&
Storyboard.TargetName=&eyeRight&
Storyboard.TargetProperty=&(Canvas.Left)&/&
&DoubleAnimation RepeatBehavior=&Forever& DecelerationRatio=&0.8&
AutoReverse=&True& By=&6& Duration=&0:0:6&
Storyboard.TargetName=&eyeRight&
Storyboard.TargetProperty=&(Canvas.Top)&/&
&/Storyboard&
&/BeginStoryboard&
&/EventTrigger&
&EventTrigger RoutedEvent=&Button.Click& SourceName=&buttonStopMoveEyes&&
&StopStoryboard BeginStoryboardName=&beginMoveEyes&/&
&/EventTrigger&
&EventTrigger RoutedEvent=&Button.Click& SourceName=&buttonResize&&
&BeginStoryboard&
&Storyboard&
&DoubleAnimation RepeatBehavior=&2& AutoReverse=&True&
Storyboard.TargetName=&scale1&
Storyboard.TargetProperty=&(ScaleTransform.ScaleX)&
From=&0.1& To=&6& Duration=&0:0:5&&
&DoubleAnimation.EasingFunction&
&ElasticEase/&
&/DoubleAnimation.EasingFunction&
&/DoubleAnimation&
&DoubleAnimation RepeatBehavior=&2& AutoReverse=&True&
Storyboard.TargetName=&scale1&
Storyboard.TargetProperty=&(ScaleTransform.ScaleY)&
From=&0.1& To=&6& Duration=&0:0:5&&
&DoubleAnimation.EasingFunction&
&BounceEase/&
&/DoubleAnimation.EasingFunction&
&/DoubleAnimation&
&/Storyboard&
&/BeginStoryboard&
&/EventTrigger&
&/DockPanel.Triggers&
&StackPanel Orientation=&Vertical& DockPanel.Dock=&Top&&
&Button x:Name=&buttonBeginMoveEyes& Content=&Start Move Eyes& Margin=&5&/&
&Button x:Name=&buttonStopMoveEyes& Content=&Stop Move Eyes& Margin=&5&/&
&Button x:Name=&buttonResize& Content=&Resize& Margin=&5&/&
&/StackPanel&
&Canvas.LayoutTransform&
&ScaleTransform x:Name=&scale1& ScaleX=&1& ScaleY=&1&/&
&/Canvas.LayoutTransform&
&Ellipse Canvas.Left=&10& Canvas.Top=&10& Width=&100& Height=&100&
Stroke=&Blue& StrokeThickness=&4& Fill=&Yellow&/&
&Ellipse Canvas.Left=&30& Canvas.Top=&12& Width=&60& Height=&30&&
&Ellipse.Fill&
&LinearGradientBrush StartPoint=&0.5,0& EndPoint=&0.5,1&&
&GradientStop Offset=&0.1& Color=&DarkGreen&/&
&GradientStop Offset=&0.7& Color=&Transparent&/&
&/LinearGradientBrush&
&/Ellipse.Fill&
&/Ellipse&
&Ellipse Canvas.Left=&30& Canvas.Top=&35& Width=&25& Height=&20&
Stroke=&Blue& StrokeThickness=&3& Fill=&White&/&
&Ellipse x:Name=&eyeLeft& Canvas.Left=&40& Canvas.Top=&43&
Width=&6& Height=&5& Fill=&Black&/&
&Ellipse Canvas.Left=&65& Canvas.Top=&35& Width=&25& Height=&20&
Stroke=&Blue& StrokeThickness=&3& Fill=&White&/&
&Ellipse x:Name=&eyeRight& Canvas.Left=&75& Canvas.Top=&43& Width=&6&
Height=&5& Fill=&Black&/&
&Path Name=&mouth& Stroke=&Blue& StrokeThickness=&4& Data=&M 40,74 Q 57,95 80,74&/&
&/DockPanel&
在上面代码中，动画在DockPanel.Triggers部分中定义，这里没有使用属性触发器，而使用了事件触发器。RoutedEvent和SourceName属性定义了buttonBeginMoveEyes按钮，一旦该按钮的Click事件发生，就激活第一个事件触发器。触发器动作由BeginStoryboard元素定义，它启动所包含的Storyboard。BeginStoryboard定义了一个名称，它用于控制故事板的暂停、继续和停止动作。Storyboard元素包含4个动画，前两幅动画连续改变左眼，后两幅动画连续改变右眼。第1幅和第3幅动画改变眼睛的Canvas.Left位置，第2幅和第第4幅改变Canvas.Top。动画在x和y方向上有不同的时间值，使用指定的重复行为使眼睛的运动更有趣。一旦buttonStopMoveEyes按钮的Click事件发生，就激活第2个事件触发器，在这里，故事板用StopStoryboard元素停止，该元素引用了起始故事板beginMoveEyes。第3个个事件触发器通过单击buttonResize按钮来激活，在这幅动画中改变了Canvas元素的变换。这个故事板也使用前面介绍的EaseFunction。
如下图为上述代码的两个效果：
&点击Start Move Eyes之后的效果&
&点击Resize按钮之后的效果&
四、关键帧动画
如前所述，使用加速比、减速比和缓函数，就可以用非线性的方式 制作动画。如果需要为动画指定几个值，就可以使用关键帧动画。与正常的动画一样，关键帧动画也有不同的动画类型，它们可以改变不同类型的属性。DoubleAnimationUsingKeyFrames是双精度类型的关键帧动画。其它关键帧动画类型有Int32AnimationUsingKeyFrames、PointAnimationUsingKdyFrames、ColorAnimationUsingKeyFrames、SizeAnimationUsingKeyFrames和ObjectAnimationUsingKeyFrames。
&Window x:Class=&关键帧动画.MainWindow&
xmlns=&/winfx/2006/xaml/presentation&
xmlns:x=&/winfx/2006/xaml&
Title=&MainWindow& Height=&350& Width=&525&&
&Ellipse Fill=&Red& Canvas.Top=&20& Canvas.Left=&20& Width=&25& Height=&25& &
&Ellipse.RenderTransform&
&TranslateTransform X=&50& Y=&50& x:Name=&ellipseMove& /&
&/Ellipse.RenderTransform&
&Ellipse.Triggers&
&EventTrigger RoutedEvent=&Ellipse.Loaded&&
&BeginStoryboard&
&Storyboard&
&DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&X&
Storyboard.TargetName=&ellipseMove&&
&LinearDoubleKeyFrame KeyTime=&0:0:2& Value=&30&/&
&DiscreteDoubleKeyFrame KeyTime=&0:0:4& Value=&80&/&
&SplineDoubleKeyFrame KeySpline=&0.5,0.0 0.9,0.0& KeyTime=&0:0:10& Value=&300&/&
&LinearDoubleKeyFrame KeyTime=&0:0:20& Value=&150&/&
&/DoubleAnimationUsingKeyFrames&
&DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=&Y&
Storyboard.TargetName=&ellipseMove&&
&SplineDoubleKeyFrame KeySpline=&0.5,0.0 0.9,0.0& KeyTime=&0:0:2& Value=&50&/&
&EasingDoubleKeyFrame KeyTime=&0:0:20& Value=&300&&
&EasingDoubleKeyFrame.EasingFunction&
&BounceEase/&
&/EasingDoubleKeyFrame.EasingFunction&
&/EasingDoubleKeyFrame&
&/DoubleAnimationUsingKeyFrames&
&/Storyboard&
&/BeginStoryboard&
&/EventTrigger&
&/Ellipse.Triggers&
&/Ellipse&
上述代码中使用了两个关键帧动画。第一幅使用一个LinearKeyFrame、一个DiscreteDoubleKeyFrame和一个SplineDoubleKeyFrame，第二幅是一个EasingDoubleKeyFrame。LinearDoubleKeyFrame使对应值线性变化，KeyTime属性定义了动画应在何时达到Value属性的值。这里LinearDoubleKeyFrame用3秒时间使X属性的值到达30，DiscreteDoubleKeyFrame在4秒后立即改变为新值。SplineDoubleKeyFrame使用贝塞尔曲线，其中的两个控制点由KeySpline属性指定。EasingDoubleKeyFrame是.Net4中新增的一个帧类，它支持设置缓函数（如BounceEase）来控制动画。
本文已收录于以下专栏：
相关文章推荐
WPF 有趣的动画效果
        这一次我要呈上一个简单的文章，关于给你的WPF apps添加漂亮的光线动画，但是我对动画这东西可能有点入迷了。
        实际上，我对动画如此的入迷，以至...
创建正确动画的秘诀在于决定需要修改什么属性。
WPF动画第一条规则，每个动画依赖于一个依赖项属性，另一个需要支持相应数据类型的动画类。
实际上有两种动画：在开始值...
以下是用WPF实现的的一个窗口，为了使演示变得简单，我在窗口中只放了一个按钮。如下图所示：
但我们今天的主题是窗口启动时和关闭时都展示动画，如何进行动画处理，我以前写过一些WPF相关的文章...
WPF开发界面的时候，用的最多的就是自定义控件模板，开发人员需要根据UI的设计，做出符合要求的自定义控件。但是在一些特殊情况下，UI的设计可能是不规则现状，要做像图①这样一个不规则形状按钮，就需要PS...
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}