silverlight如何在运行时用代码动态控制(或创建)动画

silverlight做一些复杂动画时，不可能所有的动画都事先用Blend之类的设计工具"画"好(或者在设计期就在vs里编好)，很多时候我们希望在运行时能动态控制动画，或者凭空动态创建一段动画.

sl3.0的官方sdk文档里有一节"以编程方式使用动画"讲的就是这个，今天研究了下整理分析于此:

对于事先"画"好(或者称之为在设计期准备好的动画)，我们可以在运行时通过名字获取动画引用，进而改变某些属性:

1.示例1(代码来自sdk,以下同)，运行时动态改变动画的To属性值，从而实现鼠标点击跟随效果

Xaml部分:

1. <UserControl x:Class="AnimationControl.Change"
2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
5.     mc:Ignorable="d" >
6.     <Canvas MouseLeftButtonDown="Handle_MouseDown"Background="DarkSeaGreen" Width="400"Height="300" Cursor="Hand">
7.         <Canvas.Resources>
8.             <Storyboardx:Name="myStoryboard">
9.                <PointAnimation x:Name="myPointAnimation"Storyboard.TargetProperty="Center"Storyboard.TargetName="MyAnimatedEllipseGeometry"Duration="0:0:0.5"/>
10.            </Storyboard>
11.        </Canvas.Resources>
12. 
13.        <TextBlock Text="请在圆形之外的空白处点击"  Foreground="White"FontStretch="Normal" FontWeight="Bold"FontSize="18"
TextAlignment="Center"Canvas.Left="100" Canvas.Top="130" Cursor="Hand"Opacity="0.5">
14. 
15.        </TextBlock>
16.        
17.        <Path Fill="Blue">
18.            <Path.Data>
19.               <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"Center="200,100" RadiusX="15" RadiusY="15" />
20.            </Path.Data>
21.        </Path>
22. 
23.        
24.    </Canvas>
25.</UserControl>
复制代码

布局很简单，一个Canvas上放了一个圆，并创建了一个动画myPointAnimation

CS部分：

1. using System.Windows;
2. using System.Windows.Controls;
3. using System.Windows.Input;
4.  
5. namespace AnimationControl
6. {
7.     public partial class Change : UserControl
8.     {
9.         public Change()
10.        {
11.            InitializeComponent();
12.        }
13. 
14.        private void Handle_MouseDown(objectsender, MouseButtonEventArgs e)
15.        {
16.            //取得鼠标当前在Canvas中的点击坐标
17.            double newX =e.GetPosition(sender as UIElement).X;
18.            double newY = e.GetPosition(senderas UIElement).Y;
19.            Point myPoint = newPoint();
20.            myPoint.X = newX;
21.            myPoint.Y = newY;
22. 
23.            //动态设置动画的To属性值
24.            myPointAnimation.To =myPoint;
25. 
26.            //播放
27.            myStoryboard.Begin();
28.        }
29. 
30.    }
31.}
复制代码

代码不长，一看就明，获取鼠标的点击坐标后，赋值为动画myPointAnimation的To属性(即移动后的目标坐标值)，然后播放

2.示例2，有时候很多对象可能会引用到同一效果的动画，每个对象都去创建一个动画太浪费，这时候我们可以把类似的动画通过改变TartgetName值得以重用

但有一点要注意：因为同一个动画同一时间只能有一个Target，所以如果给这个动画赋值了TartgetName，并且该动画正在播放的过程中，又用代码给动画的TargetName属性赋值另外一个对象，并要求播放，显示是会失效的。(实际测试中发现，虽然这样不会抛出任何异常)

为避免这种错误的发生，sdk中的示例代码提示我们可以这样做：

Xaml部分：

