原文:WPF翻转动画
小丫头比较调皮，为了做个东东来哄一下小丫头，我想到了做一个简单的三维翻转动画。在登录QQ 2013 的时候，我看到登录窗口也有类似的动画。
在WPF中要翻转对象，估计是得用三维变换，所以我用到了AxisAngleRotation3D，让图形绕着Z轴来旋转。
先看看效果。
是的，就是这样的效果，在XAML中，由于涉及三维图形，我先做了两个用户控件，作为正面和背面，然后让它旋转。
设计完用户控件后，就在主窗口上放一个Viewport3D控件，这个是必须的，它是三维模型的容器，如果不用就不知道怎么弄出三维图形来了。具体请看下面的XAML：
<Window x:Class="Wall3D_wpf.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1"
Height="500"
Width="500">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Viewport3D Grid.Row="0"
Margin="3">
<Viewport3D.Camera>
<PerspectiveCamera Position="0 0 800"
LookDirection="0 0 -1"
NearPlaneDistance="100" />
</Viewport3D.Camera>
<Viewport3D.Children>
<ContainerUIElement3D>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="-200 150 0 -200 -150 0 200 -150 0 200 150 0"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0 0 0 1 1 1 1 0" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Visual>
<Grid>
<Grid.Background>
<RadialGradientBrush Center="1,0.2"
RadiusX="1"
RadiusY="1"
SpreadMethod="Reflect">
<GradientStop Color="#FF4FE024"
Offset="0" />
<GradientStop Color="#FFD3F3CA"
Offset="1" />
<GradientStop Color="#FFB7FBA4"
Offset="0.562" />
</RadialGradientBrush>
</Grid.Background>
<Grid Margin="20">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Text="用户登录"
FontSize="42"
FontFamily="华文行楷"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
<Grid Margin="5"
Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
HorizontalAlignment="Right"
Text="用户名："
FontSize="24"
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="0"
Margin="3,4,16,4"
FontSize="24" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="密码："
FontSize="24"
HorizontalAlignment="Right"
VerticalAlignment="Center" />
<PasswordBox Grid.Column="1"
Grid.Row="1"
Margin="3,4,16,4"
FontSize="24" />
</Grid>
<Button Content="确 定"
Grid.Row="2"
HorizontalAlignment="Center"
Margin="0,15,0,15"
Width="180"
FontSize="20" />
</Grid>
</Grid>
</Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D Positions="200 150 0 200 -150 0 -200 -150 0 -200 150 0"
TriangleIndices="0 1 2 0 2 3"
TextureCoordinates="0 0 0 1 1 1 1 0" />
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" />
</Viewport2DVisual3D.Material>
<Viewport2DVisual3D.Visual>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="1,1"
StartPoint="0,0">
<GradientStop Color="#FF7367E6"
Offset="0" />
<GradientStop Color="#FF789AF3"
Offset="1" />
<GradientStop Color="#FFD5CCF7"
Offset="0.558" />
</LinearGradientBrush>
</Grid.Background>
<Canvas Margin="20"
SnapsToDevicePixels="True">
<TextBlock Text="连接方式："
FontSize="22" />
<StackPanel Orientation="Vertical"
Canvas.Top="36">
<RadioButton GroupName="g"
Content="TCP"
FontSize="20" />
<RadioButton GroupName="g"
Content="UDP"
FontSize="20" />
</StackPanel>
<GroupBox Canvas.Top="120"
Header="设置代理">
<Grid Margin="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Column="0"
Grid.Row="0"
Text="IP地址："
VerticalAlignment="Center" />
<TextBox Grid.Row="0"
Grid.Column="1"
Width="150"
Margin="5" />
<TextBlock Grid.Column="0"
Grid.Row="1"
Text="端口："
VerticalAlignment="Center" />
<TextBox Grid.Column="1"
Grid.Row="1"
Width="150"
Margin="5" />
</Grid>
</GroupBox>
</Canvas>
</Grid>
</Viewport2DVisual3D.Visual>
</Viewport2DVisual3D>
<!-- 三维变换 -->
<ContainerUIElement3D.Transform>
<RotateTransform3D CenterX="0.5"
CenterY="0.5"
CenterZ="0.5">
<RotateTransform3D.Rotation>
<AxisAngleRotation3D x:Name="axr"
Angle="0"
Axis="0 1 0" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</ContainerUIElement3D.Transform>
</ContainerUIElement3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="Transparent" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
</Viewport3D>
<StackPanel Grid.Row="1"
Margin="0,5,0,6"
Orientation="Horizontal"
HorizontalAlignment="Center">
<Button Padding="25,5"
Content="向前"
Click="OnClick" />
<Button Padding="25,5"
Content="向后"
Click="OnClick"
Margin="12,0,0,0" />
<Button Padding="25,5"
Content="关闭"
Click="OnClick"
Margin="12,0,0,0" />
</StackPanel>
</Grid>
</Window>
里面还有几个按钮，我是通过单击按钮来控制动画的，所以，后面还要写必要的处理代码，生成动画。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Media.Media3D;
using System.Windows.Shapes;
namespace Wall3D_wpf
{
/// <summary>
/// Window1.xaml 的交互逻辑
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
}
private void OnClick(object sender, RoutedEventArgs e)
{
Button btn = e.OriginalSource as Button;
if (btn != null)
{
string s = btn.Content.ToString();
if (s == "关闭")
{
this.Close();
}
DoubleAnimation da = new DoubleAnimation();
da.Duration = new Duration(TimeSpan.FromSeconds(1));
if (s == "向前")
{
da.To = 0d;
}
else if (s == "向后")
{
da.To = 180d;
}
this.axr.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);
}
}
}
}
当图形绕Z轴转0度，就表示是正面，如果为180度，就转到反面。我们在声明Viewport2DVisual3D.Geometry的坐标模型，即三角型叠加模型，要注意点逆时针方向顺序来定义，如果弄反了，那么图形就跑到模型的背面去了。因此，正面图形和背面图形的点的方向是刚好相反的。
三维的东西不太好解释，所以我稍后把代码上传，以供参考。
下载地址：http://download.csdn.net/detail/tcjiaan/5243065
时间： 2024-08-28 20:18:11