WPF：Loading等待动画、加载动画

原创

已于 2024-06-02 15:26:55 修改 · 1.8w 阅读

161 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #wpf #ui设计 #animation

于 2021-08-21 15:51:20 首次发布

本文介绍了如何使用WPF创建四种不同的加载动画，包括旋转圆、弧形滑动、旋转矩形和3D旋转。通过样式和动画结合，利用PowerEase缓动函数实现平滑过渡，为用户界面添加视觉吸引力。这些动画适用于加载指示器，展示了不同的设计和技术实现。

全部效果

在这里插入图片描述

类型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"/>
         <

最低0.47元/天解锁文章