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 省了不少事,值得好好研究下。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM