原文:[WPF] 圆形等待效果

自己做着玩儿的，留着以后用，效果类似下面的 GIF 动画。

<Grid Width="35" Height="35">

    <Grid.Resources>

        <DrawingBrush x:Key="brush" Stretch="None" AlignmentX="Center" AlignmentY="Top">

            <DrawingBrush.Drawing>

                <GeometryDrawing Brush="Black">

                    <GeometryDrawing.Geometry>

                        <EllipseGeometry RadiusX="2" RadiusY="5"/>

                    </GeometryDrawing.Geometry>

                </GeometryDrawing>

            </DrawingBrush.Drawing>

        </DrawingBrush>

    </Grid.Resources>

    <Rectangle x:Name="r01" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="0"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r02" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="30"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r03" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="60"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r04" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="90"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r05" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="120"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r06" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="150"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r07" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="180"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r08" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="210"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r09" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="240"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r10" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="270"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r11" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="300"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Rectangle x:Name="r12" Fill="{StaticResource brush}" Opacity="0.2" RenderTransformOrigin="0.5,0.5">

        <Rectangle.RenderTransform>

            <RotateTransform Angle="330"/>

        </Rectangle.RenderTransform>

    </Rectangle>

    <Grid.Triggers>

        <EventTrigger RoutedEvent="Grid.Loaded">

            <BeginStoryboard>

                <Storyboard RepeatBehavior="Forever">

                    <DoubleAnimation Storyboard.TargetName="r01" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.00000" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r02" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.08333" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r03" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.16666" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r04" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.24999" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r05" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.33332" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r06" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.41665" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r07" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.49998" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r08" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.58331" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r09" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.66664" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r10" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.74997" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r11" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.83330" To="0"/>

                    <DoubleAnimation Storyboard.TargetName="r12" Storyboard.TargetProperty="Opacity" AutoReverse="True" Duration="0:0:0.08333" BeginTime="0:0:0.91663" To="0"/>

                </Storyboard>

            </BeginStoryboard>

        </EventTrigger>

    </Grid.Triggers>

</Grid>

[WPF] 圆形等待效果的更多相关文章

  1. WPF 实现的等待效果界面

    这个界面的效果是从WinForm 转变过来,可以实现等待的效果,操作完成以后就自动关掉. 效果图如下 有一个动态的手机等待效果的样式,中间的文字可以自己定义,提供了方法可以修改中间"正在加载 ...

  2. WPF圆形环绕的Loading动画

    原文:WPF圆形环绕的Loading动画 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/yangyisen0713/article/details/ ...

  3. [原译]一步步教你制作WPF圆形玻璃按钮

    原文:[原译]一步步教你制作WPF圆形玻璃按钮 图1 1.介绍 从我开始使用vista的时候,我就非常喜欢它的圆形玻璃按钮.WPF最好的一个方面就是允许自定义任何控件的样式.用了一段时间的Micros ...

  4. C#.Net网页加载等待效果漂亮并且简单

    最近网页加载数据比较多,点击后给用户就是白板很不友好,想了很久找了些资料,在网页加载中显示等待画面给客户,页面加载完成自动隐藏等待效果. 在网页后台cs代码:    protected void Pa ...

  5. WPF提示框效果

    WPF提示框效果 1,新建WPF应用程序 2,添加用户控件Message 3,在Message中编写如下代码 <Border x:Name="border" BorderTh ...

  6. wpf 模拟3D效果(和手机浏览图片效果相似)（附源码）

    原文 wpf 模拟3D效果(和手机浏览图片效果相似)(附源码) pf的3D是一个很有意思的东西,类似于ps的效果,类似于电影动画的效果,因为动画的效果,(对于3D基础的摄像机,光源,之类不介绍,对于依 ...

  7. 手机站全局的html+css加载等待效果

    本文只提供思路,CSS神马的自己定制吧,JS是可以优化的,比如,输出图片的JS也可以放到showdiv()里面,我没有做优化,只是实现,别笑话我,我比较懒... 基本思路:由于Html的解析是从上到下 ...

  8. js加载等待效果

    demo01: 加载首页的时候,可能会很缓慢,放一张等待图片. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN ...

  9. WPF实现射线效果动画

    原文:WPF实现射线效果动画 最近的一个项目中有个需求是:从一个点向其它多个点发出射线,要求这些射线同时发出,同时到达. 我就想到了用WPF的动画来实现.WPF中有Line类用于绘制直线,但这个类中好 ...

随机推荐

  1. 理解 Javascript 执行上下文和执行栈

    如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制.理解执行上下文和执行栈同样有助于理解其他的 Jav ...

  2. POJ 1944

    明天补上... 这道题的思路确实很精致.考虑到连的边肯定不会是一个环,所以至少有一个断点.于是,可以枚举这个断点.断点一确定,那么连边的走向也就确定了.用D[i]表示由i开始可以到达的最远点即可.对于 ...

  3. 【Android】Eclipse自己主动编译NDK/JNI的三种方法

    [Android]Eclipse自己主动编译NDK/JNI的三种方法 SkySeraph Sep. 18th  2014 Email:skyseraph00@163.com 一.Eclipse关联cy ...

  4. HTML5开发移动web应用——Sencha Touch篇(8)

    DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...

  5. 【C++】String类中的运算符重载

    模块化设计: 头文件: <span style="font-size:18px;"> #ifndef operator_operator_h #define opera ...

  6. c6----函数的声明和实现

    // // main.c // 函数的声明和定义 // // Created by xiaomage on 15/6/7. // Copyright (c) 2015年 xiaomage. All r ...

  7. php面向对象之__isset和__unset

    php面向对象之__isset和__unset 一.简介 __isset和__unset都是对不可访问属性的操作,前者是检验的时候自动调用,后者是销毁的时候自动调用. 比如说在类外访问private的 ...

  8. QT-helloworld-QtCreater编写

    前言:纯代码编写helloworld,解析代码含义. 一.新建空项目 新建->其他项目->Empty qmake Project 二.修改.pro文件 打开helloworld.pro文件 ...

  9. POJ 2388 基数排序

    这题可以直接nth_element过去 比如这样子 //By SiriusRen #include <cstdio> #include <algorithm> using na ...

  10. UWP tips （与wp8.1的不同）

    一.异步调用之后,要更新UI时,代码如下 await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =&g ...