WPF 分享一种背景动画效果

简介: 原文:WPF 分享一种背景动画效果 今天看微软的一个Samples,发现一个蛮好玩的背景样式,如下图所示: 风格比较卡哇伊。 ...
原文: WPF 分享一种背景动画效果

 今天看微软的一个Samples,发现一个蛮好玩的背景样式,如下图所示:

风格比较卡哇伊。

<Window x:Class="WPFSamplesTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFSamplesTest"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800"  >
    
    <Window.Triggers>
        <EventTrigger RoutedEvent="Page.Loaded">
            <BeginStoryboard Name="backgroundAnimationsBeginStoryboard">
                <Storyboard >
                    <ColorAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[0].(GeometryDrawing.Brush).(SolidColorBrush.Color)"
            From="LightGray" To="DarkGray" Duration="0:0:50" RepeatBehavior="Forever" 
            AutoReverse="True"/>
                    <DoubleAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Transform).(RotateTransform.Angle)"
            From="0" To="360" Duration="0:5:00" RepeatBehavior="Forever" 
            AutoReverse="True"/>
                    <DoubleAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[1].(GeometryDrawing.Geometry).(EllipseGeometry.RadiusX)"
            From="0.1" To="0.25" Duration="0:0:5" RepeatBehavior="Forever" 
            AutoReverse="True"/>
                    <PointAnimation 
            Storyboard.TargetName="mainPanel"
            Storyboard.TargetProperty="(DockPanel.Background).(DrawingBrush.Drawing).(DrawingGroup.Children)[2].(GeometryDrawing.Geometry).(EllipseGeometry.Center)"
            From="-0.25, -0.25" To="1.25,1.25" Duration="0:0:10" RepeatBehavior="Forever" 
            AutoReverse="True"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
        
    </Window.Triggers>
    <Grid x:Name="mainPanel"  >
        <Grid.Background>
            <DrawingBrush TileMode="Tile"
        Viewport="0,0,100,100" ViewportUnits="Absolute">
                <DrawingBrush.Drawing>
                    <DrawingGroup>
                        <DrawingGroup.Children>

                            <GeometryDrawing>
                                <GeometryDrawing.Geometry>
                                    <RectangleGeometry Rect="0,0,1,1" />
                                </GeometryDrawing.Geometry>
                                <GeometryDrawing.Brush>
                                    <SolidColorBrush Color="LightGray" />
                                </GeometryDrawing.Brush>
                                <GeometryDrawing.Pen>
                                    <Pen Thickness="0.01" Brush="DarkGray" />
                                </GeometryDrawing.Pen>
                            </GeometryDrawing>

                            <GeometryDrawing Brush="#99CCCCCC">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="0.75,0.5" RadiusX="0.25" RadiusY="0.25" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                            <GeometryDrawing Brush="#66CCCCCC">
                                <GeometryDrawing.Geometry>
                                    <EllipseGeometry Center="0.25,0.25" RadiusX="0.1" RadiusY="0.1" />
                                </GeometryDrawing.Geometry>
                            </GeometryDrawing>
                        </DrawingGroup.Children>
                    </DrawingGroup>
                </DrawingBrush.Drawing>
                <DrawingBrush.Transform>
                    <RotateTransform CenterX="0.5" CenterY="0.5" />
                </DrawingBrush.Transform>
            </DrawingBrush>
        </Grid.Background>
       
    </Grid>
</Window>

 

纯的XAML代码,窗体加载时,启动动画。

 

目录
相关文章
|
C# 算法 前端开发
WPF: RenderTransform特效
原文:WPF: RenderTransform特效 WPF中的变形(RenderTransform)类是为了达到直接去改变某个Silverlight对象的形状(比如缩放、旋转一个元素)的目的而设计的,RenderTransform包含的变形属性成员就是专门用来改变Silverlight对象形状的,它可以实现对元素拉伸,旋转,扭曲等效果,同时变形特效也常用于辅助产生各种动画效果。
1356 0
|
C# 前端开发
WPF之动画
原文:WPF之动画 线性关键帧、不连续关键帧动画: ...
633 0
|
C#
WPF 关于圆角的制作
原文:WPF 关于圆角的制作 1、使用Boder(一般情况): 设置CornerRadius属性   ...   2、创建ClippingBorder类: View Code using System; using System.
1348 0
|
C#
WPF 实现阴影效果
原文:WPF 实现阴影效果 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a771948524/article/details/9259557 1.首先最常见的一个阴影效果的类是DropShadowEffect。
2101 0
|
C#
WPF实现左右移动(晃动)动画效果
原文:WPF实现左右移动(晃动)动画效果 实现控件或布局的左右移动(晃动)主要用到DoubleAnimation以及Storyboard 布局代码为: ...
1554 0
|
C# 数据格式 XML
wpf之自定义滚动条
原文:wpf之自定义滚动条 首先我们添加一个带滚动条的textbox控件: 这里 VerticalScrollBarVisibility="Auto"表示是超出垂直距离自动显示滚动条,当然这个滚动条是win系统自带的效果,我们要修改的就是这部分,需要对滚动区域的模板进行自定义修改。
1614 0
|
C#
WPF阴影效果(DropShadowEffect)
原文:WPF阴影效果(DropShadowEffect) ...
1069 0
|
C#
WPF中的动画
原文:WPF中的动画                                                               WPF中的动画                                                                                  周银辉动画无疑是WPF中最吸引人的特色之一,其可以像Flash一样平滑地播放并与程序逻辑进行很好的交互。
849 0
|
C# 前端开发
WPF动画
原文:WPF动画 1、基本动画。 WPF提供了一个更高级的模型,通过该模型可以只关注动画的定义,而不考虑它们的渲染方式,这个模型基于依赖项属性基础架构,本质上,WPF动画只不过是在一段时间间隔内修改依赖项属性值的一种方式。
1738 0

热门文章

最新文章

  • 1
    流量控制系统,用正则表达式提取汉字
    25
  • 2
    Redis09-----List类型,有序,元素可以重复,插入和删除快,查询速度一般,一般保存一些有顺序的数据,如朋友圈点赞列表,评论列表等,LPUSH user 1 2 3可以一个一个推
    26
  • 3
    Redis08命令-Hash类型,也叫散列,其中value是一个无序字典,类似于java的HashMap结构,Hash结构可以将对象中的每个字段独立存储,可以针对每字段做CRUD
    25
  • 4
    Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
    27
  • 5
    S外部函数可以访问函数内部的变量的闭包-闭包最简单的用不了,闭包是内层函数+外层函数的变量,简称为函数套函数,外部函数可以访问函数内部的变量,存在函数套函数
    23
  • 6
    Redis06-Redis常用的命令,模糊的搜索查询往往会对服务器产生很大的压力,MSET k1 v1 k2 v2 k3 v3 添加,DEL是删除的意思,EXISTS age 可以用来查询是否有存在1
    30
  • 7
    Redis05数据结构介绍,数据结构介绍,官方网站中看到
    21
  • 8
    JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
    19
  • 9
    JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
    19
  • 10
    定义好变量,${age}模版字符串,对象可以放null,检验数据类型console.log(typeof str)
    19