Silverlight二维旋转+平面渐变+动画，模拟雷达扫描

概述1.百度查找雷达的背景图片，网上有很多可以用的：          下面这两个图片也可以在别的地方采用： 使用DoubleAnimation动画和RotateTransform旋转对象让指针旋转起来，添加一个白色的指针，并且设置白色指针的旋转中心点RenderTransformOrigin="0.0,0.0"，XAML代码如下： <Canvas Margin="300 300 0 0" Name=

1.百度查找雷达的背景图片，网上有很多可以用的：

        

下面这两个图片也可以在别的地方采用：

@H_403_25@

使用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度即可， *** 作的后台代码如下：

public voID AddCanvastransform(){Rotatetransform rtransform = new Rotatetransform();rtransform.Angle = 360;rtransform.SetValue(nameProperty,"rTrans");this.layRoot.Rendertransform = rtransform;Storyboard sboard = new Storyboard();DoubleAnimation danima = new DoubleAnimation();danima.SetValue(Storyboard.TargetnameProperty,"rTrans");danima.SetValue(Storyboard.TargetPropertyProperty,new PropertyPath("Rotatetransform.Angle"));danima.From = 360; danima.To = 0;danima.Duration = new Duration(new TimeSpan(0,10));danima.RepeatBehavior = RepeatBehavior.Forever;sboard.Children.Add(danima);LayoutRoot.Resources.Add("colorboard",sboard);sboard.Begin();}

为指针添加一个拖影效果，让指针在旋转的时候有一个拖影，使其更为美观。在这里我们使用一个矩形控件，让其产生一个渐变效果（采用linearGradIEntBrush渐变对象），再旋转一下它的角度即可完成。这个矩形控件也放在Canvas对象里面那么他就会跟着白色雷达指针一起旋转，XAML代码如下：

<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代码如下：

<UserControl x:Class="SLRandar.MainPage"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"mc:Ignorable="d"d:DesignHeight="600" d:DesignWIDth="600"><GrID x:name="LayoutRoot" HorizontalAlignment="left" VerticalAlignment="top"><Image HorizontalAlignment="left" Source="Randar.png" WIDth="600" Height="600" name="image1" Stretch="Fill" VerticalAlignment="top" /><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><Rectangle x:name="rectangle" Height="60" WIDth="253" RendertransformOrigin="0.0,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></Canvas></GrID></UserControl>

MainPage.xaml.cs文件代码如下：

using System;using System.Collections.Generic;using System.linq;using System.Net;using System.windows;using System.windows.Controls;using System.windows.documents;using System.windows.input;using System.windows.Media;using System.windows.Media.Animation;using System.windows.Shapes;namespace SLRandar{public partial class MainPage : UserControl{public MainPage(){InitializeComponent();AddCanvastransform();}public voID AddCanvastransform(){Rotatetransform rtransform = new Rotatetransform();rtransform.Angle = 360;rtransform.SetValue(nameProperty,"rTrans");this.layRoot.Rendertransform = rtransform;Storyboard sboard = new Storyboard();DoubleAnimation danima = new DoubleAnimation();danima.SetValue(Storyboard.TargetnameProperty,sboard);sboard.Begin();}}}

下面我们添加可以横向滚动的文字显示，添加一个TextBlock控件，在xaml文件里面添加下面代码：

   <!--滚动文字显示-->        <Canvas x:name="c1" margin="2,25,2,2">            <Canvas.Triggers>                <EventTrigger RoutedEvent="Canvas.Loaded" >                    <BeginStoryboard>                        <Storyboard x:name="animation" RepeatBehavior="Forever" Storyboard.TargetProperty="(Canvas.right)"  Duration="0:0:10">                            <DoubleAnimation Storyboard.Targetname="ScrollingUp"                          Storyboard.TargetProperty="(Canvas.left)" From="0" To="100" Duration="0:0:10"  />                        </Storyboard>                    </BeginStoryboard>                </EventTrigger>            </Canvas.Triggers>            <TextBlock x:name="ScrollingUp" FontWeight="Bold" Foreground="#FFFF0006"  FontSize="22" textwrapPing="Wrap" Height="113" Text="雷达扫描中…">	</TextBlock>        </Canvas>

接着添加声音代码，在xaml文件里面添加下面代码：

 <!--读取mp3文件-->        <MediaElement HorizontalAlignment="left" Height="100" VerticalAlignment="top" WIDth="100"  MediaEnded="MediaElement_MediaEnded" Source="leIDa.mp3"/>

在cs文件添加如下代码：

 private voID MediaElement_MediaEnded(object sender,RoutedEventArgs e)        {            ////播放声音文件            //MediaElement media = (MediaElement)sender;            //media.position = new TimeSpan(0);            //media.Play();        }

最后我在以上内容的基础上添加的滚动显示文字即“雷达扫描中”，还有雷达的音效等等。如图所示，包括最开始的雏形和最后的结果。

总结

以上是内存溢出为你收集整理的Silverlight二维旋转+平面渐变+动画，模拟雷达扫描全部内容，希望文章能够帮你解决Silverlight二维旋转+平面渐变+动画，模拟雷达扫描所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。