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