天天看點

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

 在現實生活中的雷達運作掃描到物體的某一些屬性(比如:速度,頻率)超過安全範圍值将會報警。在實際的某一些項目中(比如監控系統),我們也想制作一個雷達掃描圖來模拟掃描各種裝置那麼應該如何做呢?

        我們将各種裝置作為雷達需要掃描到的點,然後在每次掃描的時候掃描這些點,如果指針掃描碰撞到這些點的時候,會觸發一個碰撞實際,以檢測裝置的項屬性是否超過正常範圍值。如果超過則讓其閃亮不同的顔色。

        本節将講訴如何制作一個雷達掃描圖的基本架構如下。

              第一步制作一個雷達圖的背景

              第二步雷達圖的指針圍繞中心點不停旋轉

              第三步為了讓雷達圖的效果看起來更美觀一些,我們應該讓指針後面繪畫一個傾斜的拖影效果

        首先我們使用PhotoShop繪制一個雷達圖的背景圖如下:

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

        接着我們使用DoubleAnimation動畫和RotateTransform旋轉對象讓指針旋轉起來,添加一個白色的指針,并且設定白色指針的旋轉中心點RenderTransformOrigin="0.0,0.0",現在我們先看XAML代碼如下:

<Canvas Margin="300 300 0 0" Name="layRoot">

<Line X1="0" Y1="0" X2="252" Y2="0" StrokeThickness="1" RenderTransformOrigin="0.0,0.0" Stroke="#ffffffff" Fill="#ffffffff"></Line>

</Canvas>

         為這個白色的指針所屬的Canvas設定一個RotateTransform二維坐标的旋轉對象,其參數Angle為角度。然後添加一個DoubleAnimation對象來讓這個角度在10秒内從360度變化到0度即可,操作的背景代碼如下:

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

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

}

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

        最後為指針添加一個拖影效果,讓指針在旋轉的時候有一個拖影,使其更為美觀。在這裡我們使用一個矩形控件,讓其産生一個漸變效果(采用LinearGradientBrush漸變對象),再旋轉一下它的角度即可完成。這個矩形控件也放在Canvas對象裡面那麼他就會跟着白色雷達指針一起旋轉,其XAML代碼如下:

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

<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>

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

        完整的MainPage.xaml代碼如下:

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

MainPage.xaml

        完整的MainPage.xaml.cs檔案代碼如下:

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

MainPage.xaml.cs

Silverlight實用竅門系列:27.Silverlight二維旋轉+平面漸變+動畫,模拟雷達掃描圖之基本架構【附帶源碼執行個體】

<a></a>

繼續閱讀