备案控制台
开发者社区 开发与运维 文章 正文

WPF翻转动画

2015-04-22 1022
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:WPF翻转动画 小丫头比较调皮，为了做个东东来哄一下小丫头，我想到了做一个简单的三维翻转动画。在登录QQ 2013 的时候，我看到登录窗口也有类似的动画。 在WPF中要翻转对象，估计是得用三维变换，所以我用到了AxisAngleRotation3D，让图形绕着Z轴来旋转。

原文: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

 

文章标签：
C#
前端开发
容器
数据安全/隐私保护
网络协议
关键词：
wpf动画
wpf翻转
wpf翻转动画
杰克.陈
目录
相关文章
李杰-@yd
|
1月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放，可沿X或Y轴调整。在故事板中，通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性，并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时，EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后，展示了如何将动画集成到自定义按钮样式中。
李杰-@yd
18 0
Rick_1/2
|
8月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
Rick_1/2
132 0
杰克.陈
|
C#
WPF中的PathAnimation（路径动画）
原文:WPF中的PathAnimation（路径动画）                                   WPF中的PathAnimation（路径动画）                                                               周...
杰克.陈
1248 0
杰克.陈
|
API C# 索引
WPF中的动画——（一）基本概念
原文:WPF中的动画——（一）基本概念 WPF的一个特点就是支持动画，我们可以非常容易的实现漂亮大方的界面。首先，我们来复习一下动画的基本概念。计算机中的动画一般是定格动画，也称之为逐帧动画，它通过每帧不同的图像连续播放，从而欺骗眼和脑产生动画效果。
杰克.陈
1037 0
杰克.陈
|
C# 测试技术
WPF中的动画——（二）From/To/By 动画
原文:WPF中的动画——（二）From/To/By 动画 我们所实现的的动画中，很大一部分是让一个属性在起始值和结束值之间变化，例如，我在前文中实现的改变宽度的动画：     var widthAnimation = new DoubleAnimation()    {        From = 0,        To = 320,        Duration = TimeSpan.
杰克.陈
971 0
杰克.陈
|
算法 C#
WPF中的动画——（五）关键帧动画
原文:WPF中的动画——（五）关键帧动画 与 From/To/By 动画类似，关键帧动画以也可以以动画形式显示目标属性值。 和From/To/By 动画不同的是， From/To/By 动画只能控制在两个状态之间变化，而关键帧动画则可以在多个状态之间变化，例如，对于前面那个改变按钮宽度的例子，如果我们要实现如下效果： 在2秒时将宽度从 0变为350 在7秒时将宽度变为50 在9秒的时候将其宽度变为200 虽然我们可以用三个From/To/By 动画组合实现类似效果，但是这样一来麻烦，二来要感知动画完成事件，不方便在XAML中使用。
杰克.陈
1330 0
杰克.陈
|
C#
WPF中的动画——（四）缓动函数
原文:WPF中的动画——（四）缓动函数 缓动函数可以通过一系列公式模拟一些物理效果，如实地弹跳或其行为如同在弹簧上一样。它们一般应用在From/To/By动画上，可以使得其动画更加平滑。     var widthAnimation = new DoubleAnimation()    {    ...
杰克.陈
933 0
杰克.陈
|
C#
WPF中的动画——（三）时间线（TimeLine）
原文:WPF中的动画——（三）时间线（TimeLine） 时间线（TimeLine）表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine： AnimationTimeline ：前面已经介绍过，主要用于属性的过渡，这种是最常见的动画。
杰克.陈
1432 0
杰克.陈
|
C# 容器 调度
WPF中的动画——（六）演示图板
原文:WPF中的动画——（六）演示图板 前面所介绍的都是单一的动画，它只能修改单一属性。有的时候，我们需要将一组动画一起进行，对于一个按钮，我们可能有如下需求： 选择该按钮时，该按钮增大并更改颜色。
杰克.陈
736 0
杰克.陈
|
前端开发 C#
WPF中的动画——（五）路径动画
原文:WPF中的动画——（五）路径动画 路径动画是一种专门用于将对象按照指定的Path移动的动画，虽然我们也可以通过控制动画的旋转和偏移实现对象的移动，但路径动画更专业，它的实现更加简洁明了。 路径动画中最常用的是MatrixAnimationUsingPath，它通常用于控制对象的MatrixT...
杰克.陈
1253 0