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()之后调用,原因很简单,如果组件尚未初始化完毕,这时向根容器加入一些动态创建的元件当然会报错。