效果图:

还在羡慕metro的ProgressRing吗？

wpf 也可以拥有

首先说下思路，

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

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

首先是xaml 部分

我们需要实现旋转动画：

所以要用到这个：

  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的运动轨迹，当然你需要在属性中设置他的中心点值

代码如下：

  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圈就消失 结束后也消失，所以需要控制透明度，

  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

  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>
  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. namespace Transvalue.MetroStyleBusyIndicator
  18. {
  19. /// <summary>
  20. /// MetroRotaionIndicator.xaml 的交互逻辑
  21. /// </summary>
  22. public partial class MetroRotaionIndicator : UserControl
  23. {
  24. Storyboard trans;
  25. public MetroRotaionIndicator()
  26. {
  27. InitializeComponent();
  28. trans = Resources["Trans"] as Storyboard;
  29. this.Loaded += ((sender, e) =>
  30. {
  31. Active();
  32. });
  33. }
  34. public async void Active()
  35. {
  36. el.BeginStoryboard(trans);
  37. await Task.Delay(170);
  38. el2.BeginStoryboard(trans);
  39. await Task.Delay(170);
  40. el3.BeginStoryboard(trans);
  41. await Task.Delay(170);
  42. el4.BeginStoryboard(trans);
  43. await Task.Delay(170);
  44. el5.BeginStoryboard(trans);
  45. await Task.Delay(170);
  46. el6.BeginStoryboard(trans);
  47. }
  48. public void Stop()
  49. {
  50. trans.Stop(el);
  51. trans.Stop(el2);
  52. trans.Stop(el3);
  53. trans.Stop(el4);
  54. trans.Stop(el5);
  55. trans.Stop(el6);
  56. }
  57. }
  58. }

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

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

<MetroStyleBusyIndicator:MetroRotaionIndicator HorizontalAlignment="Left" Height="187" Margin="924,534,0,0" VerticalAlignment="Top" Width="217"/>

手把手教你 用 wpf 制作metro ProgressRing (Windows8 等待动画）的更多相关文章

  1. [Swift通天遁地]一、超级工具-(11)使用EZLoadingActivity制作Loading加载等待动画

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  3. 手把手教你制作AppPreview视频并上传到appStore进行审核

    手把手教你制作AppPreview视频并上传到appStore进行审核 注意,你需要使用iMovie才能够制作AppPreview视频文件,用QuickTime录制的无效! 最终效果 1. 新建一个事 ...

  4. PWA入门：手把手教你制作一个PWA应用

    摘要: PWA图文教程 原文:PWA入门:手把手教你制作一个PWA应用 作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...

  5. 手把手教你去ECSHOP版权 powered by ecshop

      各位朋友大家好,欢迎来到ecshop开发中心系列视频教程:ecshop去版权.去版权是一种很常见的问题,有很多客户提到ECSHOP如何去版权?怎样去得干净.去得彻底?今天,ECSHOP开发中心手把 ...

  6. 手把手教你ranorex_android自动化测试第一个示例

    要说android的自动化,那真是折腾死我了,从早期的monkeyrunner,到后来的robotium,再到最新的uiautomator,各有各的问题,总之性价比都不够高,不太适合我的使用场景.于是 ...

  7. C#:手把手教你用C#打包应用程序(安装程序卸载程序)

    摘要:本文介绍在C#中手把手教你用C#打包应用程序(安装程序卸载程序) 1:新建安装部署项目 打开VS,点击新建项目,选择:其他项目类型->安装与部署->安装向导(安装项目也一样),然后点 ...

  8. 手把手教你玩转CSS3 3D技术

    手把手教你玩转 CSS3 3D 技术   要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上 ...

  9. 手把手教你DIY尼康ML-L3红外遥控器

    项目介绍 ML-L3是用于尼康部分型号相机的无线红外遥控器,可以通过红外方式来控制快门的释放,支持B门拍摄.官方售价100RMB左右,山寨版售价10RMB左右.虽然也能实现基本的遥控功能,但是功能还是 ...

随机推荐

  1. HLG1744组合数学问题与lucas定理运用

    The figure below shows Pascal's Triangle: Baby H divides Pascal's Triangle into some Diagonals, like ...

  2. Linux SUID SGID 讲解

    SUID属性 UNIX的内核是根据什么来确定一个进程对资源的访问权限的呢? 是这个进程的运行用户的(有效)ID,包括user id和group id.用户可以用id命令来查到自己的或其他用户的user ...

  3. NYOJ 5 字符串处理 find（）函数应用

    http://acm.nyist.net/JudgeOnline/problem.php?pid=5 #include<stdio.h> #include<iostream> ...

  4. TCP/IP详解学习笔记（5）-- ICMP：internet 控制报文协议

    1.概述      ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制 ...

  5. css行内样式

    <title>归园田居</title> </head> <body> <h2>归园田居</h2> <p>种豆南山下, ...

  6. CSS用类选择器在本页写样式

    <title>静夜思</title><style type="text/css">p{color:#ff0000; font-size:24px ...

  7. 【转】Mybatis/Ibatis，数据库操作的返回值

    该问题,我百度了下,根本没发现什么有价值的文章:还是看源代码(详见最后附录)中的注释,最有效了!insert,返回值是:新插入行的主键(primary key):需要包含<selectKey&g ...

  8. php中常用魔术方法的举例

    魔术方法是php面向对象特有的功能,并且有时候能实现意想不到的效果,包括前面提到的构造函数.析构函数.还有__clone函数,另外再简单的介绍几个: 1.__toSring和__invoke clas ...

  9. [MAC] Mac下的SVN命令行

    转载自: http://www.cnblogs.com/snandy/p/4072857.html Mac自带了SVN命令行,如我的升级到10.10(OSX yosemite)后命令行版本为1.7.1 ...

  10. Ubuntu 12.10 安装 jdk-7u10-linux-x64.tar.gz(转载)

    在Ubuntu 12.10下安装 jdk-7u10-linux-x64.tar.gz 总的原则:将jdk-7u10-linux-x64.tar.gz压缩包解压至/usr/lib/jdk,设置jdk环境 ...