1 <UserControl x:Class="Zhaoxi.Controls.Loading"

 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:local="clr-namespace:Zhaoxi.Controls"

 7              mc:Ignorable="d"

 8              d:DesignHeight="100" d:DesignWidth="100">

 9     <UserControl.Resources>

10         <Storyboard x:Key="beginStoryboard">

11             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt1" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever">

12                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>

13                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>

14                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>

15             </DoubleAnimationUsingKeyFrames>

16             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt2" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.2">

17                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>

18                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>

19                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>

20             </DoubleAnimationUsingKeyFrames>

21             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt3" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.4">

22                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>

23                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>

24                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>

25             </DoubleAnimationUsingKeyFrames>

26             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt4" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.6">

27                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>

28                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>

29                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>

30             </DoubleAnimationUsingKeyFrames>

31             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt5" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:0.8">

32                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>

33                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>

34                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>

35             </DoubleAnimationUsingKeyFrames>

36             <DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt6" Storyboard.TargetProperty="Angle" RepeatBehavior="Forever" BeginTime="0:0:1">

37                 <SplineDoubleKeyFrame KeyTime="0:0:0" Value="0" KeySpline="0.6,0.1,0.4,0.9"/>

38                 <SplineDoubleKeyFrame KeyTime="0:0:2" Value="360" KeySpline="0.6,0.1,0.4,0.9"/>

39                 <SplineDoubleKeyFrame KeyTime="0:0:4" Value="720" KeySpline="0.6,0.1,0.4,0.9"/>

40             </DoubleAnimationUsingKeyFrames>

41         </Storyboard>

42     </UserControl.Resources>

43     <UserControl.Triggers>

44         <EventTrigger RoutedEvent="UserControl.Loaded">

45             <BeginStoryboard Storyboard="{StaticResource beginStoryboard}"/>

46         </EventTrigger>

47     </UserControl.Triggers>

48     <Grid>

49         <Border RenderTransformOrigin="0.5,0.5">

50             <Border.RenderTransform>

51                 <RotateTransform Angle="0" x:Name="rt1"/>

52             </Border.RenderTransform>

53             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>

54         </Border>

55         <Border RenderTransformOrigin="0.5,0.5">

56             <Border.RenderTransform>

57                 <RotateTransform Angle="0" x:Name="rt2"/>

58             </Border.RenderTransform>

59             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>

60         </Border>

61

62         <Border RenderTransformOrigin="0.5,0.5">

63             <Border.RenderTransform>

64                 <RotateTransform Angle="0" x:Name="rt3"/>

65             </Border.RenderTransform>

66             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>

67         </Border>

68

69         <Border RenderTransformOrigin="0.5,0.5">

70             <Border.RenderTransform>

71                 <RotateTransform Angle="0" x:Name="rt4"/>

72             </Border.RenderTransform>

73             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>

74         </Border>

75

76         <Border RenderTransformOrigin="0.5,0.5">

77             <Border.RenderTransform>

78                 <RotateTransform Angle="0" x:Name="rt5"/>

79             </Border.RenderTransform>

80             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>

81         </Border>

82

83         <Border RenderTransformOrigin="0.5,0.5">

84             <Border.RenderTransform>

85                 <RotateTransform Angle="0" x:Name="rt6"/>

86             </Border.RenderTransform>

87             <Ellipse Width="10" Height="10" Fill="Orange" VerticalAlignment="Top"/>

88         </Border>

89     </Grid>

90 </UserControl>

记录一个仿Windows10加载动画的更多相关文章

  1. 纯 HTML/CSS 高仿 Win10 加载动画

    自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...

  2. 自定义动画（仿Win10加载动画）

    一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...

  3. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  4. 如何用Swift创建一个复杂的加载动画

    现在在苹果应用商店上有超过140万的App,想让你的app事件非常具有挑战的事情.你有这样一个机会,在你的应用的数据完全加载出来之前,你可以通过一个很小的窗口来捕获用户的关注. 没有比这个更好的地方让 ...

  5. 一个简单的加载动画，js实现

    简单效果图: html: <div class="box"> <ul> <li></li> <li></li> ...

  6. 加载动画插件spin.js的使用随笔

    背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似  的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...

  7. Android动画之仿美团加载数据等待时，小人奔跑进度动画对话框（附顺丰快递员奔跑效果）

    Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...

  8. [前端随笔][CSS] 制作一个加载动画 即帖即用

    说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...

  9. 我用 CSS3 实现了一个超炫的 3D 加载动画

    今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...

  10. ReactNative学习实践--动画初探之加载动画

    学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...

随机推荐

  1. react之state两种不同的写法

    我发现 state 有两种不同的写法 在构造器 constructor 中是这样的 有 this. constructor(props){//参数必须要有 super(props); this.sta ...

  2. 深入理解Java泛型、协变逆变、泛型通配符、自限定

    禁止转载 重写了之前博客写的泛型相关内容,全部整合到这一篇文章里了,把坑都填了,后续不再纠结这些问题了.本文深度总结了函数式思想.泛型对在Java中的应用,解答了许多比较难的问题. 纯函数 协变 逆变 ...

  3. 浅说TCP状态机制

    本文分享自天翼云开发者社区<浅说TCP状态机制>,作者:云云生息 TCP(Transmission Control Protocol)是一种面向连接的.可靠的传输协议,常用于互联网中应用层 ...

  4. Spark异常总结

    1.Spark读写同一张表报错问题Cannot overwrite a path that is also being read from 问题描述:Spark SQL在执行ORC和Parquet格式 ...

  5. Hive2升hive3报错

    一.网上总结的报错 1.coalesce报错 FAILED: SemanticException [Error 10014]: Line 197:4 Wrong arguments ''10'': U ...

  6. 从SQL Server迁移到Mysql Mysql导入SQL Server的数据库

    mysql怎么导入 SQl Server的数据库, SQL Server导出的SQL文件Mysql无法识别 需要用到的软件 Navicat mysql workbanch SQL Server man ...

  7. Blazor Hybrid适配到HarmonyOS系统

    1. 前言 Blazor Hybrid是一个基于Web技术的MVVM开发模式的客户端框架,它只有UI是由Webview渲染,而逻辑均由.NET开发,可以突破浏览器限制访问本地文件,或者发起TCP或者U ...

  8. ABC391D题解

    前置知识: map priority_queue 思路 考虑预处理每一个图块在第几秒后会被删除. 如何预处理?我使用了一种非常暴力的做法,首先处理的过程肯定是从下往上的,于是每一个图块能被删除一定是它 ...

  9. python基础-函数(lambda表达式、函数作参数、内置函数、推导式)和pip

    函数进阶 今日概要: 函数名就是一个变量(扩展) 匿名函数(lambda表达式) 重点内置函数--python内置函数 推导式(一行代码生成数据) 1. 函数名就是变量 def func(): pas ...

  10. [解决方案]git pull : error: cannot lock ref 'refs/remotes/origin/*' (unable to update local ref)

    错误 git pull 报错不能更新本地分支 错误分析 本地分支跟远程分支不匹配 导致更新失败 解决方案 备份自己修改的代码 .git\refs\remotes (文件路径)对应删除你报错的分支 gi ...