原文:[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. omap 移植qt4.7.0

    准备: 1.Qt源码包 qt-everywhere-opensource-src-4.7.0.tar.gz 2.交叉编译器 arm-eabi-4.4.0.tar.bz2 3.触摸屏校验工具:tslib ...

  2. Swagger在 NETcore 中的使用

    请参考 https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/getting-started-with-swashbuckle?view=asp ...

  3. struct 模块解决 TCP黏包问题

    首先来看一下产生黏包现象的一段代码: # server.py 服务端 import socket ​ sk = socket.socket() sk.bind(('127.0.0.1',9000)) ...

  4. xml00

    <?xml verson="1.0" encoding="ISO-8859-1"?> xml声明<note> <to>jon ...

  5. Mysql提升大数据导入速度的绝妙方法

    一.对于Myisam类型的表,可以通过以下方式快速的导入大量的数据.      ALTER TABLE tblname DISABLE KEYS;     loading the data     A ...

  6. HDU 2138

    这题用MILLER测试应该是不可避免的. #include <iostream> #include <cstdio> #include <stdlib.h> #in ...

  7. [Node.js] Manage Configuration Values with Environment Variables

    Storing configuration in files instead of the environment has many downsides, including mistakenly c ...

  8. 分享：Android系统的经常使用权限整理

    1.ACCES_NETWORK_STATE      同意应用程序获取网络状态信息的权限 2.ACCESS_WIFI_STATE          同意应用程序获取Wi-Fi网络状态的权限 3.BAT ...

  9. Common webpart properties in kentico

    https://devnet.kentico.com/docs/7_0/devguide/index.html?common_web_part_properties.htm HTML Envelope ...

  10. 枚举所有排列-STL中的next_permutation

    枚举排列的常见方法有两种 一种是递归枚举 另一种是STL中的next_permutation //枚举所有排列的另一种方法就是从字典序最小排列开始,不停的调用"求下一个排列"的过程 ...