WPF Loading动画

最新推荐文章于 2023-12-27 15:05:43 发布
最新推荐文章于 2023-12-27 15:05:43 发布
阅读量398 收藏 1
点赞数
分类专栏： #WPF
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinlin_0/article/details/111053901
版权

在这里插入图片描述

<UserControl x:Class="Akeem.AkeemLoding"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
        <!--<SolidColorBrush Color="Black" x:Key="BackgroundColor" Opacity=".20" />-->
    </UserControl.Resources>
    <Grid Background="Transparent" Name="LayoutRoot">
        <Grid.RenderTransform>
            <ScaleTransform x:Name="SpinnerScale" ScaleX="1.0" ScaleY="1.0" />
        </Grid.RenderTransform>
        <Canvas Height="120" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" Width="120">
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.1" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse1" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.2" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse2" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.3" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse3" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.4" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse4" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.5" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse5" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.6" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse6" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.7" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse7" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.8" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse8" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="0.9" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse9" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360"  />
                                <DoubleAnimation RepeatBehavior="Forever" AccelerationRatio="1" SpeedRatio="4" Duration="0:0:0:04" From="0" Storyboard.TargetName="Ellipse10" Storyboard.TargetProperty="(RotateTransform.Angle)" To="360" />
                             </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse1" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse2" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse3" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse4" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse5" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse6" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse7" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse8" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse9" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Ellipse RenderTransformOrigin="0.455,2.727" 
                     Canvas.Left="50" 
                     Fill="{StaticResource CirclesColor}" 
                     Height="22" 
                     Opacity="1" 
                     Stretch="Fill" 
                     Width="22" Canvas.Top="0" >
                <Ellipse.RenderTransform>
                    <RotateTransform x:Name="Ellipse10" Angle="0" />
                </Ellipse.RenderTransform>
            </Ellipse>
            
        </Canvas>
        <TextBlock Text="Loading..." x:Name="text_Loading" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14" Foreground="#FFE3953D" FontWeight="Bold" />
    </Grid>
</UserControl>

2

在这里插入图片描述

<UserControl x:Class="Akeem.AkeemLoading"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <SolidColorBrush Color="#FF007BE5" x:Key="CirclesColor" />
    </UserControl.Resources>
    <Grid Background="Transparent" Name="LayoutRoot">
        <Canvas HorizontalAlignment="Center" Height="120" Width="150" RenderTransformOrigin="0,0" VerticalAlignment="Center" >
            <Canvas.Triggers>
                <EventTrigger RoutedEvent="FrameworkElement.Loaded">
                    <BeginStoryboard>
                        <BeginStoryboard.Storyboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0" Storyboard.TargetName="scale1" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.1" Storyboard.TargetName="scale2" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.2" Storyboard.TargetName="scale3" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.3" Storyboard.TargetName="scale4" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.2" Storyboard.TargetName="scale5" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.1" Storyboard.TargetName="scale6" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" BeginTime="0:0:0.0" Storyboard.TargetName="scale7" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" Duration="0:0:1">
                                    <LinearDoubleKeyFrame Value="1" KeyTime="0%" />
                                    <LinearDoubleKeyFrame Value="0.3" KeyTime="50%" />
                                    <LinearDoubleKeyFrame Value="1" KeyTime="100%" />
                                </DoubleAnimationUsingKeyFrames>
                             </Storyboard>
                        </BeginStoryboard.Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Canvas.Triggers>
            <StackPanel Orientation="Horizontal" >
                <StackPanel.Resources>
                    <Style TargetType="{x:Type Rectangle}">
                        <Setter Property="Height" Value="120"/>
                        <Setter Property="Width" Value="10"/>
                        <Setter Property="Margin" Value="5,0"/>
                        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
                    </Style>
                </StackPanel.Resources>
                <Rectangle Fill="{StaticResource CirclesColor}" >
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale1" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Fill="{StaticResource CirclesColor}">
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale2" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Fill="{StaticResource CirclesColor}">
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale3" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Fill="{StaticResource CirclesColor}">
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale4" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Fill="{StaticResource CirclesColor}">
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale5" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Fill="{StaticResource CirclesColor}">
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale6" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                <Rectangle Fill="{StaticResource CirclesColor}">
                    <Rectangle.RenderTransform>
                        <ScaleTransform x:Name="scale7" ScaleY="1"/>
                    </Rectangle.RenderTransform>
                </Rectangle>
                
            </StackPanel>
        </Canvas>
    </Grid>
