我的Silverlight银光闪耀之旅就从第一个sample开始。
1.0beta 的第一个例子就是clock示例,这个示例使用了xaml的动画面板,至于动画面板的一些属性字段,大家有不明白的可以参看我的博客左侧的silverlight msdn链接来查看。
xaml主要代码:
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="12:0:0" RepeatBehavior="Forever"/>
<DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minuteHandTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="1:0:0" RepeatBehavior="Forever"/>
<DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondHandTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="0:1:0" RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="parentCanvas" Storyboard.TargetProperty="Opacity" From="0" To="0.7" Duration="0:0:4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourHandTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="12:0:0" RepeatBehavior="Forever"/>
<DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minuteHandTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="1:0:0" RepeatBehavior="Forever"/>
<DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondHandTransform" Storyboard.TargetProperty="Angle" From="180" To="540" Duration="0:1:0" RepeatBehavior="Forever"/>
<DoubleAnimation Storyboard.TargetName="parentCanvas" Storyboard.TargetProperty="Opacity" From="0" To="0.7" Duration="0:0:4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>
很容易看出它在动画面板里当事件 Canvas.Loaded 触发的时候,执行了一些动画,里面定义了三个动画,也就是时针,分针,秒针。三个分别指定了重要的From、To、Duration属性,以及循环模式为一直循环。这样,大家可以想像一下只要在这个xaml触发了Canvas.Loaded 事件的时候,那么这三个指针动画就会按照规定的动画时间内一直循环,循环一次的时间由各自周期指定。那不就是一个钟表吗?
但是现在还是有一个问题,就是你怎么知道客户端的时间,你在最开始加载的时候,确保时针分针秒针都是指向的客户端时间吗?在这个示例中,用了javascript来指定当前客户端的时间。
就是如下这段代码:
1//时钟对象
2function Clock() { }
3//时钟的加载事件:
4Clock.prototype.handleLoad = function(control, userContext, rootElement) {
5 var now = new Date();
6
7 var hourAnimation = control.content.findName("hourAnimation");
8 var minuteAnimation = control.content.findName("minuteAnimation");
9 var secondAnimation = control.content.findName("secondAnimation");
10
11 if (hourAnimation) {
12 var hours = now.getHours();
13
14 // We need to include minutes as well. Because each hour consists of
15 // 30 degrees, each additional minute adds half a degree to the angle
16 // of the hour hand
17
18 var angle = (hours / 12) * 360 + now.getMinutes()/2;
19 angle += 180;
20
21 hourAnimation.from = angle.toString();
22 hourAnimation.to = (angle + 360).toString();
23 }
24
25 if (minuteAnimation) {
26 var minutes = now.getMinutes();
27 var angle = (minutes / 60) * 360;
28 angle += 180;
29
30 minuteAnimation.from = angle.toString();
31 minuteAnimation.to = (angle + 360).toString();
32 }
33
34 if (secondAnimation) {
35 var seconds = now.getSeconds();
36 var angle = (seconds / 60) * 360;
37 angle += 180;
38
39 secondAnimation.from = angle.toString();
40 secondAnimation.to = (angle + 360).toString();
41 }
42}
2function Clock() { }
3//时钟的加载事件:
4Clock.prototype.handleLoad = function(control, userContext, rootElement) {
5 var now = new Date();
6
7 var hourAnimation = control.content.findName("hourAnimation");
8 var minuteAnimation = control.content.findName("minuteAnimation");
9 var secondAnimation = control.content.findName("secondAnimation");
10
11 if (hourAnimation) {
12 var hours = now.getHours();
13
14 // We need to include minutes as well. Because each hour consists of
15 // 30 degrees, each additional minute adds half a degree to the angle
16 // of the hour hand
17
18 var angle = (hours / 12) * 360 + now.getMinutes()/2;
19 angle += 180;
20
21 hourAnimation.from = angle.toString();
22 hourAnimation.to = (angle + 360).toString();
23 }
24
25 if (minuteAnimation) {
26 var minutes = now.getMinutes();
27 var angle = (minutes / 60) * 360;
28 angle += 180;
29
30 minuteAnimation.from = angle.toString();
31 minuteAnimation.to = (angle + 360).toString();
32 }
33
34 if (secondAnimation) {
35 var seconds = now.getSeconds();
36 var angle = (seconds / 60) * 360;
37 angle += 180;
38
39 secondAnimation.from = angle.toString();
40 secondAnimation.to = (angle + 360).toString();
41 }
42}
这段代码是构造了一个Clock对象,然后向它的原型附加了一个方法,handleLoad,这个方法就是在对xaml刚在客户端加载的时候,对三个动画针的初始化。我们再来看看它的实现细节。
代码的第7、8、9行,就是获取xaml中的对象的引用,这个不就是类似于js在获取页面控件引用的 getElementById方法吗?简直太熟悉了!(当然也类似js与flash的交互)
然后,对它的sl控件的属性进行赋值,例如:hourAnimation.from = angle.toString();
这个也是很简单的呀,和把input的value 赋值不是一样的吗?input 的 tag里面的属性和访问方式一模一样。一个tag就可以理解为一个对象,tag里面的字段就是对象的属性,对其的操作就是操作对象的属性。
怎么样,很简单吧?如果觉得好玩,大家就跟着一起来学习silverlight吧!