WPF：Loading等待动画、加载动画
2024-04-09 12:08:04
全部效果
持续更新…
类型1
效果
思路：
1、用8个浅灰色的圆当背景
2、4个渐变深灰色的圆，一直改变其旋转角度，表示Loading的过程
首先，定位下图圆的位置（红色线为辅助线），剩余的直接旋转角度就行。
画布长宽为100
<Canvas Width="100" Height="100">
圆的半径是25，设计其基础的样式。因为剩余的圆是通过该圆旋转得到的，旋转的中心是上图中几条红色直线相交的那个点，不难算出RenderTransformOrigin为0.5,2，这个很关键。
<Style x:Key="ellipse" TargetType="Ellipse"><Setter Property="Width" Value="25"/><Setter Property="Height" Value="25"/><Setter Property="RenderTransformOrigin" Value="0.5, 2"/><Setter Property="Fill" Value="#FFAAAAAA"/><Setter Property="Canvas.Left" Value="37.5"/><Setter Property="Canvas.Top" Value="0"/>
</Style>
剩下的就是旋转啦
<!-- 8个背景圆 -->
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="45"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="90"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="135"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="180"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="225"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="270"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="315"/></Ellipse.RenderTransform>
</Ellipse>
<!-- 4个一直旋转的圆 -->
<Ellipse Name="ell1" Style="{StaticResource ellipse}" Fill="Black" Opacity="0.3"><Ellipse.RenderTransform><RotateTransform Angle="45"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Name="ell2" Style="{StaticResource ellipse}" Fill="Black" Opacity="0.4"><Ellipse.RenderTransform><RotateTransform Angle="90"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Name="ell3" Style="{StaticResource ellipse}" Fill="Black" Opacity="0.5"><Ellipse.RenderTransform><RotateTransform Angle="135"/></Ellipse.RenderTransform>
</Ellipse>
<Ellipse Name="ell4" Style="{StaticResource ellipse}" Fill="Black" Opacity="0.6"><Ellipse.RenderTransform><RotateTransform Angle="180"/></Ellipse.RenderTransform>
</Ellipse>
这样就能得到上图了。
如何旋转圆ell1 ell2 ell3 ell4呢？
这里用了关键帧动画DoubleAnimationUsingKeyFrames改变RotateTransform的Angle属性。对于圆ell1，其初始旋转角度是45°，那还需要旋转到90°、135°、180°、225°、270°、315°、360°共7个角度，不难写出动画代码，其他三个类似。
<Storyboard x:Key="sb1" RepeatBehavior="Forever"><DoubleAnimationUsingKeyFrames Storyboard.TargetName="ell1" Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"><DiscreteDoubleKeyFrame KeyTime="0:0:0.1" Value="90"/><DiscreteDoubleKeyFrame KeyTime="0:0:0.2" Value="135"/><DiscreteDoubleKeyFrame KeyTime="0:0:0.3" Value="180"/><DiscreteDoubleKeyFrame KeyTime="0:0:0.4" Value="225"/><DiscreteDoubleKeyFrame KeyTime="0:0:0.5" Value="270"/><DiscreteDoubleKeyFrame KeyTime="0:0:0.6" Value="315"/><DiscreteDoubleKeyFrame KeyTime="0:0:0.7" Value="360"/></DoubleAnimationUsingKeyFrames></Storyboard>
然后在画布加载事件中触发
<Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard Storyboard="{StaticResource sb1}"/><BeginStoryboard Storyboard="{StaticResource sb2}"/><BeginStoryboard Storyboard="{StaticResource sb3}"/><BeginStoryboard Storyboard="{StaticResource sb4}"/></EventTrigger>
</Canvas.Triggers>
类型2
效果：
思路：
使用两个弧
Arc，一个充当背景，一个作动画
关于Arc可以参考这个
代码：
<Canvas Width="100" Height="100"><Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever" Storyboard.TargetName="arc"><DoubleAnimation Storyboard.TargetProperty="EndAngle" To="360" BeginTime="0:0:0" Duration="0:0:1"><DoubleAnimation.EasingFunction><PowerEase EasingMode="EaseInOut" Power="3"/></DoubleAnimation.EasingFunction></DoubleAnimation><DoubleAnimation Storyboard.TargetProperty="StartAngle" To="360" BeginTime="0:0:1" Duration="0:0:1"><DoubleAnimation.EasingFunction><PowerEase EasingMode="EaseInOut" Power="3"/></DoubleAnimation.EasingFunction></DoubleAnimation></Storyboard></BeginStoryboard></EventTrigger></Canvas.Triggers><ed:Arc Width="80"Height="80"StartAngle="0" EndAngle="360"Stretch="None"ArcThickness="12"Fill="#fff1c1"></ed:Arc><ed:Arc Width="80"Height="80"Name="arc"StartAngle="0" EndAngle="0"Stretch="None"ArcThickness="12"Fill="#fe5f55"></ed:Arc>
</Canvas>
使用缓动函数看起来更自然。使用幂函数，这里是 Power=“3” 次幂，来加速（EaseIn）或减速动画（EaseOut），这里 EasingMode=“EaseInOut” 表示动画开始和结束时减速。
<DoubleAnimation.EasingFunction><PowerEase EasingMode="EaseInOut" Power="3"/>
</DoubleAnimation.EasingFunction>
类似这样的图：
类型3
效果：
GIF看的有点卡，实际不卡。
样式：
<Grid Background="White"><Grid.Resources><Style x:Key="ellipse" TargetType="Ellipse"><Setter Property="Width" Value="15"/><Setter Property="Height" Value="15"/><Setter Property="Canvas.Left" Value="42.5"/><Setter Property="Fill" Value="#0d3f67"/><Setter Property="RenderTransformOrigin" Value="0.5,3.33"/></Style><PowerEase x:Key="powerease" Power="3" EasingMode="EaseInOut"/></Grid.Resources><Canvas Width="100" Height="100"><Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" RepeatBehavior="Forever"><DoubleAnimation Storyboard.TargetName="e1" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.1" DecelerationRatio="0.9"/><DoubleAnimation Storyboard.TargetName="e2" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.3" DecelerationRatio="0.7"/><DoubleAnimation Storyboard.TargetName="e3" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.5" DecelerationRatio="0.5"/><DoubleAnimation Storyboard.TargetName="e4" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.7" DecelerationRatio="0.3"/><DoubleAnimation Storyboard.TargetName="e5" To="360" Duration="0:0:2" EasingFunction="{StaticResource powerease}" AccelerationRatio="0.9" DecelerationRatio="0.1"/></Storyboard></BeginStoryboard></EventTrigger></Canvas.Triggers><!--背景--><Ellipse Width="100" Height="100" Fill="#f2f4f6"/><Label Content="Loading"FontSize="16"FontFamily="Times New Roman"Foreground="#6b48ff"FontWeight="Bold"Width="100" Height="100"VerticalContentAlignment="Center" HorizontalContentAlignment="Center"/><Ellipse Name="e1" Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="e2" Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="e3" Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="e4" Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse><Ellipse Name="e5" Style="{StaticResource ellipse}"><Ellipse.RenderTransform><RotateTransform Angle="0"/></Ellipse.RenderTransform></Ellipse></Canvas>
</Grid>
使用了缓动函数PowerEase来控制5个圆的旋转速度。
类型4
效果：
样式：
<Style x:Key="ellipse" TargetType="Ellipse"><Setter Property="Width" Value="20"/><Setter Property="Height" Value="20"/><Setter Property="Fill" Value="#41b6e6"/><Setter Property="RenderTransform"><Setter.Value><TranslateTransform X="0" Y="0"/></Setter.Value></Setter></Style><PowerEase x:Key="powerEase" Power="2" EasingMode="EaseInOut"/><Canvas Background="White" Width="200" Height="200"><Canvas.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"><DoubleAnimation Storyboard.TargetName="e1" To="-50" BeginTime="0:0:0.0" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/><DoubleAnimation Storyboard.TargetName="e2" To="-50" BeginTime="0:0:0.1" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/><DoubleAnimation Storyboard.TargetName="e3" To="-50" BeginTime="0:0:0.2" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/><DoubleAnimation Storyboard.TargetName="e4" To="-50" BeginTime="0:0:0.3" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/><DoubleAnimation Storyboard.TargetName="e5" To="-50" BeginTime="0:0:0.4" Duration="0:0:0.5" AutoReverse="True" EasingFunction="{StaticResource powerEase}"/></Storyboard></BeginStoryboard></EventTrigger></Canvas.Triggers><Label Content="Loading"FontSize="16"FontFamily="Times New Roman"Foreground="#ffb549"FontWeight="Bold"Width="200"HorizontalContentAlignment="Center"Canvas.Top="100"/><Ellipse Name="e1" Canvas.Left="30" Canvas.Top="80" Style="{StaticResource ellipse}"/><Ellipse Name="e2" Canvas.Left="60" Canvas.Top="80" Style="{StaticResource ellipse}"/><Ellipse Name="e3" Canvas.Left="90" Canvas.Top="80" Style="{StaticResource ellipse}"/><Ellipse Name="e4" Canvas.Left="120" Canvas.Top="80" Style="{StaticResource ellipse}"/><Ellipse Name="e5" Canvas.Left="150" Canvas.Top="80" Style="{StaticResource ellipse}"/>
</Canvas>
类型5
样式：
<Grid Background="White" HorizontalAlignment="Center"><Grid.Resources><Style x:Key="rec" TargetType="Rectangle"><Setter Property="Width" Value="10"/><Setter Property="Height" Value="30"/><Setter Property="Fill" Value="#f1404b"/></Style><PowerEase x:Key="powerEase" Power="3" EasingMode="EaseInOut"/></Grid.Resources><Grid.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="Height"><DoubleAnimation Storyboard.TargetName="rec1" To="50" BeginTime="0:0:0.0" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/><DoubleAnimation Storyboard.TargetName="rec2" To="50" BeginTime="0:0:0.2" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/><DoubleAnimation Storyboard.TargetName="rec3" To="50" BeginTime="0:0:0.4" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/><DoubleAnimation Storyboard.TargetName="rec4" To="50" BeginTime="0:0:0.6" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/><DoubleAnimation Storyboard.TargetName="rec5" To="50" BeginTime="0:0:0.8" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}" AutoReverse="True"/></Storyboard></BeginStoryboard></EventTrigger></Grid.Triggers><Grid.ColumnDefinitions><ColumnDefinition Width="15"/><ColumnDefinition Width="15"/><ColumnDefinition Width="15"/><ColumnDefinition Width="15"/><ColumnDefinition Width="15"/></Grid.ColumnDefinitions><Label Content="Loading"FontSize="18"FontFamily="Times New Roman"Foreground="#252c41"FontWeight="Bold"Grid.ColumnSpan="5"VerticalContentAlignment="Center"HorizontalContentAlignment="Center"Margin="0,80,0,0"/><Rectangle Name="rec1" Grid.Column="0" Style="{StaticResource rec}"/><Rectangle Name="rec2" Grid.Column="1" Style="{StaticResource rec}"/><Rectangle Name="rec3" Grid.Column="2" Style="{StaticResource rec}"/><Rectangle Name="rec4" Grid.Column="3" Style="{StaticResource rec}"/><Rectangle Name="rec5" Grid.Column="4" Style="{StaticResource rec}"/>
</Grid>
类型6
需要了解一点3D知识，戳这里
样式：
<Grid Background="White" Width="200" Height="200"><Grid.Resources><PowerEase x:Key="powerEase" Power="3" EasingMode="EaseIn"/></Grid.Resources><Viewport3D Width="200" Height="200"><Viewport3D.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever" Storyboard.TargetProperty="Angle"><DoubleAnimation Storyboard.TargetName="axisX" To="180" BeginTime="0:0:0" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}"/><DoubleAnimation Storyboard.TargetName="axisY" To="180" BeginTime="0:0:0.5" Duration="0:0:0.5" EasingFunction="{StaticResource powerEase}"/></Storyboard></BeginStoryboard></EventTrigger></Viewport3D.Triggers><!--垂直屏幕往里--><Viewport3D.Camera><PerspectiveCamera Position="0,0,800" LookDirection="0,0,-1"/></Viewport3D.Camera><Viewport3D.Children><ContainerUIElement3D><!--正面--><Viewport2DVisual3D><Viewport2DVisual3D.Geometry><MeshGeometry3D Positions="-100,100,0 -100,-100,0 100,-100,0 100,100,0"TriangleIndices="0,1,2 0,2,3"TextureCoordinates="0 0 0 1 1 1 1 0"/></Viewport2DVisual3D.Geometry><Viewport2DVisual3D.Material><DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/></Viewport2DVisual3D.Material><Viewport2DVisual3D.Visual><Rectangle Width="50" Height="50" Fill="#1794A5"/></Viewport2DVisual3D.Visual></Viewport2DVisual3D><!--背面--><Viewport2DVisual3D><Viewport2DVisual3D.Geometry><MeshGeometry3D Positions="100,100,0 100,-100,0 -100,-100,0 -100,100,0"TriangleIndices="0,1,2 0,2,3"TextureCoordinates="0 0 0 1 1 1 1 0"/></Viewport2DVisual3D.Geometry><Viewport2DVisual3D.Material><DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/></Viewport2DVisual3D.Material><Viewport2DVisual3D.Visual><Rectangle Width="50" Height="50" Fill="#1794A5"/></Viewport2DVisual3D.Visual></Viewport2DVisual3D><!--绕X、Y轴旋转--><ContainerUIElement3D.Transform><Transform3DGroup><RotateTransform3D><RotateTransform3D.Rotation><AxisAngleRotation3D x:Name="axisX" Axis="1,0,0" Angle="0"/></RotateTransform3D.Rotation></RotateTransform3D><RotateTransform3D><RotateTransform3D.Rotation><AxisAngleRotation3D x:Name="axisY" Axis="0,1,0" Angle="0"/></RotateTransform3D.Rotation></RotateTransform3D></Transform3DGroup></ContainerUIElement3D.Transform></ContainerUIElement3D><!--灯光--><ModelVisual3D><ModelVisual3D.Content><DirectionalLight Color="Transparent"/></ModelVisual3D.Content></ModelVisual3D></Viewport3D.Children></Viewport3D><Label Content="Loading"FontSize="20"FontFamily="Times New Roman"Foreground="#ED5485"FontWeight="Bold"Width="200"HorizontalContentAlignment="Center"VerticalAlignment="Bottom"Margin="0,30"/>
</Grid>
WPF：Loading等待动画、加载动画相关推荐
- android 设置空动画,Android WebView 空白等待时加载动画
WebView 加载判断 和 加载动画的简单实现 WebView 在加载网页时候,在网络不好的情况下,如果不做处理会出现一段时间的等待空白,用户体验差.所以有必要加上一个简单的加载进度提示.本编简单的 ...
- css-animaton-随堂-风车动画-加载动画-走路动画
animation 爱你妹心 丢儿锐醒 in非里特 奥特里特 破丝 肤锐母 animation用法 格式 animation: 动画名称 动画时间 动画曲线(linear,ease,steps) 延迟 ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- html各种加载动画
html加载动画 1.转圈圈 2.三个点 3.转圈圈第二版(css更高端) 4.三条杠 5.画个圆 6.画个圆第二版 7.网上模板 8.艺术之美,程序之美 1.我都是引入本地的js,css boots ...
- WPF添加加载动画遮罩
项目中用到不少后台数据请求需要前端等待,添加加载动画改善用户体验 一.动画界面制作 添加一个自定义控件 <ResourceDictionaryxmlns="http://schemas ...
- 干货！14个最新优质加载动画设计，让等待成为一种享受
互联网时代,网络"提速"日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户 ...
- 【web素材】09—150款+炫酷的CSS3 loading加载动画，总有一款适合你
整理 | 杨小爱 我不知道,作为程序员的你,是否有这样的"职业病",就是在浏览网页时,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的 ...
- css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
- 7 种最棒的 Vue Loading 加载动画组件测评与推荐 - 穷尽市面上所有加载动画效果（Vue loader）类型
本文完整版:<7 种最棒的 Vue Loading 加载动画组件测评与推荐> 目录 7 种不同类型的 Vue Loading 加载动画组件 1. Vue Simple Spinner - ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
最新文章
- 在Ubuntu 16.04.3 LTS上安装Go 1.10
- 5首页加载慢_5个 外贸建站谷歌SEO优化技巧
- linux标准c和c编译器6,linux内核中GNU C和标准C的区别
- 线性代数第五版吉尔伯特课后答_线性代数同济第五版第四章课后习题答案！
- Fragment与FragmentActivity的关系
- poj 1256 Anagram—next_permutation的神奇应用
- java.net.SocketException: Permission denied解决
- 信息系统开发平台OpenExpressApp － 应用模型ApplicationModel
- Mysqldump命令参数介绍
- oracle 客户端连接数_转载：查看Oracle连接数
- Java基础教程【第九章：异常处理】
- java报错 csrf_CSRF Security Error解决办法
- KM算法--学习笔记
- 开博第一天，在日本做开发的日子（生活-吃货篇）
- 微信PC端电脑端多开 CMD打开多个微信
- matlab坐标值旋转平移
- Speedoffice（word）中如何清除文字的文本格式
- c++ 中getch()的用法
- PYQT5安装时，labelImg执行pyrcc5 -o libs/resources.py resources.qrc 报错：File does not exist ‘resources.qrc‘
- 欧拉法求解微分方程c语言_用C程序求解多项式和微分方程