WPF仿win10加载动画 可用于loading加载
直接上xaml 没有cs代码 (自己琢磨了好久感觉这样能接受)
<UserControl x:Class="WpfApp1.Loading"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="uclLoad" Width="50" Height="50">
<UserControl.Resources>
<Storyboard x:Key="stb1" BeginTime="0:0:0" Duration="0:0:05.43" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="0" To="180">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="180" To="540">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot1" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="540" To="720">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="grd1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.00" Duration="0:0:0.00" From="0" To="1"/>
<DoubleAnimation Storyboard.TargetName="grd1" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
</Storyboard>
<Storyboard x:Key="stb2" BeginTime="0:0:0.17" Duration="0:0:05.43" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-25" To="155">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="155" To="515">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot2" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="515" To="720">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="grd2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.00" Duration="0:0:0.00" From="0" To="1"/>
<DoubleAnimation Storyboard.TargetName="grd2" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
</Storyboard>
<Storyboard x:Key="stb3" BeginTime="0:0:0.34" Duration="0:0:05.43" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-50" To="130">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="130" To="490">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot3" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="490" To="720">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="grd3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.25" Duration="0:0:0.00" From="0" To="1"/>
<DoubleAnimation Storyboard.TargetName="grd3" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
</Storyboard>
<Storyboard x:Key="stb4" BeginTime="0:0:0.51" Duration="0:0:05.43" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-75" To="105">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="105" To="465">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot4" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="465" To="720">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="grd4" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.50" Duration="0:0:0.00" From="0" To="1"/>
<DoubleAnimation Storyboard.TargetName="grd4" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
</Storyboard>
<Storyboard x:Key="stb5" BeginTime="0:0:0.68" Duration="0:0:05.43" RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" Duration="0:0:2.00" From="-100" To="80">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" BeginTime="0:0:1.80" Duration="0:0:2.00" From="80" To="440">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseInOut"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="rot5" Storyboard.TargetProperty="Angle" BeginTime="0:0:3.75" Duration="0:0:1.00" From="440" To="720">
<DoubleAnimation.EasingFunction>
<QuadraticEase EasingMode="EaseIn"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetName="grd5" Storyboard.TargetProperty="Opacity" BeginTime="0:0:0.75" Duration="0:0:0.00" From="0" To="1"/>
<DoubleAnimation Storyboard.TargetName="grd5" Storyboard.TargetProperty="Opacity" BeginTime="0:0:4.75" Duration="0:0:0.00" From="1" To="0"/>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource stb1}"/>
<BeginStoryboard Storyboard="{StaticResource stb2}"/>
<BeginStoryboard Storyboard="{StaticResource stb3}"/>
<BeginStoryboard Storyboard="{StaticResource stb4}"/>
<BeginStoryboard Storyboard="{StaticResource stb5}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid>
<Grid x:Name="grd1" Width="50" Height="50" Opacity="0">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rot1" Angle="0" CenterX="25" CenterY="25"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="18"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
<Grid x:Name="grd2" Width="50" Height="50" Opacity="0">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rot2" Angle="0" CenterX="25" CenterY="25"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="18"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
<Grid x:Name="grd3" Width="50" Height="50" Opacity="0">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rot3" Angle="0" CenterX="25" CenterY="25"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="18"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
<Grid x:Name="grd4" Width="50" Height="50" Opacity="0">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rot4" Angle="0" CenterX="25" CenterY="25"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="18"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
<Grid x:Name="grd5" Width="50" Height="50" Opacity="0">
<Grid.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rot5" Angle="0" CenterX="25" CenterY="25"/>
</TransformGroup>
</Grid.RenderTransform>
<Ellipse Width="6" Height="6" Fill="{Binding ElementName=uclLoad,Path=Foreground}">
<Ellipse.RenderTransform>
<TransformGroup>
<TranslateTransform X="0" Y="18"/>
</TransformGroup>
</Ellipse.RenderTransform>
</Ellipse>
</Grid>
</Grid>
</UserControl>
直接放到STA线程去不怕主线程卡顿了 美滋滋
WPF仿win10加载动画 可用于loading加载的更多相关文章
- jquery加载数据时显示loading加载动画特效
插件下载:http://www.htmleaf.com/jQuery/Layout-Interface/201505061788.html 插件使用: 使用该loading加载插件首先要引入jQuer ...
- CSS动画实例：Loading加载动画效果（一）
一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...
- CSS动画实例：Loading加载动画效果（三）
3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...
- 页面加载完成前的loading加载效果
/*loading.js*/ // 加载HTML图 var _LoadingHtml = '<div id="loadingDiv" style="position ...
- 原生JS+ CSS3创建loading加载动画；
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- WPF动画 - Loading加载动画
存在问题: 最近接手公司一个比较成熟的产品项目开发(WPF桌面端),其中,在登陆系统加载时,60张图片切换,实现loading闪烁加载,快有密集恐惧症了!!! 代码如下: private void L ...
- CoreThink开发（十三）增加页面加载动画
效果: 加载动画是由jquery和fakeloader这个js库实现的. 其实这个也可以做成一个插件,用数据库记录是否开启,选择动画的样式,那样扩展性会更好. 源码资源已经上传在我的csdn下载中. ...
- 网页图表Highcharts实践教程之标签组与加载动画
网页图表Highcharts实践教程之标签组与加载动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但非常多时候,我们须要额外说明一些信息.这个时候借助原有的图表元素的标签功能就 ...
- 自定义动画（仿Win10加载动画）
一.源代码 源代码及demo 二.背景 先看看Win10的加载动画(找了很久才找到): CPA推广甲爪广告联盟满30日结 [点击进入] 甲爪广告联盟,提供各类高单价CPA广告 单价高 收益好 日付广告 ...
- 纯 HTML/CSS 高仿 Win10 加载动画
自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...
随机推荐
- shell-命令行位置参数-$n
- [转帖]一文说清 Linux System Load
https://zhuanlan.zhihu.com/p/447661302 双十一压测过程中,常见的问题之一就是load 飙高,通常这个时候业务上都有受影响,比如服务rt飙高,比如机器无法登录,比如 ...
- [转帖]MySQL Decimal 的实现方法
码: 背景 数字运算在数据库中是很常见的需求, 例如计算数量.重量.价格等, 为了满足各种需求, 数据库系统通常支持精准的数字类型和近似的数字类型. 精准的数字类型包含 int, decimal 等, ...
- [转帖]ssh时不输入YES
vim /etc/ssh/ssh_config 60行新添加 StrictHostKeyChecking no
- [转帖]服务注册与发现：Nacos Discovery
目录 一.概述 二.Nacos discovery--服务的注册与发现 1. 版本关系 2. 下载安装 (1)下载 (2)启动 (3)浏览器访问 三.Nacos服务注册与发现实战 1. 构建Sprin ...
- Redis命令监控与简单分析
Redis命令监控与简单分析 前言 为了能够快速识别分析redis的命令 自己在环境上面进行了一些简单的跟踪以及脚本 这里不全是进行metrics, 细致到具体的命令分析 脚本部分-1 mkdir - ...
- ESXi6.5+vCenter6.5 CentOS7 虚拟机启动之后控制台黑屏的解决方案
公司最近搬迁服务器, 服务器的地址都发生了变化, 发现部分机器总是黑屏无法使用, 想了一个坚决办法使服务器能够连接设置地址后使用. 1. 控制台开机. 2. 注意在开机五秒之内打开web控制台, 然后 ...
- 定位解析一个因脚本劫持导致webpack动态加载异常的问题
问题描述 项目现场的前端项目在点击顶部的导航栏切换不同的模块时,会有小概率出现模块加载报错的情况: 我们的前端项目里是有基于react-loadable做的懒加载的,上图的12.be789340.ch ...
- bean的一生
你曾读spring源码 "不知所云"."绞尽脑汁"."不知所措"嘛 那这篇文章可能会对你有所帮助,小编尝试用简单.易懂的例子来模拟sprin ...
- RestTemplate-postForObject详解、调用Https接口、源码解析，读懂这一篇文章就够了
restTemplate 目录 restTemplate 1. 基本介绍 2. 常用方法分析及举例 2.1. get请求 2.2. post请求 3. springboot中使用restTemplat ...