2. 程式人生 > >WPF 大數據加載過程中的等待效果——圓圈轉動

WPF 大數據加載過程中的等待效果——圓圈轉動

阿新 • • 發佈：2019-03-27
system end from collect 鏈接 handle inter summary 設計

原文:WPF 大數據加載過程中的等待效果——圓圈轉動

大家肯定遇到過或將要遇到加載大數據的時候，如果出現長時間的空白等待，一般人的概念會是：難道卡死了？

作為一個懂技術的挨踢技術，即使你明知道數據量太大正在加載，但是假如看不到任何動靜，自己覺得還是一種很不好的體驗。

之前做項目的時候有這方面的要求，我的前輩們早已給出了完美的解決方案。最近自己在努力學習，今天拿出來與大家一起分享，我想一定會有幫助的。看過之後大家會佩服我的前輩的，呵呵，好，廢話少說，下面開始。

因為怕自己班門弄斧，所以在網上先查了資料，確定很難找到這樣的實例才敢拿出來與大家見面。不過確實也找到了一個相似效果的案例，但那位高手用的全是前臺實現，而我的前輩是在後臺寫了一個類BusyDecorator，用起來更加方便。喜歡前臺xaml實現的可以去看一下那位高手的代碼：http://blog.csdn.net/qqamoon/article/details/7001693 他的代碼我沒做試驗，看他的那個實現效果跟我的是一樣的。

我的陋代碼又要上臺表現了，諸位扶好眼鏡框了哈~~

首先我們需要定義一些屬性用來保存位置，大小，角度，透明度之類：

技術分享圖片 
        /// <summary>
        /// 條的數量
        /// </summary>
        int _elementCount;

        /// <summary>
        /// 圓的半徑
      /// </summary>
        double _radious = 10;

        /// <summary>
        /// 執行動畫的DispatcherTimer
        
 
/// </summary>
        DispatcherTimer _animationTimer;

        /// <summary>
        /// 當前條的索引位置
        /// </summary>
        int _currentElementIndex = 0;

        /// <summary>
        /// 需要變換的透明度個數
        /// </summary>
        int _opacityCount;

        /// <summary>
 

        /// 透明度間的間隔
        /// </summary>
        double _opacityInterval;

        /// <summary>
        /// 透明度
        /// </summary>
        double _opacity;

        /// <summary>
        /// 最小透明度
        /// </summary>
        double _minOpacity;

        /// <summary>
        /// 條的數組
        /// </summary>
        object[] _elements;

        /// <summary>
        /// 畫布
        /// </summary>
        private Canvas _canvas;
View Code

由於我們是定義在一個類BusyDecorator裏面，所以需要在構造函數裏定義最初的靜態畫布效果。然後利用計時器控制動畫的啟動與停止。

重點便是靜態畫布的設計與Timer_Tick事件的實現。

我的前輩給出的靜態畫布設計如下：

技術分享圖片 
  private void CreateElements(Canvas canvas, double Left, double Top)
        {
            _elementCount = 12;
            _opacity = 1;
            _minOpacity = 0.3;
            double surplusOpacity = _opacity - _minOpacity;
            _opacityCount = (int)(_elementCount * 0.5);
            _opacityInterval = surplusOpacity / _opacityCount;

            _elements = new object[_elementCount];

            for (int i = 0; i < _elementCount; i++)
            {
                Rectangle rect = new Rectangle();
                rect.Fill = new SolidColorBrush(Colors.Black);
                rect.Width = 5;
                rect.Height = 5;
                rect.RadiusX = 2;
                rect.RadiusY = 2;
                if (i < _opacityCount)
                {
                    rect.Opacity = _opacity - i * _opacityInterval;
                }
                else
                {
                    rect.Opacity = _minOpacity;
                }
                rect.SetValue(Canvas.LeftProperty, Left + _radious * Math.Cos(360 / _elementCount * i * Math.PI / 180));
                rect.SetValue(Canvas.TopProperty, Top - 2.5 - _radious * Math.Sin(360 / _elementCount * i * Math.PI / 180));

                rect.RenderTransform = new RotateTransform(360 - 360 / _elementCount * i, 0, 2.5);
                canvas.Children.Add(rect);

                _elements[i] = rect;
            }

            _currentElementIndex = 0;

        }
View Code

接下來就是Timer_Tick事件了，一般人想不到這樣處理吧：