1. <UserControl x:Class="AnimationControl.Change2"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.     mc:Ignorable="d"
7.    >
8.  
9.     <StackPanel Orientation="Horizontal">
10.        <StackPanel.Resources>
11.            <Storyboardx:Name="myStoryboard1" Completed="Storyboard_Completed">
12.               <DoubleAnimation x:Name="myDoubleAnimation1"Storyboard.TargetProperty="Opacity" From="1.0"To="0.0" Duration="0:0:2" AutoReverse="True"/>
13.            </Storyboard>
14.            <Storyboardx:Name="myStoryboard2" Completed="Storyboard_Completed">
15.               <DoubleAnimation x:Name="myDoubleAnimation2"Storyboard.TargetProperty="Opacity" From="1.0"To="0.0" Duration="0:0:2" AutoReverse="True"/>
16.            </Storyboard>
17.            <Storyboardx:Name="myStoryboard3" Completed="Storyboard_Completed">
18.               <DoubleAnimation x:Name="myDoubleAnimation3" Storyboard.TargetProperty="Opacity"From="1.0" To="0.0" Duration="0:0:2"AutoReverse="True" />
19.            </Storyboard>
20.        </StackPanel.Resources>
21.        <Rectanglex:Name="MyAnimatedRectangle1" Margin="3"Width="90" Height="100" Fill="Blue"MouseLeftButtonDown="Start_Animation" Cursor="Hand" />
22.        <Rectanglex:Name="MyAnimatedRectangle2" Margin="3"Width="90" Height="100" Fill="Blue"MouseLeftButtonDown="Start_Animation" Cursor="Hand" />
23.        <Rectanglex:Name="MyAnimatedRectangle3" Margin="3"Width="90" Height="100" Fill="Blue"MouseLeftButtonDown="Start_Animation" Cursor="Hand" />
24.        <Rectanglex:Name="MyAnimatedRectangle4" Margin="3"Width="90" Height="100" Fill="Blue"MouseLeftButtonDown="Start_Animation" Cursor="Hand" />
25.    </StackPanel>
26.    
27.</UserControl>
复制代码

StackPanel中横向放了4个矩形，同时放置了三个完全相同的double型动画(用来让对象的透明度从1变到0，即渐渐淡去)，实现目的：4个矩形，3个动画，显示按照一一对应的默认原则，总会有一个矩形无法分配到动画，如何实现重用呢？看下面的

cs部分：

1. using System;
2. using System.Windows.Controls;
3. using System.Windows.Input;
4. using System.Windows.Media.Animation;
5. using System.Windows.Shapes;
6.  
7. namespace AnimationControl
8. {
9.     public partial class Change2 : UserControl
10.    {
11.        public Change2()
12.        {
13.            InitializeComponent();
14.        }
15. 
16.        bool storyboard1Active = false;
17.        bool storyboard2Active = false;
18.        bool storyboard3Active = false;
19.            
20.        private void Start_Animation(objectsender, MouseEventArgs e)
21.        {
22.            //得到被点击的矩形对象引用
23.            Rectangle myRect =(Rectangle)sender;
24. 
25.            if (!storyboard1Active)
26.            {
27.               myStoryboard1.Stop();
28.               myDoubleAnimation1.SetValue(Storyboard.TargetNameProperty, myRect.Name);
29.               myStoryboard1.Begin();
30.               storyboard1Active = true;
31.            }
32.            else if(!storyboard2Active)
33.            {
34.               myStoryboard2.Stop();
35.               myDoubleAnimation2.SetValue(Storyboard.TargetNameProperty, myRect.Name);
36.               myStoryboard2.Begin();
37.               storyboard2Active = true;
38.            }
39.            else if(!storyboard3Active)
40.            {
41.               myStoryboard3.Stop();
42.               myDoubleAnimation3.SetValue(Storyboard.TargetNameProperty, myRect.Name);
43.               myStoryboard3.Begin();
44.               storyboard3Active = true;
45.            }
46.        }
47. 
48.        private voidStoryboard_Completed(object sender, EventArgs e)
49.        {
50.            StoryboardmyStoryboard = sender as Storyboard;
51.            switch(myStoryboard.GetValue(NameProperty).ToString())
52.            {
53.                case"myStoryboard1": storyboard1Active = false; break;
54.                case"myStoryboard2": storyboard2Active = false; break;
55.                case"myStoryboard3": storyboard3Active = false; break;
56.            }
57.        }
58. 
59.    }
60.}
复制代码

这里注意：定义了三个标识变量，用于标识每个动画是否正在播放中，如果播放完成后该变量为false，否则为true(即正在播放)，这个每个矩形上点击请求播放动画时，总是优先找到空闲（即不处于播放状态）的动画，然后为该动画赋值TargetName属性并播放，同时播放途中把对应的标识变量改成true，以防止播放过程中被人修改TargetName值

也许有人会问了:如果没找到空闲的动画，不是没效果了？Yes，你猜对了，如果快速依次点击4个矩形，会发现最后一次点击没什么变化。这种情况就要用到下面提到的代码动态创建动画了

