zoukankan      html  css  js  c++  java

  • 手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）

    效果图:

    还在羡慕metro的ProgressRing吗？

    wpf 也可以拥有

    首先说下思路，

    一共6个点围绕一直圆转，所以需要使用rotation动画 并且一直转下去。

    那么下面的问题就好解决了。

    首先是xaml 部分

    我们需要实现旋转动画：

    所以要用到这个：

    [html] view plaincopyprint?
     
    1. <DoubleAnimationUsingKeyFrames   
    2.       Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">  
    3.                 <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>  
    4.                 <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">  
    5.                 </EasingDoubleKeyFrame>  
    6.                 <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">  
    7.                 </EasingDoubleKeyFrame>  
    8.                 <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">  
    9.                 </EasingDoubleKeyFrame>  
    10.                 <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>  
    11.                 <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">  
    12.                 </EasingDoubleKeyFrame>  
    13.                 <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">  
    14.                 </EasingDoubleKeyFrame>  
    15.             </DoubleAnimationUsingKeyFrames>  

    上面这一段是单个ellipse的运动轨迹，当然你需要在属性中设置他的中心点值

    代码如下：

    [html] view plaincopyprint?
     
    1. <Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >  
    2.             <Ellipse.RenderTransform>  
    3.                 <TransformGroup>  
    4.                     <ScaleTransform/>  
    5.                     <SkewTransform/>  
    6.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    7.                     <TranslateTransform/>  
    8.                 </TransformGroup>  
    9.             </Ellipse.RenderTransform>  
    10.         </Ellipse>  


     

    接下来的事情就好办了，我们需要他转1圈就消失 结束后也消失，所以需要控制透明度，

    [html] view plaincopyprint?
     
    1. <DoubleAnimationUsingKeyFrames   
    2.                         Storyboard.TargetProperty="Opacity">  
    3.                 <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>  
    4.                 <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">  
    5.                     <EasingDoubleKeyFrame.EasingFunction>  
    6.                         <BackEase EasingMode="EaseInOut"/>  
    7.                     </EasingDoubleKeyFrame.EasingFunction>  
    8.                 </EasingDoubleKeyFrame>  
    9.                 <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">  
    10.                 </EasingDoubleKeyFrame>  
    11.                 <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">  
    12.                 </EasingDoubleKeyFrame>  
    13.                 <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>  
    14.                 <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">  
    15.                     <EasingDoubleKeyFrame.EasingFunction>  
    16.                         <BackEase EasingMode="EaseOut"/>  
    17.                     </EasingDoubleKeyFrame.EasingFunction>  
    18.                 </EasingDoubleKeyFrame>  
    19.                 <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">  
    20.                 </EasingDoubleKeyFrame>  
    21.             </DoubleAnimationUsingKeyFrames>  


     

    最终把一个圆变成多个圆的工作 就交给代码了，需要一点点小技巧 以下使用.net 4.5实现 其他版本可以吧Task.Delay 替换成Thread.Sleep

    [html] view plaincopyprint?
     
    1. <UserControl  
    2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"   
    5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"   
    6.              xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"  
    7.              xmlns:local="clr-namespace:Transvalue.MetroStyleBusyIndicator"   
    8.              x:Class="Transvalue.MetroStyleBusyIndicator.MetroRotaionIndicator"   
    9.              mc:Ignorable="d"   
    10.              d:DesignHeight="300" d:DesignWidth="300">  
    11.     <UserControl.Resources>  
    12.         <Storyboard x:Key="Trans" RepeatBehavior="Forever">  
    13.             <DoubleAnimationUsingKeyFrames   
    14.                         Storyboard.TargetProperty="(Ellipse.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">  
    15.                 <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>  
    16.                 <EasingDoubleKeyFrame Value="90" KeyTime="0:0:0.2">  
    17.                 </EasingDoubleKeyFrame>  
    18.                 <EasingDoubleKeyFrame Value="270" KeyTime="0:0:1.6">  
    19.                 </EasingDoubleKeyFrame>  
    20.                 <EasingDoubleKeyFrame Value="450" KeyTime="0:0:1.8">  
    21.                 </EasingDoubleKeyFrame>  
    22.                 <LinearDoubleKeyFrame Value="630" KeyTime="0:0:3.2"/>  
    23.                 <EasingDoubleKeyFrame Value="720" KeyTime="0:0:3.4">  
    24.                 </EasingDoubleKeyFrame>  
    25.                 <EasingDoubleKeyFrame Value="720" KeyTime="0:0:5.0">  
    26.                 </EasingDoubleKeyFrame>  
    27.             </DoubleAnimationUsingKeyFrames>  
    28.             <DoubleAnimationUsingKeyFrames   
    29.                         Storyboard.TargetProperty="Opacity">  
    30.                 <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>  
    31.                 <EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.2">  
    32.                     <EasingDoubleKeyFrame.EasingFunction>  
    33.                         <BackEase EasingMode="EaseInOut"/>  
    34.                     </EasingDoubleKeyFrame.EasingFunction>  
    35.                 </EasingDoubleKeyFrame>  
    36.                 <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.6">  
    37.                 </EasingDoubleKeyFrame>  
    38.                 <EasingDoubleKeyFrame Value="1" KeyTime="0:0:1.8">  
    39.                 </EasingDoubleKeyFrame>  
    40.                 <LinearDoubleKeyFrame Value="1" KeyTime="0:0:3.2"/>  
    41.                 <EasingDoubleKeyFrame Value="0" KeyTime="0:0:3.5">  
    42.                     <EasingDoubleKeyFrame.EasingFunction>  
    43.                         <BackEase EasingMode="EaseOut"/>  
    44.                     </EasingDoubleKeyFrame.EasingFunction>  
    45.                 </EasingDoubleKeyFrame>  
    46.                 <EasingDoubleKeyFrame Value="0" KeyTime="0:0:5.0">  
    47.                 </EasingDoubleKeyFrame>  
    48.             </DoubleAnimationUsingKeyFrames>  
    49.         </Storyboard>  
    50.     </UserControl.Resources>  
    51.     <Canvas>  
    52.         <Ellipse x:Name="el" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" >  
    53.             <Ellipse.RenderTransform>  
    54.                 <TransformGroup>  
    55.                     <ScaleTransform/>  
    56.                     <SkewTransform/>  
    57.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    58.                     <TranslateTransform/>  
    59.                 </TransformGroup>  
    60.             </Ellipse.RenderTransform>  
    61.         </Ellipse>  
    62.         <Ellipse x:Name="el2" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0" >  
    63.             <Ellipse.RenderTransform>  
    64.                 <TransformGroup>  
    65.                     <ScaleTransform/>  
    66.                     <SkewTransform/>  
    67.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    68.                     <TranslateTransform/>  
    69.                 </TransformGroup>  
    70.             </Ellipse.RenderTransform>  
    71.         </Ellipse>  
    72.         <Ellipse x:Name="el3" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">  
    73.             <Ellipse.RenderTransform>  
    74.                 <TransformGroup>  
    75.                     <ScaleTransform/>  
    76.                     <SkewTransform/>  
    77.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    78.                     <TranslateTransform/>  
    79.                 </TransformGroup>  
    80.             </Ellipse.RenderTransform>  
    81.         </Ellipse>  
    82.         <Ellipse x:Name="el4" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">  
    83.             <Ellipse.RenderTransform>  
    84.                 <TransformGroup>  
    85.                     <ScaleTransform/>  
    86.                     <SkewTransform/>  
    87.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    88.                     <TranslateTransform/>  
    89.                 </TransformGroup>  
    90.             </Ellipse.RenderTransform>  
    91.         </Ellipse>  
    92.         <Ellipse x:Name="el5" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">  
    93.             <Ellipse.RenderTransform>  
    94.                 <TransformGroup>  
    95.                     <ScaleTransform/>  
    96.                     <SkewTransform/>  
    97.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    98.                     <TranslateTransform/>  
    99.                 </TransformGroup>  
    100.             </Ellipse.RenderTransform>  
    101.         </Ellipse>  
    102.         <Ellipse x:Name="el6" Width="10" Height="10" Fill="White" Canvas.Left="73" Canvas.Top="57" Opacity="0">  
    103.             <Ellipse.RenderTransform>  
    104.                 <TransformGroup>  
    105.                     <ScaleTransform/>  
    106.                     <SkewTransform/>  
    107.                     <RotateTransform CenterX="-20" CenterY="-40"/>  
    108.                     <TranslateTransform/>  
    109.                 </TransformGroup>  
    110.             </Ellipse.RenderTransform>  
    111.         </Ellipse>  
    112.     </Canvas>  
    113. </UserControl>  


     

    [csharp] view plaincopyprint?
     
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Linq;  
    4. using System.Text;  
    5. using System.Threading;  
    6. using System.Threading.Tasks;  
    7. using System.Windows;  
    8. using System.Windows.Controls;  
    9. using System.Windows.Data;  
    10. using System.Windows.Documents;  
    11. using System.Windows.Input;  
    12. using System.Windows.Media;  
    13. using System.Windows.Media.Animation;  
    14. using System.Windows.Media.Imaging;  
    15. using System.Windows.Navigation;  
    16. using System.Windows.Shapes;  
    17.   
    18. namespace Transvalue.MetroStyleBusyIndicator  
    19. {  
    20.     /// <summary>  
    21.     /// MetroRotaionIndicator.xaml 的交互逻辑  
    22.     /// </summary>  
    23.     public partial class MetroRotaionIndicator : UserControl  
    24.     {  
    25.         Storyboard trans;  
    26.         public MetroRotaionIndicator()  
    27.         {  
    28.             InitializeComponent();  
    29.             trans = Resources["Trans"] as Storyboard;  
    30.             this.Loaded += ((sender, e) =>  
    31.             {  
    32.                 Active();  
    33.             });  
    34.         }  
    35.   
    36.         public async void Active()  
    37.         {  
    38.             el.BeginStoryboard(trans);  
    39.             await Task.Delay(170);  
    40.             el2.BeginStoryboard(trans);  
    41.             await Task.Delay(170);  
    42.             el3.BeginStoryboard(trans);  
    43.             await Task.Delay(170);  
    44.             el4.BeginStoryboard(trans);  
    45.             await Task.Delay(170);  
    46.             el5.BeginStoryboard(trans);  
    47.             await Task.Delay(170);  
    48.             el6.BeginStoryboard(trans);  
    49.         }  
    50.   
    51.         public void Stop()  
    52.         {  
    53.             trans.Stop(el);  
    54.             trans.Stop(el2);  
    55.             trans.Stop(el3);  
    56.             trans.Stop(el4);  
    57.             trans.Stop(el5);  
    58.             trans.Stop(el6);  
    59.         }  
    60.   
    61.         
    62.     }  
    63. }  


     

    将以上内容编译成用户控件即可使用。

     xmlns:MetroStyleBusyIndicator="clr-namespace:Transvalue.MetroStyleBusyIndicator;assembly=Transvalue.MetroStyleBusyIndicator"

     <MetroStyleBusyIndicator:MetroRotaionIndicator HorizontalAlignment="Left" Height="187" Margin="924,534,0,0" VerticalAlignment="Top" Width="217"/>
  • 相关阅读:
    pytest学习Pytest基础
    Docker基础认识
    DNS 域名解析协议
    Python从数据库取数据到Excel
    PO设计模式
    unittest多种加载执行用例方法
    Dev XtraGridView 添加行时滚动条(界面)随焦点滚动
    阅读器关闭时READ的尝试无效 真正原因 测试通过解决办法
    转帖 用SQL语句 查看 某一存储过程 所带参数
    转 C#多线程及控制线程数量，对for循环输出效率
  • 原文地址：https://www.cnblogs.com/CharlesGrant/p/3639232.html
Copyright © 2011-2022 走看看