技術分享圖片 
 private void _animationTimer_Tick(object sender, EventArgs e)
        {
            try
            {
                _currentElementIndex--;
                _currentElementIndex = _currentElementIndex < 0 ? _elements.Length - 1 : _currentElementIndex;
                int opacitiedCount = 0;
                for (int i = _currentElementIndex; i < _currentElementIndex + _elementCount; i++)
                {
                    int j = i > _elements.Length - 1 ? i - _elements.Length : i;

                    if (opacitiedCount < _opacityCount)
                    {
                        ((Rectangle)_elements[j]).Opacity = _opacity - opacitiedCount * _opacityInterval;
                        opacitiedCount++;
                    }
                    else
                    {
                        ((Rectangle)_elements[j]).Opacity = _minOpacity;
                    }
                }
            }
            catch (Exception ex)
            { }
        }
View Code

好了，重點結束後就是剩下的構造函數BusyDecorator了：

技術分享圖片 
        public BusyDecorator(Canvas canvas)
        {
            this._canvas = canvas;
            _animationTimer = new DispatcherTimer();
            _animationTimer.Interval = TimeSpan.FromMilliseconds(40);
            _animationTimer.Tick += new EventHandler(_animationTimer_Tick);

            CreateElements(canvas, canvas.Width / 2, canvas.Height / 2);
        }
View Code

註意：此構造函數由於用到了canvas.width和canvas.height，所以，前臺定義canvas時一定要設置其width和height屬性。

然後是啟動動畫與停止動畫事件：

技術分享圖片 
        public void StartDecorator()
        {
            _canvas.Visibility = Visibility.Visible;
            _animationTimer.Start();
        }

        public void StopDecorator()
        {
            _canvas.Visibility = Visibility.Hidden;
            _animationTimer.Stop();
        }
View Code

好了，類BusyDecorator設計好了，下面做一個實例測試一下吧：

做一個前臺頁面：

技術分享圖片 
<Window x:Class="testFlowDocument.zhuanquanFlash"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="zhuanquanFlash" Height="300" Width="300">
    <Grid>
        <Canvas Name="canvas_bu" Width="200" Height="200"  VerticalAlignment="Top" Background="LightBlue">
       
         </Canvas> 
        <Button Name="btn_start" Content="開始" Height="50" VerticalAlignment="Bottom" Click="Button_Click" />
       
    </Grid>
</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.Shapes;

namespace testFlowDocument
{
    /// <summary>
    /// zhuanquanFlash.xaml 的交互邏輯
    /// </summary>
    public partial class zhuanquanFlash : Window
    {
        public zhuanquanFlash()
        {
            InitializeComponent();
            busy = new BusyDecorator(this.canvas_bu);
        }
        BusyDecorator busy;
        bool isstart = false;
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (isstart == false)
            {
                busy.StartDecorator();
                isstart = true;
                this.btn_start.Content = "停止";
            }
            else
            {
                busy.StopDecorator();
                isstart = false;
                this.btn_start.Content = "開始";
            }
        }
    }
}
View Code

靜態效果圖：

技術分享圖片

PS：如何快速制作動態gif圖？像上邊鏈接地址裏的那樣的gif圖。不會photoshop，求推薦好使工具~~

本文地址：http://www.cnblogs.com/jying/p/3230391.html 轉載請寫明出處~~

ok，到此為止，謝謝大家捧場~~

個人小站歡迎來踩：駕校教練評價平臺 | 為愛豆砌照片墻

WPF 大數據加載過程中的等待效果——圓圈轉動

相關推薦

WPF 大數據加載過程中的等待效果——圓圈轉動

system end from collect 鏈接 handle inter summary 設計 原文:WPF 大數據加載過程中的等待效果——圓圈轉動 大家肯定遇到過或將要遇到加載大數據的時候，如果出現長時間的空白等待，一般人的概念會是：難道卡死了？ 作為一個懂技

【舊文章搬運】Windows中全局鉤子DLL的加載過程

span win32 mcal windows isp dex 百度空間 pat pro 原文發表於百度空間，2011-03-24========================================================================

ELF文件的格式和加載過程

pos ram glob ios sel 執行 log iar section http://blog.csdn.net/lingfong_cool/article/details/7832896 （一） ELF 文件的格式 ELF 文件類型 (1) 可重定位文

[轉]PHP的執行流程,PHP擴展加載過程

