记录一个仿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不是万能的,在很多场景下滥用反而会适得 ...
随机推荐
- Win7下的文件权限
平常编写的程序总会有配置功能,然后配置肯定是以文本文件的方式存放在目录下.平常自己电脑测试没问题 发到客户那里总会有各种乱七八糟的状况 反映配置无法保存.先前早知道win7有管理员权限的机制,然后还刻 ...
- 云主机AI服务的性能测试和优化
本文分享自天翼云开发者社区<云主机AI服务的性能测试和优化>,作者:无敌暴龙兽在云计算的时代,越来越多的人选择将AI模型部署在云主机上,以便利用云服务提供商的弹性和可扩展性.然而,仅仅将A ...
- Django Rest Framework的使用
Django Rest Framework 一.Rest Framework的基本介绍 程序的客户端有很多:硬件设备,游戏,APP,软件,其他的外部服务端. 1. Web应用模式 在开发Web应用中, ...
- [车联网/计算机网络] Autosar 的 `ARXML` 配置数据库文件协议
序: 缘起 ARXML 概述 : Autosar 的 ARXML 配置数据库文件协议 ARXML 文件 ARXML文件: AUTOSAR系统描述文件,后缀*.arxml 实质是一个XML文件,一般通过 ...
- .NET最佳实践：业务逻辑减少使用异常
在 .NET 开发中,异常处理是保证应用健壮性的重要手段,但不应被滥用. 异常的引发和捕获相较于普通的代码逻辑性能较差,因此在热路径(频繁执行的代码路径)中,避免依赖异常来控制程序流是提升性能的关键之 ...
- PPT革命！DeepSeek+Kimi=N小时工作5分钟完成？
在之前的三篇文章中,笔者介绍了有关DeepSeek的基础操作,满足了不同类型的用户需求. 想利用大模型构建属于自己的智能知识库,无论你是想私有化部署,还是直接使用API调用,都可以在这三篇文章中找到答 ...
- linux命令行连接wifi
linux命令行连接wifi 1.安装nmcli sudo apt-get install nmcli 2.查看网络设备 sudo nmcli dev 3.开启wifi sudo nmcli r wi ...
- 设计原则&模式：原型模式 Prototype（创建型）
定义:用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象.也就是说,这种不通过new关键字来产生一个对象,而是通过对象复制(Java中的clone或反序列化)来实现的模式,就叫做原型模式. ...
- Linux - [-bash: jps: command not found]
jps是jdk提供的一个查看当前java进程的小工具, 全称是 JavaVirtual Machine Process Status Tool $ jps [options] [hostid] opt ...
- CF2018C Tree Pruning
分析 好像官方题解是反向求解的,这里提供一个正向求解的思路,即直接求出最后所有叶节点到根的距离相同为 \(x\) 时需要删除的结点数 \(ans_x\) . 如果我们最后到根的相同距离为 \(x\), ...