WPF:仿WIN7窗體打開關閉效果

WIN7系統里面有很多很炫的動畫效果，今天來模仿一下最常見的窗體打開關閉時的動畫效果，比如打開一窗體，頂部靠外傾斜，透明漸變顯示，關閉窗口，則反之的效果。

先新建一窗體，因為有向前向后傾斜效果，為了省事，引用一DLL，3DTools。

也就是創建一個3D模型，然后對它添加動畫。

講一下用到3DTools 的地方。

先引用

xmlns:tool="clr-namespace:_3DTools;assembly=3DTools"

<Grid>
        <tool:Interactive3DDecorator ContainsInk="False">
            <Viewport3D x:Name="view" Opacity="0">
                <Viewport3D.Camera>
                    <PerspectiveCamera Position="0, 0.5, 3.2"/>
                </Viewport3D.Camera>
                
                <tool:InteractiveVisual3D
                                     Geometry="{StaticResource PlaneMesh}"
                                     Visual="{StaticResource Visual}" 
                                     IsBackVisible="False">
                    <tool:InteractiveVisual3D.Transform>
                        <Transform3DGroup>
                        <RotateTransform3D>
                            <RotateTransform3D.Rotation>
                                <AxisAngleRotation3D x:Name="axis" Angle="0" Axis="1 0 0" />
                            </RotateTransform3D.Rotation>
                        </RotateTransform3D>
                            <ScaleTransform3D x:Name="scale" ScaleX="1" ScaleY="1" ScaleZ="1"/>
                        </Transform3DGroup>
                    </tool:InteractiveVisual3D.Transform>
                </tool:InteractiveVisual3D>
                <ModelVisual3D>
                    <ModelVisual3D.Content>
                        <DirectionalLight Color="#FFFFFFFF"/>
                    </ModelVisual3D.Content>
                </ModelVisual3D>
            </Viewport3D>
        </tool:Interactive3DDecorator>
    </Grid>

與普通的創建3D模型不同，在Viewport3D外面加上一層Interactive3DDecorator，便可以操作上面的控件，而不是僅僅當作Brush畫上去的。

然后為InteractiveVisual3D設置屬性，Geometry 就是上一節講的MeshGeometry3D，這個是和普通的一樣的

<!-- 3D Models -->
        <MeshGeometry3D x:Key="PlaneMesh" Positions="-1,2.5,0 -1,-1,0 1,-1,0 1,2.5,0" 
                        Normals="0 0 1, 0 0 1, 0 0 1, 0 0 1"
                        TextureCoordinates="0,0 0,1 1,1 1,0" 
                        TriangleIndices="0 1 2 2 3 0"/>

Visual就根據你的情況來設置了，什么樣的UI就寫什么Visual。

這里要說一下為了更好的效果要對窗體做下外觀修改：

WindowStyle="None" WindowStartupLocation="CenterScreen" Background="Transparent" AllowsTransparency="True"

在Window 的屬性里設置這些。

當然你也可以自定義控件，模仿得更像一下比如：

 下面就開始寫動畫了

<Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation From="0.75" To="1" Storyboard.TargetName="scale"
                                     Storyboard.TargetProperty="ScaleX" Duration="0:0:0.35"/>
                    <DoubleAnimation From="0.75" To="1" Storyboard.TargetName="scale"
                                     Storyboard.TargetProperty="ScaleY" Duration="0:0:0.35"/>
                    <DoubleAnimation From="13" To="0" Storyboard.TargetName="axis"
                                     Storyboard.TargetProperty="Angle" Duration="0:0:0.35"/>
                    <DoubleAnimation From="0" To="1" Storyboard.TargetName="view"
                                     Storyboard.TargetProperty="Opacity" Duration="0:0:0.35"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>

這個就是打開窗體時的動畫，里面是對Opacity，ScaleTransform3D，AxisAngleRotation3D同時進行了動畫，效果還不錯。

然后就是關閉動畫了

<!--Close Window Storyboard-->
        <Storyboard x:Key="closeStory">
            <DoubleAnimation From="1" To="0.75" Storyboard.TargetName="scale"
                                     Storyboard.TargetProperty="ScaleX" Duration="0:0:0.3"/>
            <DoubleAnimation From="1" To="0.75" Storyboard.TargetName="scale"
                                     Storyboard.TargetProperty="ScaleY" Duration="0:0:0.3"/>
            <DoubleAnimation From="0" To="-15" Storyboard.TargetName="axis"
                                     Storyboard.TargetProperty="Angle" Duration="0:0:0.25"/>
            <DoubleAnimation From="1" To="0" Storyboard.TargetName="view"
                                     Storyboard.TargetProperty="Opacity" Duration="0:0:0.3"/>
        </Storyboard>

上面的Geometry，Visual還有這個closeStory都是寫在Window.Resources的。

那我們來寫一下點擊關閉按鈕后的動畫處理。

 先要為窗體添加一個關閉事件：

 Closing="window_Closing"

然后是在后台代碼：

bool isclose = false;
        private void window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
        {
            if (!isclose)
            {
　　　　　　　　　　//找到資源定義的故事板
                Storyboard story = this.Resources["closeStory"] as Storyboard;
                story.Completed += delegate
                {
                    isclose = true;
                    this.Close();
                };
                story.Begin();
                e.Cancel = true;
            }
        }

聲明一個bool變量，用來記錄是否已進行完動畫效果。
if isclose == false，

就找到資源定義的動畫，讓它Begin，不要忘了添加一個Completed事件。

重要的一點是，e.Cancel = true; 要寫在 Begin 后面，否則會達不到效果。

然后就是當動畫結束后觸發Completed事件，為 isclose 賦值為 true。

再關閉一次窗體。就會又觸發window_Closing。但是這次isclose == true，所以不執行括號內的代碼，然后直接結束。

代碼很簡單，主要還是 3DTools 省了不少事，值得好好研究下。