码上快乐

相关内容   简体   繁体

WPF之loading正在加载效果的两种实现

本文转载自  查看原文  2017-07-11 15:20  3886    Loading/ WPF+C#学习/ wpf

WPF开发程序过程中总会遇到一个需求：Loading...正在加载中，这样一个需求作为加载的过渡效果。

这里博主给出两种方法来实现：

1.使用一张规则图片，加上图片的wpf旋转效果来实现加载效果。

2.wpf程序划点，然后旋转实现加载效果。

下面分别给出实现方法及代码：

1.规则图片的旋转实现

<Image x:Name="run_image" Source="../Images/loading_pic.png" Stretch="UniformToFill" Margin="25,0,0,0" Width="28" Height="28"
HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" >
</Image>

这里的RenderTransformOrigin="0.5,0.5"表示以图片的圆心为指定变换原点

在后台中初始化代码中加上下面一段：

//图片转动
            DoubleAnimation da = new DoubleAnimation();
            da.From = 0;
            da.To = 360;
            da.Duration = new Duration(TimeSpan.FromSeconds(3));
            da.RepeatBehavior = RepeatBehavior.Forever;
            RotateTransform rt = new RotateTransform();
            run_image.RenderTransform = rt;
            rt.BeginAnimation(RotateTransform.AngleProperty, da);
//图片转动
View Code

2.wpf程序划点，然后旋转实现加载效果

在xaml中我们添加一个遮罩层和这个loading的图像：

<Grid x:Name="LoadGrid" Visibility="Collapsed" IsVisibleChanged="HandleVisibleChanged">
            <Grid.Background>
                <SolidColorBrush Color="Black" Opacity="0.2"  />
            </Grid.Background>
            <Grid.Resources>
                <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
                <!--<SolidColorBrush Color="Black" x:Key="BackgroundColor" Opacity=".20" />-->
            </Grid.Resources>

            <Viewbox Width="100" Height="100"  
            HorizontalAlignment="Center"  
            VerticalAlignment="Center">
                <Grid x:Name="LayoutRoot"   
                Background="Transparent"  
                ToolTip="Please wait...."  
                HorizontalAlignment="Center"  
                VerticalAlignment="Center">
                    <TextBlock Text="Loading..."  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Foreground="#FFE3953D" FontWeight="Bold" />
                    <Canvas RenderTransformOrigin="0.5,0.5"  
                    HorizontalAlignment="Center"  
                    VerticalAlignment="Center" Width="120"  
                    Height="120" Loaded="HandleLoaded"  
                    Unloaded="HandleUnloaded"  >
                        <Ellipse x:Name="C0" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="1.0"/>
                        <Ellipse x:Name="C1" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.9"/>
                        <Ellipse x:Name="C2" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.8"/>
                        <Ellipse x:Name="C3" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.7"/>
                        <Ellipse x:Name="C4" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.6"/>
                        <Ellipse x:Name="C5" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.5"/>
                        <Ellipse x:Name="C6" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.4"/>
                        <Ellipse x:Name="C7" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.3"/>
                        <Ellipse x:Name="C8" Width="20" Height="20"  
                         Canvas.Left="0"  
                         Canvas.Top="0" Stretch="Fill"  
                         Fill="{StaticResource CirclesColor}" Opacity="0.2"/>
                        <Canvas.RenderTransform>
                            <RotateTransform x:Name="SpinnerRotate"  
                         Angle="0" />
                        </Canvas.RenderTransform>
                    </Canvas>
                </Grid>
            </Viewbox>
        </Grid>
View Code

上面的代码实现了：一个半透明的黑色蒙版，9个颜色相同但是透明度不同的蓝色圆点，loading字样

