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();
  }

 }
}