</UserControl>
高级饲养员
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WPF实现Loading加载文字水波纹动画效果
dnazhd的博客
06-24 1323
实现效果如下： 思路：基本原理同博文WPF实现聚光灯动画效果一致，难点在与正弦曲线的绘制和动态效果。 步骤： 1、自定义控件UserControl的封装 添加自定义Value属性： public static readonly DependencyProperty ValueProperty = DependencyProperty.Register("Value", typeof(int), typeof(MyLoadingControl), new PropertyMet
WPF实战项目十七（客户端）：数据等待加载弹框动画
yigu4011的博客
11-23 1673
1、在Common文件夹下新建文件夹Events，新建扩展类UpdateLoadingEvent。2、新建一个静态扩展类DialogExtensions来编写注册和推送等待消息弹框方法。3、在ViewModel中添加实现类NavigationViewModel。5、在View文件夹下新建用户控件ProgressView.xmal。4、在主窗体MainView.xmal中给弹窗界面命名。6、在MainView.xmal.cs中注册消息。
WPF编程，等待动画的几中实现形式
君一席
06-23 2276
WPF界面加载动画
WPF等待动画
zls365365的博客
04-30 333
01—效果预览效果预览（更多效果请下载源码体验）：02—代码如下一、CycleLoading.cs 代码如下using System.Windows; using System.Windows.Controls; namespace WPFDevelopers.Controls { public class CycleLoading : ContentCont...
wpf加载等待动画（loading）
03-17
用wpf程序实现Loadingwait动画等待效果，在canvas里放9个Ellipse，，然后再用用定时器，一直改变每个Ellipse的位置，从而实现loading 效果。
WPF - 请求等待动画--Loading
qq_44920920的博客
11-13 267
加载动画,请求动画,等待动画,Loading,WPF
wpf loading 动画
01-11
类似时钟的加载画面，适用于产品和项目开发，对了解WPF动画机制的同学会有很大帮助。
wpf之loading加载动画
09-29
wpf之loading加载动画
超炫酷的WPF实现Loading控件效果
09-03
通过这种方式，我们成功地在WPF中创建了一个可自定义的Loading控件，用户可以根据需求调整颜色、速度和动画效果，实现高度定制化的加载指示器。这样的控件不仅提升了应用的用户体验，也为开发者提供了更多设计上的...
wpf 酷炫的loading界面 以及 显示gif动画库
01-14
超级炫酷的loading界面，以及封装显示gif动画库，让你玩转wpf
WPF 用户控件 Loading 效果
01-24
WPF 用户控件 Loading 效果
WPF 加载中Loading，自定义控件
最新发布
qq_42707143的博客
12-27 522
用Ellipse画一个圆点利用ContentControl的RenderTransform实现旋转RenderTransformOrigin=“0.5,0.5” 是为了设置旋转中心。
WPF 实现一个酷酷的Loading
dotNET跨平台
11-24 507
WPF开发者QQ群：340500857 | 微信群 -> 进入公众号主页加入组织 由于微信群人数太多入群请添加小编微信号（yanjinhuawechat）或（W_Fe...
WPF 用户控件Loading（加载）样式
03-09 1124
WPF 用户控件Loading（加载）样式 首先添加一个用户控件：usercontrol。WPF 用户控件Loading（加载）样式。
WPFLoading遮层罩
u010924028的专栏
05-23 4490
一直想实现这么个功能来着，所以去网上搜了资料，复杂的看不懂，后来挑了一个最简单的，复用了这位大神的很多代码（大神看到了别打脸）。这位大神是用UserControl，使用时则是调用用户控件中的方法。之前有用过Telerik的RadBusyIndicator,感觉很好，它是将要遮罩部分直接以内容的形式包裹在RadBusyIndicator的Content属性中，使用时就更简单了，IsBusy=true
WPF圆形环绕的Loading动画
LisenYang的专栏
01-13 8902
WPF圆形环绕的Loading动画。
WPF loading加载动画库
热门推荐
badxnui的博客
05-14 1万+
1. 下载Dll       https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA2.在项目中添加引用        略3.在Xaml中引入名称空间      xmlns:myLib="clr-namespace:MyLoadingLib;assembly=MyLoadingLib"4.使用代码     &lt;StackPanel&gt;     &lt...
wpf loading动画
07-29
在WPF中，可以使用多种方法来创建loading动画。其中一种常见的方法是使用旋转动画。可以使用WPF的动画功能，将一个图形或文本元素旋转一定的角度。可以使用旋转动画的方式来表示加载的状态。 另外，还可以使用逐帧...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值