WPF 分享一种背景动画效果

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

GIF1.gif

风格比较卡哇伊。


<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代码,窗体加载时,启动动画。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,825评论 25 707
  • 本文根据众多互联网博客内容整理后形成,引用内容的版权归原始作者所有,仅限于学习研究使用,不得用于任何商业用途。 C...
    深红的眼眸阅读 534评论 0 2
  • 晚安,行走在梦境边沿的人那里光线幽暗,你尽可将呼吸沉缓以梦为牵引,你所踏出的每一步仿佛都通向一座虚无的城入梦,你就...
    宁木紫菀阅读 250评论 6 5
  • 我将深味这非人间的浓黑的悲凉;以我的最大哀痛显示于非人间,使它们快意于我的苦痛,就将这作为后死者的菲薄的祭品,奉...
    属于格子的夏天阅读 634评论 0 0