WPF 分享一種背景動(dòng)畫效果

今天看微軟的一個(gè)Samples,發(fā)現(xiàn)一個(gè)蠻好玩的背景樣式,如下圖所示:

GIF1.gif

風(fēng)格比較卡哇伊。


<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代碼,窗體加載時(shí),啟動(dòng)動(dòng)畫。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,057評(píng)論 25 709
  • 本文根據(jù)眾多互聯(lián)網(wǎng)博客內(nèi)容整理后形成,引用內(nèi)容的版權(quán)歸原始作者所有,僅限于學(xué)習(xí)研究使用,不得用于任何商業(yè)用途。 C...
    深紅的眼眸閱讀 582評(píng)論 0 2
  • 晚安,行走在夢境邊沿的人那里光線幽暗,你盡可將呼吸沉緩以夢為牽引,你所踏出的每一步仿佛都通向一座虛無的城入夢,你就...
    寧木紫菀閱讀 283評(píng)論 6 5
  • 我將深味這非人間的濃黑的悲涼;以我的最大哀痛顯示于非人間,使它們快意于我的苦痛,就將這作為后死者的菲薄的祭品,奉...
    屬于格子的夏天閱讀 759評(píng)論 0 0

友情鏈接更多精彩內(nèi)容