Silverlight:使用Storyboard控制动画--自制钟表

说明：

1. Storyboard是一种控制时间播放动画的常用方法。 Storyboard 要有Name， 比如clockStoryboard( <Storyboard x:Name="clockStoryboard"/>), 可以使用Name来控制动画的播放与暂停等操作, 如在 Grid的Loaded事件中让动画开始(<Grid Loaded="AnimationStart"/>...在cs文件中定义事件public void AnimationStart(object sender, EventArgs e){ clockStoryboard.Begin();})。
2. Storyboard中有多种Animation, 如 DoubleAnimation、 ColorAnimation、 PointAnimation。
3. Storyboard中最重要的两个属性是 Storyboard.TargetName 和 Storyboard.TargetProperty。 其中, TargetProperty说明要在该目标的哪一个属性上做动画，比如在Ellipse的color属性上做动画，那么Storyboard.TargetName="ellipseName" Storyboard.TargetProperty="(Fill).(Color)", 本例中Angle属性是RenderTransform的属性值。
4. 本例是在Ellipse的RenderTransform上做动画， 使Ellipse绕着中心点转动， 其中hourhand 1小时转动360度。 minitehand 1分钟转动360度。 secondhand 1秒转动360度。
5. Duration="时: 分:秒" 说明需要多长时间完成一个动画周期。

MainPage.xaml:
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="SilverlightApplication1.MainPage"
Width="640" Height="480" mc:Ignorable="d">

<UserControl.Resources>
<Storyboard x:Name="clockStoryboard">
<DoubleAnimation x:Name="hourAnimation" Storyboard.TargetName="hourhandTransform" Storyboard.TargetProperty="Angle" Duration="12:0:0" RepeatBehavior="Forever" To="360"></DoubleAnimation>
<DoubleAnimation x:Name="minuteAnimation" Storyboard.TargetName="minutehandTransform" Storyboard.TargetProperty="Angle" Duration="1:0:0" RepeatBehavior="Forever" To="360"></DoubleAnimation>
<DoubleAnimation x:Name="secondAnimation" Storyboard.TargetName="secondhandTransform" Storyboard.TargetProperty="Angle" Duration="0:1:0" RepeatBehavior="Forever" To="360"></DoubleAnimation>
</Storyboard>
</UserControl.Resources>

<Grid x:Name="LayoutRoot" Loaded="SetAndStartClock" Background="White">
<Ellipse x:Name="outerrim" Stroke="Black" Height="330" HorizontalAlignment="Left" Margin="90,74,0,0" VerticalAlignment="Top" Width="330">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="Silver" Offset="1"/>
<GradientStop Color="#FFACACAC" Offset="0.708"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="shadow" Stroke="Black" Height="330" HorizontalAlignment="Left" Margin="100,76,0,0" VerticalAlignment="Top" Width="330" Fill="#FF0C0B0B" Opacity="0.3"/>
<Ellipse x:Name="face" Stroke="Black" Height="270" HorizontalAlignment="Left" Margin="120,103,0,0" VerticalAlignment="Top" Width="270" Fill="Black"/>
<Ellipse x:Name="center" Stroke="#FF3ED83E" StrokeThickness="8" HorizontalAlignment="Left" Margin="240,224,0,226" Width="30"/>
<Rectangle x:Name="secondhand" Fill="Red" Stroke="Red" Height="80" HorizontalAlignment="Left" Margin="253,139,0,0" Width="5" VerticalAlignment="Top" d:LayoutOverrides="Height" RenderTransformOrigin="0.6,1.244">
<Rectangle.RenderTransform>
<RotateTransform x:Name="secondhandTransform"></RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="minutehand" Stroke="Green" HorizontalAlignment="Left" Margin="253,155,0,0" Width="5" StrokeThickness="8" Fill="Black" Height="60" VerticalAlignment="Top" RenderTransformOrigin="0.4,1.4">
<Rectangle.RenderTransform>
<RotateTransform x:Name="minutehandTransform"></RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="hourhand" Stroke="Green" HorizontalAlignment="Left" Margin="252,175,0,0" Width="5" Fill="Black" StrokeThickness="8" Height="40" VerticalAlignment="Top" RenderTransformOrigin="0.5,1.6">
<Rectangle.RenderTransform>
<RotateTransform x:Name="hourhandTransform"></RotateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</UserControl>

MainPage.xaml.cs:
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightApplication1
{
public partial class MainPage : UserControl
{
public MainPage()
{
// Required to initialize variables
InitializeComponent();
}

private void SetAndStartClock(object sender, EventArgs e)
{

DateTime currentDate = System.DateTime.Now;
double hourangel = (currentDate.Hour%12)*(360/12) + currentDate.Minute / 12;
double miniteangle = currentDate.Minute * (360/60);
double secondangle = currentDate.Second * (360 / 60);

hourAnimation.From = hourangel;
hourAnimation.To = hourangel + 360;

minuteAnimation.From = miniteangle ;
minuteAnimation.To = miniteangle + 360;

secondAnimation.From = secondangle ;
secondAnimation.To = secondangle + 360;

clockStoryboard.Begin();
}

}
}