Silverlight实用窍门系列：27.Silverlight二维旋转+平面渐变+动画，模拟雷达扫描图之基本框架【附带源码实例】

 在现实生活中的雷达运行扫描到物体的某一些属性（比如：速度，频率）超过安全范围值将会报警。在实际的某一些项目中(比如监控系统)，我们也想制作一个雷达扫描图来模拟扫描各种设备那么应该如何做呢？

        我们将各种设备作为雷达需要扫描到的点，然后在每次扫描的时候扫描这些点，如果指针扫描碰撞到这些点的时候，会触发一个碰撞实际，以检测设备的项属性是否超过正常范围值。如果超过则让其闪亮不同的颜色。

        本节将讲诉如何制作一个雷达扫描图的基本框架如下。

              第一步制作一个雷达图的背景

              第二步雷达图的指针围绕中心点不停旋转

              第三步为了让雷达图的效果看起来更美观一些，我们应该让指针后面绘画一个倾斜的拖影效果

        首先我们使用PhotoShop绘制一个雷达图的背景图如下：

        接着我们使用DoubleAnimation动画和RotateTransform旋转对象让指针旋转起来，添加一个白色的指针，并且设置白色指针的旋转中心点RenderTransformOrigin="0.0,0.0"，现在我们先看XAML代码如下：

public   void  AddCanvasTransform()
{
#region  为Canvas添加一个二维 x-y 坐标系内围绕指定点顺时针旋转对象
RotateTransform rTransform  =   new  RotateTransform();
// 设置旋转的初始角度为360度
rTransform.Angle  =   360 ;
// 设置旋转对象的名称属性为rTrans，让下面的DoubleAnimation使用
rTransform.SetValue(NameProperty,  " rTrans " );
// 将此旋转对象给Canvas
this .layRoot.RenderTransform  =  rTransform;
#endregion

#region  设置动画板且让Canvas对象内的物品以某点位圆心360度旋转下去
// 设置一个DoubleAnimation动画来翻转这个旋转对象。
Storyboard sboard  =   new  Storyboard();
DoubleAnimation danima  =   new  DoubleAnimation(); // 设置rectangle1矩形控件的透明度的Double类型数字变化
// 设置DoubleAnimation动画的作用对象名称和作用对象属性
danima.SetValue(Storyboard.TargetNameProperty,  " rTrans " );
danima.SetValue(Storyboard.TargetPropertyProperty,  new  PropertyPath( " RotateTransform.Angle " ));
// 在10秒的时间内让动画作用的角度属性从360到0，且永远循环下去
danima.From  =   360 ; danima.To  =   0 ;
danima.Duration  =   new  Duration( new  TimeSpan( 0 ,  0 ,  10 ));
danima.RepeatBehavior  =  RepeatBehavior.Forever;
sboard.Children.Add(danima);
LayoutRoot.Resources.Add( " colorboard " , sboard);
sboard.Begin();
#endregion
}

< Rectangle x:Name = " rectangle "  Height = " 60 "  Width = " 253 "  RenderTransformOrigin = " 0.0,0.0 " >
< Rectangle.Fill >
< LinearGradientBrush EndPoint = " 0.5,1 "  MappingMode = " RelativeToBoundingBox "  StartPoint = " 0.5,0 " >
< LinearGradientBrush.RelativeTransform >
< CompositeTransform CenterY = " 0.5 "  CenterX = " 0.5 "  Rotation = " 39.2 " />
</ LinearGradientBrush.RelativeTransform >
< GradientStop Color = " #8Dffffff " />
< GradientStop Color = " #00ffffff "  Offset = " 0.483 " />
< GradientStop Color = " Transparent "  Offset = " 1 " />
</ LinearGradientBrush >
</ Rectangle.Fill >
</ Rectangle >

        完整的MainPage.xaml代码如下：

MainPage.xaml

        完整的MainPage.xaml.cs文件代码如下：

MainPage.xaml.cs

        本实例采用VS2010+Silverlight4.0编写，如需源码 SLRandar.rar 点击下载。本实例也可以点击一下图片预览效果：