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"> ...
随机推荐
- linux route 命令
route 管理路由表 要实现两个不同的子网之间的通信,需要一台连接两个网络的路由器,或者同时位于两个网络的网关来实现.在Linux系统中,设置路由通常是为了解决以下问题:该Linux ...
- 【C/C++】 开发必备知识总结
>from: C/C++ 开发必备知识总结 (qq.com) const 作用 修饰变量,说明该变量不可以被改变: 修饰指针,分为指向常量的指针和指针常量: 常量引用,经常用于形参类型,即避免了 ...
- [转帖]MySQL Connect/J 8.0时区陷阱
https://juejin.cn/post/6844904023015817224 最近公司正在升级Spring Boot版本(从1.5升级到2.1),其间踩到一个非常隐晦的MySQL时区陷阱, ...
- [转帖]Jmeter脚本录制：Jmeter5.0脚本录制
第一部分进行jmeter设置 第一步:在JMeter中添加线程组 第二步:在线程组下添加HTTP请求默认值 添加->配置元件->HTTP请求默认值,设置服务器IP和端口号 第三步:在线程组 ...
- [转帖]Jmeter插件之ServerAgent服务器性能监控工具的安装和使用
https://www.cnblogs.com/pachongshangdexuebi/p/13354201.html 一.前言 性能测试时我们关注的重要指标是:并发用户数,TPS,请求成功率, ...
- [转帖]exportfs命令
https://www.cnblogs.com/xzlive/p/9766388.html exportfs命令:功能说明 :NFS共享管理语法格式exportfs [必要参数][选择参数][目录]功 ...
- API架构风格对比：SOAP vs REST vs GraphQL vs RPC
API架构风格对比:SOAP vs REST vs GraphQL vs RPC 最近一段时间关于GraphQL的讨论很多,一些项目中也相继用到了这种风格,但使用是否合理,是否存在杀鸡用牛刀这样的问题 ...
- pytest.ini配置文件
pytest.ini文件是pytest框架独有的配置文件,主要作用就是在运行pytest.main时可指定运行顺序,也 就相当于在Terminal输入pytest+参数+路径效果一致,下面介绍几种简单 ...
- fiddler如何抓取https请求
pc端browse 1.打开下载好的fiddler,点击tools选择options后进入https tab下,勾选Decrypt HTTPS CONNECTS 和Ignore server cer ...
- vue中render函数使用attrs绑定id、class、style、事件（5）
1.h函数的三个参数 第一个参数是必须的. 类型:{String | Object | Function} 一个 HTML 标签名.一个组件.一个异步组件.或一个函数式组件. 是要渲染的html标签. ...