WPF实现Android(3D)菜单翻转动画

  • A+
所属分类：.NET技术
摘要

WPF开发者QQ群： 340500857  微信公众号：WPF开发者      或者搜索：WPFDevelopers
便宜好用的国外VPS推荐

WPF开发者QQ群： 340500857 

微信公众号：WPF开发者      或者搜索：WPFDevelopers

 

每日一笑

我催小李还债：“我最近手头紧，其他人都还钱了，你有啥表示?”

小李：“心疼。”

我怒了：“就这？”

小李说：“别人都只会拿钱敷衍你，不像我，只会心疼哥哥。”

 

 

效果预览

WPF实现Android(3D)菜单翻转动画

 

一、MainWindow.xaml代码如下：

<Grid>         <Grid.Background>             <ImageBrush ImageSource="background.png"/>         </Grid.Background>         <Border Width="400" Height="235" Background="#F9F7F9"                 VerticalAlignment="Top" Margin="10,0" SnapsToDevicePixels="True">                 <UniformGrid Columns="5" VerticalAlignment="Bottom">                     <Viewport3D Height="80" Width="80">                         <Viewport3D.Camera>                             <OrthographicCamera LookDirection="0,0,-100" Position="0,0,100" UpDirection="0,1,0"/>                         </Viewport3D.Camera>                         <Viewport3D.Children>                             <ModelVisual3D>                                 <ModelVisual3D.Content>                                     <AmbientLight Color="White"/>                                 </ModelVisual3D.Content>                             </ModelVisual3D>                             <ContainerUIElement3D>                                 <ContainerUIElement3D.Transform>                                     <RotateTransform3D>                                         <RotateTransform3D.Rotation>                                             <AxisAngleRotation3D Angle="0" Axis="1 0 0"/>                                         </RotateTransform3D.Rotation>                                     </RotateTransform3D>                                 </ContainerUIElement3D.Transform>                                  <Viewport2DVisual3D>                                     <Viewport2DVisual3D.Material>                                         <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                                     </Viewport2DVisual3D.Material>                                     <Viewport2DVisual3D.Geometry>                                         <MeshGeometry3D Positions="-1,1,1    -1,-1,1   1,-1,1    1,1,1"                                     TextureCoordinates="0,0   0,1     1,1  1,0"                                     TriangleIndices="0 1 2 0 2 3"/>                                     </Viewport2DVisual3D.Geometry>                                     <Border Background="#5B31AD" Height="110" Width="110" CornerRadius="0,0,0,30">                                         <Path Data="{StaticResource PathBuildingRegular}" Fill="#FFFF"                                           Stretch="Fill"  Width="40" Height="40"/>                                     </Border>                                 </Viewport2DVisual3D>                             </ContainerUIElement3D>                         </Viewport3D.Children>                     </Viewport3D>                      <Viewport3D Height="80" Width="80">                         <Viewport3D.Camera>                             <OrthographicCamera LookDirection="0,0,-100" Position="0,0,100" UpDirection="0,1,0"/>                         </Viewport3D.Camera>                         <Viewport3D.Children>                             <ModelVisual3D>                                 <ModelVisual3D.Content>                                     <AmbientLight Color="White"/>                                 </ModelVisual3D.Content>                             </ModelVisual3D>                             <ContainerUIElement3D>                                 <ContainerUIElement3D.Transform>                                     <RotateTransform3D>                                         <RotateTransform3D.Rotation>                                             <AxisAngleRotation3D Angle="0" Axis="1 0 0"/>                                         </RotateTransform3D.Rotation>                                     </RotateTransform3D>                                 </ContainerUIElement3D.Transform>                                  <Viewport2DVisual3D>                                     <Viewport2DVisual3D.Material>                                         <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                                     </Viewport2DVisual3D.Material>                                     <Viewport2DVisual3D.Geometry>                                         <MeshGeometry3D Positions="-1,1,1    -1,-1,1   1,-1,1    1,1,1"                                     TextureCoordinates="0,0   0,1     1,1  1,0"                                     TriangleIndices="0 1 2 0 2 3"/>                                     </Viewport2DVisual3D.Geometry>                                     <Border Background="#8E1FA4" Height="110" Width="110">                                         <Path Data="{StaticResource PathAlarmMD}" Fill="#FFFF"                                           Stretch="Fill"  Width="40" Height="40"/>                                     </Border>                                 </Viewport2DVisual3D>                                                             </ContainerUIElement3D>                         </Viewport3D.Children>                     </Viewport3D>                      <Viewport3D Height="80" Width="80">                         <Viewport3D.Camera>                             <OrthographicCamera LookDirection="0,0,-100" Position="0,0,100" UpDirection="0,1,0"/>                         </Viewport3D.Camera>                         <Viewport3D.Children>                             <ModelVisual3D>                                 <ModelVisual3D.Content>                                     <AmbientLight Color="White"/>                                 </ModelVisual3D.Content>                             </ModelVisual3D>                             <ContainerUIElement3D>                                 <ContainerUIElement3D.Transform>                                     <RotateTransform3D>                                         <RotateTransform3D.Rotation>                                             <AxisAngleRotation3D Angle="0" Axis="1 0 0"/>                                         </RotateTransform3D.Rotation>                                     </RotateTransform3D>                                 </ContainerUIElement3D.Transform>                                  <Viewport2DVisual3D>                                     <Viewport2DVisual3D.Material>                                         <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                                     </Viewport2DVisual3D.Material>                                     <Viewport2DVisual3D.Geometry>                                         <MeshGeometry3D Positions="-1,1,1    -1,-1,1   1,-1,1    1,1,1"                                     TextureCoordinates="0,0   0,1     1,1  1,0"                                     TriangleIndices="0 1 2 0 2 3"/>                                     </Viewport2DVisual3D.Geometry>                                     <Border Background="#3A7DFE" Height="110" Width="110">                                         <Path Data="{StaticResource PathFriend}" Fill="#FFFF"                                           Stretch="Fill"  Width="40" Height="30"/>                                     </Border>                                 </Viewport2DVisual3D>                                                             </ContainerUIElement3D>                         </Viewport3D.Children>                     </Viewport3D>                      <Viewport3D Height="80" Width="80" x:Name="viewport3DBus" MouseEnter="viewport3DBus_MouseEnter">                         <Viewport3D.Camera>                             <OrthographicCamera LookDirection="0,0,-100" Position="0,0,100" UpDirection="0,1,0"/>                         </Viewport3D.Camera>                         <Viewport3D.Children>                             <ModelVisual3D>                                 <ModelVisual3D.Content>                                     <AmbientLight Color="White"/>                                 </ModelVisual3D.Content>                             </ModelVisual3D>                             <ContainerUIElement3D>                                 <ContainerUIElement3D.Transform>                                     <RotateTransform3D>                                         <RotateTransform3D.Rotation>                                             <AxisAngleRotation3D x:Name="axis3dBus" Angle="0" Axis="1 0 0"/>                                         </RotateTransform3D.Rotation>                                     </RotateTransform3D>                                 </ContainerUIElement3D.Transform>                                  <Viewport2DVisual3D>                                     <Viewport2DVisual3D.Material>                                         <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                                     </Viewport2DVisual3D.Material>                                     <Viewport2DVisual3D.Geometry>                                         <MeshGeometry3D Positions="-1,1,1    -1,-1,1   1,-1,1    1,1,1"                                     TextureCoordinates="0,0   0,1     1,1  1,0"                                     TriangleIndices="0 1 2 0 2 3"/>                                     </Viewport2DVisual3D.Geometry>                                     <Border Background="#5EECA6" Height="110" Width="110">                                         <Path Data="{StaticResource PathBus}" Fill="#FFFF"                                           Stretch="Fill"  Width="35" Height="40"/>                                     </Border>                                 </Viewport2DVisual3D>                                  <Viewport2DVisual3D>                                     <Viewport2DVisual3D.Material>                                         <DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True"/>                                     </Viewport2DVisual3D.Material>                                     <Viewport2DVisual3D.Geometry>                                         <MeshGeometry3D Positions="-1,1,1  1,1,1   1,1,-1   -1,1,-1"                                     TextureCoordinates="0,0   0,1   1,1  1,0"                                     TriangleIndices="0 1 2 0 2 3"/>                                     </Viewport2DVisual3D.Geometry>                                     <Border Background="#41A545" Height="110" Width="110" RenderTransformOrigin="0.5,0.5">                                         <Border.RenderTransform>                                             <TransformGroup>                                                 <RotateTransform Angle="90"/>                                             </TransformGroup>                                         </Border.RenderTransform>                                         <StackPanel VerticalAlignment="Center">                                             <Path Data="{StaticResource PathBus}" Fill="#FFFF"                                           Stretch="Fill"  Width="35" Height="40"/>                                             <TextBlock Text="Bus" HorizontalAlignment="Center" FontSize="14" Foreground="White"/>                                         </StackPanel>                                     </Border>                                 </Viewport2DVisual3D>                             </ContainerUIElement3D>                         </Viewport3D.Children>                     </Viewport3D>                                     </UniformGrid>             </Border>             <Border Width="450" BorderBrush="#181618"                  BorderThickness="25,0,25,25" Height="260"                 CornerRadius="0,0,50,50" Background="{x:Null}"                 VerticalAlignment="Top" Margin="10,0" SnapsToDevicePixels="True">                 <Border.Effect>                     <DropShadowEffect Color="White" BlurRadius="10" Direction="300" ShadowDepth="0" />                 </Border.Effect>             </Border>         <StackPanel>             <TextBlock Text="微信号公众号:WPFDevelopers" HorizontalAlignment="Center"                    VerticalAlignment="Top" Margin="0,20" FontSize="20" FontWeight="Black"/>             <TextBlock Text="源码获取关注公众号后输入：3DBar 即可获取" HorizontalAlignment="Center"                    VerticalAlignment="Top" Margin="0,20" FontSize="14" FontWeight="Black"/>         </StackPanel>             </Grid>

二、MainWindow.xaml.cs代码如下：

DoubleAnimation animation = null; private void viewport3DBus_MouseEnter(object sender, MouseEventArgs e)         {             if (animation != null) return;              animation = new DoubleAnimation             {                 Duration = new Duration(TimeSpan.FromSeconds(1.5)),                 From = 0,                 To = 90,                 EasingFunction = new BackEase { EasingMode = EasingMode.EaseInOut },             };             animation.Completed += (s, e1) =>             {                 animation = null;             };             axis3dBus.BeginAnimation(AxisAngleRotation3D.AngleProperty, animation);         }

更多教程欢迎关注微信公众号：

WPF实现Android(3D)菜单翻转动画

 

源码获取关注微信公众号输入：“3DBar” 即可获取源码。

 

WPF开发者QQ群： 340500857 

blogs： https://www.cnblogs.com/yanjinhua/p/14345136.html

Github：https://github.com/yanjinhuagood

作者：驚鏵

出处：https://www.cnblogs.com/yanjinhua

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

转载请著名作者 出处 https://github.com/yanjinhuagood

 

源码地址：https://github.com/yanjinhuagood/3DAnimationNavigationBar

便宜好用的国外VPS推荐