然后需要在后台cs代码中加入下列代码：

        #region 
        /// <summary>
        /// 队列计时器
        /// </summary>
        private DispatcherTimer animationTimer;
        #endregion

        #region 加载界面初始化方法

        public void LoadingWait()
        {
            animationTimer = new DispatcherTimer(
                DispatcherPriority.ContextIdle, Dispatcher);
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 90);
        }
        #endregion

        #region 执行方法

        private void Start()
        {
            animationTimer.Tick += HandleAnimationTick;
            animationTimer.Start();
        }

        private void Stop()
        {
            animationTimer.Stop();
            animationTimer.Tick -= HandleAnimationTick;
        }

        private void HandleAnimationTick(object sender, EventArgs e)
        {
            SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;
        }

        private void HandleLoaded(object sender, RoutedEventArgs e)
        {
            const double offset = Math.PI;
            const double step = Math.PI * 2 / 10.0;

            SetPosition(C0, offset, 0.0, step);
            SetPosition(C1, offset, 1.0, step);
            SetPosition(C2, offset, 2.0, step);
            SetPosition(C3, offset, 3.0, step);
            SetPosition(C4, offset, 4.0, step);
            SetPosition(C5, offset, 5.0, step);
            SetPosition(C6, offset, 6.0, step);
            SetPosition(C7, offset, 7.0, step);
            SetPosition(C8, offset, 8.0, step);
        }

        private void SetPosition(Ellipse ellipse, double offset,
            double posOffSet, double step)
        {
            ellipse.SetValue(Canvas.LeftProperty, 50.0
                + Math.Sin(offset + posOffSet * step) * 50.0);

            ellipse.SetValue(Canvas.TopProperty, 50
                + Math.Cos(offset + posOffSet * step) * 50.0);
        }

        private void HandleUnloaded(object sender, RoutedEventArgs e)
        {
            Stop();
        }

        private void HandleVisibleChanged(object sender,
            DependencyPropertyChangedEventArgs e)
        {
            bool isVisible = (bool)e.NewValue;
            if (animationTimer == null)
            {
                LoadingWait();
            }
            if (isVisible)
                Start();
            else
                Stop();
        }
View Code

以上的代码主要实现loading图像的旋转，这里原理是这样的：初始化的时候先将9个圆点按照圆形正圆排列（HandleLoaded方法），然后初始化一个DispatcherTimer定时器（知识点：timer和DispatcherTimer的区别），这样定时触发HandleAnimationTick方法（该方法会给圆形图像设置旋转角度）

最重要的是，这些动作在该图显示显示的时候发生（IsVisibleChanged="HandleVisibleChanged" //这个元素的 IsVisible 属性值变化时发生），要想不显示该效果只需要将该元素隐藏即可（this.LoadGrid.Visibility = System.Windows.Visibility.Collapsed;//遮罩层隐藏）。

这块其实可以单独提取出来，哪里想要使用直接引用即可。

 新建一个usercontrol

<UserControl x:Class="LoadingMask_Demo.LoadingWait"  
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
             IsVisibleChanged="HandleVisibleChanged">  
    <UserControl.Background>  
        <SolidColorBrush Color="Black" Opacity="0.2"  />  
    </UserControl.Background>  
    <UserControl.Resources>  
        <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />  
        <!--<SolidColorBrush Color="Black" x:Key="BackgroundColor" Opacity=".20" />-->  
    </UserControl.Resources>  
  
    <Viewbox Width="100" Height="100"    
            HorizontalAlignment="Center"    
            VerticalAlignment="Center">  
        <Grid x:Name="LayoutRoot"     
                Background="Transparent"    
                ToolTip="Please wait...."    
                HorizontalAlignment="Center"    
                VerticalAlignment="Center">  
            <TextBlock Text="Loading..."  HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Foreground="#FFE3953D" FontWeight="Bold" />  
            <Canvas RenderTransformOrigin="0.5,0.5"    
                    HorizontalAlignment="Center"    
                    VerticalAlignment="Center" Width="120"    
                    Height="120" Loaded="HandleLoaded"    
                    Unloaded="HandleUnloaded"  >  
                <Ellipse x:Name="C0" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="1.0"/>  
                <Ellipse x:Name="C1" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.9"/>  
                <Ellipse x:Name="C2" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.8"/>  
                <Ellipse x:Name="C3" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.7"/>  
                <Ellipse x:Name="C4" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.6"/>  
                <Ellipse x:Name="C5" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.5"/>  
                <Ellipse x:Name="C6" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.4"/>  
                <Ellipse x:Name="C7" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.3"/>  
                <Ellipse x:Name="C8" Width="20" Height="20"    
                         Canvas.Left="0"    
                         Canvas.Top="0" Stretch="Fill"    
                         Fill="{StaticResource CirclesColor}" Opacity="0.2"/>  
                <Canvas.RenderTransform>  
                    <RotateTransform x:Name="SpinnerRotate"    
                         Angle="0" />  
                </Canvas.RenderTransform>  
            </Canvas>  
        </Grid>  
    </Viewbox>  
</UserControl>
View Code

对应的cs文件代码：

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Data;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Imaging;  
using System.Windows.Navigation;  
using System.Windows.Shapes;  
using System.Windows.Threading;  
  
