silverlight   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Silverlight二维旋转+平面渐变+动画,模拟雷达扫描大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

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

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

        

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

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

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


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度即可,操作的后台代码如下:

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

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

<UserControl x:Class="SLRandar.MainPage"
xmlns="http://scheR_781_11845@as.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://scheR_781_11845@as.microsoft.com/winfx/2006/xaml"
xmlns:d="http://scheR_781_11845@as.microsoft.com/expression/blend/2008"
xmlns:mc="http://scheR_781_11845@as.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>


@H_407_18@mainPage.xaml.cs文件代码如下:

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

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


@H_874_103@


下面我们添加可以横向滚动文字显示添加一个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二维旋转+平面渐变+动画,模拟雷达扫描

大佬总结

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

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。