3。示例3 代码动态创建动画

理解起来很简单，代码创建动画对象，并让其播放。

xaml部分:

1. <UserControl x:Class="AnimationControl.Create"
2.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6.     mc:Ignorable="d"
7.    >
8.  
9.     <Canvas Name="LayoutRoot"Background="DarkOliveGreen" Width="400"Height="300">
10.        <TextBlock Text="点击我将动态创建一段动画" MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"Foreground="White"
FontStretch="Normal"FontWeight="Bold" FontSize="18"TextAlignment="Center" Canvas.Left="100" Canvas.Top="130"Cursor="Hand" Opacity="0.5">
11.            
12.        </TextBlock>
13.    </Canvas>
14.</UserControl>
复制代码

一个几乎是空的Canvas，没啥特别的

再来看cs部分:

1. using System;
2. using System.Windows;
3. using System.Windows.Controls;
4. using System.Windows.Media;
5. using System.Windows.Media.Animation;
6. using System.Windows.Shapes;
7.  
8. namespace AnimationControl
9. {
10.    public partial class Create : UserControl
11.    {
12.        public Create()
13.        {
14.            
15.            InitializeComponent();
16.           
17.        }
18. 
19.        public void CreateAnimation()
20.        {
21.            //创建一个矩形
22.            Rectangle myRectangle= new Rectangle();
23.            myRectangle.Width =50;
24.            myRectangle.Height =50;           
25.            myRectangle.Fill = newSolidColorBrush(Color.FromArgb(255, 255, 0, 0));
26. 
27.            //把矩形加入到Canvas中
28.            LayoutRoot.Children.Add(myRectangle);
29. 
30.            //创建二个double型的动画，并设定播放时间为2秒
31.            Duration duration =new Duration(TimeSpan.FromSeconds(2));           
32.            DoubleAnimationmyDoubleAnimation1 = new DoubleAnimation();
33.            DoubleAnimationmyDoubleAnimation2 = new DoubleAnimation();
34. 
35.           myDoubleAnimation1.Duration = duration;
36.           myDoubleAnimation2.Duration = duration;
37. 
38.            //创建故事版，并加入上面的二个double型动画
39.            Storyboard sb = newStoryboard();
40.            sb.Duration =duration;
41. 
42.           sb.Children.Add(myDoubleAnimation1);
43.           sb.Children.Add(myDoubleAnimation2);
44. 
45.            //设置动画的Target目标值
46.           Storyboard.SetTarget(myDoubleAnimation1, myRectangle);
47.           Storyboard.SetTarget(myDoubleAnimation2, myRectangle);
48. 
49.            //设置动画的变化属性
50.           Storyboard.SetTargetProperty(myDoubleAnimation1, newPropertyPath("(Canvas.Left)"));
51.           Storyboard.SetTargetProperty(myDoubleAnimation2, newPropertyPath("(Canvas.Top)"));
52. 
53.            myDoubleAnimation1.To= 200;
54.            myDoubleAnimation2.To= 200;
55. 
56.            if(!LayoutRoot.Resources.Contains("unique_id"))
57.            {
58.                //将动画版加入Canvas资源,注意：这里的unique_id必须是资源中没有的唯一键
59.               LayoutRoot.Resources.Add("unique_id", sb);
60.               sb.Completed += new EventHandler(sb_Completed);
61. 
62.                //播放
63.               sb.Begin();
64.            }
65.            else
66.            {
67.                sb =null;
68.                LayoutRoot.Children.Remove(myRectangle);
69.            }
70. 
71.            
72. 
73.        }
74. 
75.        void sb_Completed(object sender,EventArgs e)
76.        {
77.           LayoutRoot.Resources.Remove("unique_id");//播放完成后，移除资源，否则再次点击时将报错
78.        }
79. 
80.        private void TextBlock_MouseLeftButtonDown(objectsender, System.Windows.Input.MouseButtonEventArgs e)
81.        {
82.            CreateAnimation();
83.        }
84.    }
85.}
复制代码

几乎所有关键的地方，都加了注释了应该能容易看明白

这里有一点要注意：创建动画的代码，必须放在构造函数中的InitializeComponent()之后调用，原因很简单，如果组件尚未初始化完毕，这时向根容器加入一些动态创建的元件当然会报错。