namespace LoadingMask_Demo  
{  
    /// <summary>  
    /// Interaction logic for LoadingWait.xaml  
    /// </summary>  
    public partial class LoadingWait : UserControl  
    {  
        #region Data  
        private readonly DispatcherTimer animationTimer;  
        #endregion  
 
        #region Constructor  
        public LoadingWait()  
        {  
            InitializeComponent();  
  
            animationTimer = new DispatcherTimer(  
                DispatcherPriority.ContextIdle, Dispatcher);  
            animationTimer.Interval = new TimeSpan(0, 0, 0, 0, 90);  
        }  
        #endregion  
 
        #region Private Methods  
        private void Start()  
        {  
            animationTimer.Tick += HandleAnimationTick;  
            animationTimer.Start();  
        }  
  
        private void Stop()  
        {  
            animationTimer.Stop();  
            animationTimer.Tick -= HandleAnimationTick;  
        }  
  
        private void HandleAnimationTick(object sender, EventArgs e)  
        {  
            SpinnerRotate.Angle = (SpinnerRotate.Angle + 36) % 360;  
        }  
  
        private void HandleLoaded(object sender, RoutedEventArgs e)  
        {  
            const double offset = Math.PI;  
            const double step = Math.PI * 2 / 10.0;  
  
            SetPosition(C0, offset, 0.0, step);  
            SetPosition(C1, offset, 1.0, step);  
            SetPosition(C2, offset, 2.0, step);  
            SetPosition(C3, offset, 3.0, step);  
            SetPosition(C4, offset, 4.0, step);  
            SetPosition(C5, offset, 5.0, step);  
            SetPosition(C6, offset, 6.0, step);  
            SetPosition(C7, offset, 7.0, step);  
            SetPosition(C8, offset, 8.0, step);  
        }  
  
        private void SetPosition(Ellipse ellipse, double offset,  
            double posOffSet, double step)  
        {  
            ellipse.SetValue(Canvas.LeftProperty, 50.0  
                + Math.Sin(offset + posOffSet * step) * 50.0);  
  
            ellipse.SetValue(Canvas.TopProperty, 50  
                + Math.Cos(offset + posOffSet * step) * 50.0);  
        }  
  
        private void HandleUnloaded(object sender, RoutedEventArgs e)  
        {  
            Stop();  
        }  
  
        private void HandleVisibleChanged(object sender,  
            DependencyPropertyChangedEventArgs e)  
        {  
            bool isVisible = (bool)e.NewValue;  
  
            if (isVisible)  
                Start();  
            else  
                Stop();  
        }  
        #endregion    
    }  
}
View Code

调用时前台的代码：

<Window x:Class="LoadingMask_Demo.MainWindow"  
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
        Title="MainWindow" Height="350" Width="525"  
        xmlns:local="clr-namespace:LoadingMask_Demo"  
        >  
    <DockPanel>  
        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
            <Button  Content="show" Width="70" Height="30" Click="ShowButton_Click" />  
            <Button  Content="hide" Width="70" Height="30" Click="HideButton_Click"/>  
        </StackPanel>  
          
        <Grid Background="#FF484848" DockPanel.Dock="Bottom">  
            <TextBlock Text="asdfasdfasdf" Foreground="White"/>  
            <local:LoadingWait x:Name="_loading"  Visibility="Collapsed"/>  
        </Grid>  
    </DockPanel>  
</Window>
View Code

调用时后台控制显示隐藏的代码：

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Text;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Data;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Imaging;  
using System.Windows.Navigation;  
using System.Windows.Shapes;  
  
namespace LoadingMask_Demo  
{  
    /// <summary>  
    /// Interaction logic for MainWindow.xaml  
    /// </summary>  
    public partial class MainWindow : Window  
    {  
        public MainWindow()  
        {  
            InitializeComponent();  
        }  
  
        private void ShowButton_Click(object sender, RoutedEventArgs e)  
        {  
            this._loading.Visibility = Visibility.Visible;  
        }  
  
        private void HideButton_Click(object sender, RoutedEventArgs e)  
        {  
            this._loading.Visibility = Visibility.Collapsed;  
        }  
  
    }  
}
View Code

看一下最后的效果图：


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 两种页面加载等待效果的实现 WPF 实现Loading效果 图片的懒加载的两种效果 纯CSS3实现loading正在加载。。。 6种纯css实现loading效果 loading(正在加载特效) WPF实现通知的两种方式（NuGet） Cocos2dx实现光影效果的两种方式 Acitivity进入退出动画效果的两种实现 原生js - 两种图片懒加载实现原理
 
粤ICP备18138465号  © 2018-2024 CODEPRJ.COM