记录一个仿Windows10加载动画
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加载动画的更多相关文章
- 纯 HTML/CSS 高仿 Win10 加载动画
自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...
- 自定义动画（仿Win10加载动画）
一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...
- 原生JS实战：分享一个首页进度加载动画！
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
- 如何用Swift创建一个复杂的加载动画
现在在苹果应用商店上有超过140万的App,想让你的app事件非常具有挑战的事情.你有这样一个机会,在你的应用的数据完全加载出来之前,你可以通过一个很小的窗口来捕获用户的关注. 没有比这个更好的地方让 ...
- 一个简单的加载动画，js实现
简单效果图: html: <div class="box"> <ul> <li></li> <li></li> ...
- 加载动画插件spin.js的使用随笔
背景: 在请求后台的“漫长”等待过程中,为了提升用户体验,需要一个类似 的加载动画效果,让用户明确现在处于请求过程中,而不是机子down掉或者网站死了 静态demo(未与后台交互): HTML代码如 ...
- Android动画之仿美团加载数据等待时，小人奔跑进度动画对话框（附顺丰快递员奔跑效果）
Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...
- [前端随笔][CSS] 制作一个加载动画 即帖即用
说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- ReactNative学习实践--动画初探之加载动画
学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...
随机推荐
- JS深度理解
事件循环 程序运行需要有自己专属的内存空间,可以把这块内存简单理解为进程 每个应用至少有一个进程,进程间相互独立,要通信,也需要双方同意 线程 有进程后,就可以运行程序的代码 运行代码的 [人] 称为 ...
- Zabbix Agent 安装配置
1 介绍 zabbix([`zæbiks])是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活 ...
- mysql之数据连接池
数据库连接池 C3P0: 配置文件 <?xml version="1.0" encoding="UTF-8"?> <c3p0-config&g ...
- 傻妞教程——如何获取天行数据服务的Key
在傻妞插件列表中,比如油价查询.舔狗语录等需要申请天行KEY,才能使用 1.打开 天行数据官网注册登录 2.在控制台首页完成实名认证 3.在左侧数据管理里面获取你的秘钥Key 4.回到傻妞已安装的插件 ...
- Scala变量补充
package com.wyh.day01 object ScalaLanguage { def main(args: Array[String]): Unit = { /** * 定义变量和常量 * ...
- Scala高阶函数 1
package com.wyh.day01 /** * * 高阶函数 */ object ScalaFun3 { def main(args: Array[String]): Unit = { //定 ...
- Socket通信-Linux系统中C语言实现TCP/UDP图片和文件传输
TCP实现 传输控制协议(TCP,Transmission Control Protocol) 是为了在不可靠的互联网络上提供可靠的端到端字节流而专门设计的一个传输协议.TCP是因特网中的传输层协议, ...
- 注册全局图标ts写法
https://element-plus.gitee.io/zh-CN/component/icon.html#使用图标 仓库地址:https://github.com/Megasu/element- ...
- golang 使用goto进行多错误处理
goto 语句介绍 在 Go 语言中,可以通过goto语句跳转到标签,进行代码间的无条件跳转.另外,goto语句在快速跳出循环.避免重复退出方面可以简化代码实现过程,但在结构化程序设计中一般不主张使用 ...
- FastAPI测试策略：参数解析单元测试
扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长 探索数千个预构建的 AI 应用,开启你的下一个伟大创意 第一章:核心测试方法论 1.1 三层测试体系架构 # 第一层:模型级测试 def ...