nan air bing elong ges ava oop 過程 ssa Java%E5%9F%BA%E7%A1%80-OOP%E7%89%B9%E6%80%A7%E4%B9%8B%E5%B0%81%E8%A3%85%E3%80%81%E7%BB%A7%E6%89%BF%

JVM 類加載過程

加載 logs http ron cnblogs .com blog 加載過程 strong JVM 類加載過程

Echarts--異步數據加載和更新

meta timeout jquer 加載 text chart 雪紡衫 body pan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

數據加載更多js代碼

else dom src log tle append length charset har <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

Spring IOC bean加載過程

temp invoke sage 使用 rom config over dem 工廠 首先我們不要在學習Spring的開始產生畏難情緒。Spring沒有臆想的那麽高深，相反，它幫我們再項目開發中制定項目框架,簡化項目開發。它的主要功能是將項目開發中繁瑣的過程流程化,模式化，

轉 A10/A20 Bootloader加載過程分析

轉換 開發 title modules 上電 invalid 添加 i/o github A10/A20 Bootloader加載過程分析 註：由於全誌A10和A20在加載Bootloader過程方面基本一致，下面僅以A20敘述，但同時也適用於A10。另外在不需要區分Cu

spring啟動加載過程源碼分析

fault prot instant 消息 成了 ner 設置 [] wire 我們知道啟動spring容器兩常見的兩種方式（其實都是加載spring容器的xml配置文件時啟動的）： 1.在應用程序下加載 ApplicationContext ctx = new Clas

大數據學習之Scala中main函數的分析以及基本規則（2）

語言 python rgs 數字 popu 結束 圖片 區別 返回 一、main函數的分析 首先來看我們在上一節最後看到的這個程序，我們先來簡單的分析一下。有助於後面的學習 object HelloScala { def main(args:

數據加載存儲和文件格式

讀取文本 == nan most module message col art mos 原文地址： https://github.com/AsuraDong/Blog/blob/master/Articles/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B

SQL Server數據庫安裝過程中遇到的問題

出現 安裝 .com benet 計算機 div 端口 分析器 名稱 之前因為項目需求，使用SQL Server 2008R數據庫，在安裝完成之後，登錄的時候遇到點問題 問題是： 　　在本地進行連接的時候localhost、.等無法直接登錄，必須加上實例名，如localho

JVM類加載機制詳解（一）JVM類加載過程

進行 虛擬機啟動 類加載的時機 bsp 參與 tro ext 環境 java代碼 首先Throws（拋出）幾個自己學習過程中一直疑惑的問題： 1、什麽是類加載？什麽時候進行類加載？ 2、什麽是類初始化？什麽時候進行類初始化？ 3、什麽時候會為變量分配內存？ 4、什麽時候會為

thinkcmf5 模板版變量的加載過程

ace decode value 過程 rom gets foreach span fec 在 HomeBaseController.php 的 fech方法 $more = $this->getThemeFileMore($template); 用 ech

【Spring源碼分析系列】啟動component-scan類掃描加載過程

代碼段 包裝 ole 一次 設定 logs sep 列表 support 原文地址：http://blog.csdn.net/xieyuooo/article/details/9089441/ 在spring 3.0以上大家都一般會配置一個Servelet，如下所示： 1

虛擬機類加載機制之類的加載過程

方式 命名 校驗 加載器 準備 計算 語言 直接 入口 引言 　　類加載的全過程分為5個階段：加載，驗證，準備，解析，初始化。 加載 　　加載階段虛擬機需要完成3件事： 　　1）通過一個類的全限定名來獲取定義此類的二進制字節流，獲取方式很多種如Class文件、網絡、運行時計

iOS開發之0行代碼加載NSBundle中的@2x與@3x圖片

ios nsbundle pathforresource 本文只針對通過NSBundle對象的方法 pathForResource 獲取本地圖片資源遇到的圖片名無法自動識別@2x與@3x名稱的問題進行測試、總結與分享。 加載本地圖片資源的方式一般通

類的加載過程

構造函數 屬性 () stat 空間 構造代碼塊 地址 進行 內存地址 Person person = new Person();為例進行說明。 1).因為new用到了Person.class，所以會先找到Person.class文件，並加載到內存中; 2).執行該類中的s

easyui datagrid 的數據加載Json數據

json ota 數據 eas easyu loaddata grid pan total var obj = {‘total‘:100,‘rows‘:[{id:‘1‘,name:‘一‘},{id:‘2‘,name:‘二‘}]}; $(‘#tt‘).datagrid