WPF实现3D翻牌式倒计时特效

本文实例为大家分享了WPF实现3D翻牌式倒计时的具体代码,供大家参考,具体内容如下

实现效果如下:

思路:使用自定义控件,设置一个背板 MyCardControlBottom,一个卡牌翻动的前部 MyCardControlFront,一个卡牌翻动后的背部 MyCardControlBack,另外实现卡牌翻动的MyCardControl;在主窗体中设置一计时器,根据卡牌上的数字和计时器时间启动翻牌动作。

主要代码:

1、自定义控件MyCardControlBottom

<UserControl x:Class="TurnOverCards.MyCardControlBottom"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    x:Name="MyUserControl"
    Height="300" Width="200">
 <Border BorderThickness="0">
  <Border.Effect>
   <DropShadowEffect BlurRadius="20" Color="Gray" Direction="-90" ShadowDepth="10"></DropShadowEffect>
  </Border.Effect>
  <Border.Background>
   <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.65">
    <GradientStop Color="DimGray" Offset="0" />
    <GradientStop Color="Black" Offset="1" />
   </RadialGradientBrush>
  </Border.Background>
  <Grid>
   <Grid.RowDefinitions>
    <RowDefinition></RowDefinition>
    <RowDefinition></RowDefinition>
   </Grid.RowDefinitions>
   <TextBlock Grid.Row="0" Text="{Binding ElementName=MyUserControl,Path=BottomText}" FontFamily="Arial" Foreground="White" FontSize="150" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,65,0,2">
    <TextBlock.Effect>
     <DropShadowEffect BlurRadius="10" Color="Black" Direction="-90" ShadowDepth="2"></DropShadowEffect>
    </TextBlock.Effect>
   </TextBlock>
   <TextBlock Grid.Row="1" Text="{Binding ElementName=MyUserControl,Path=BottomText}" FontFamily="Arial" Foreground="White" FontSize="150" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,65">
    <TextBlock.Effect>
     <DropShadowEffect BlurRadius="10" Color="Black" Direction="-90" ShadowDepth="2"></DropShadowEffect>
    </TextBlock.Effect>
   </TextBlock>
  </Grid>
 </Border>
</UserControl>

其中BottomText为自定义属性。

public static readonly DependencyProperty BottomTextProperty = DependencyProperty.Register("BottomText", typeof(string), typeof(MyCardControlBottom), new PropertyMetadata(null));
  public string BottomText
  {
   get { return (string)GetValue(BottomTextProperty); }
   set { SetValue(BottomTextProperty, value); }
  }

2、自定义控件MyCardControlFront

<UserControl x:Class="TurnOverCards.MyCardControlFront"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    x:Name="MyUserControl"
    Height="150" Width="200">
 <Border BorderThickness="0" ClipToBounds="True">
  <Border.Background>
   <RadialGradientBrush GradientOrigin="0.5,0.75" Center="0.5,0.5" RadiusX="0.75" RadiusY="0.75">
    <GradientStop Color="DimGray" Offset="0" />
    <GradientStop Color="Black" Offset="1" />
   </RadialGradientBrush>
  </Border.Background>
  <TextBlock Text="{Binding ElementName=MyUserControl,Path=FrontText}" FontFamily="Arial" Foreground="White" FontSize="150" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,65,0,2">
   <TextBlock.Effect>
    <DropShadowEffect BlurRadius="10" Color="Black" Direction="-90" ShadowDepth="2"></DropShadowEffect>
   </TextBlock.Effect>
  </TextBlock>
 </Border>
</UserControl>

其中FrontText为自定义属性。

3、自定义控件MyCardControlBack

窗体大部分布局与MyCardControlFront 相同,字体部分需要进行翻转显示,其中BackText为自定义属性。

<TextBlock Text="{Binding ElementName=MyUserControl,Path=BackText}" FontFamily="Arial" Foreground="White" FontSize="150" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,-85"
     RenderTransformOrigin="0.5,0.5">
   <TextBlock.Effect>
    <DropShadowEffect BlurRadius="10" Color="Black" Direction="-90" ShadowDepth="2"></DropShadowEffect>
   </TextBlock.Effect>
   <TextBlock.RenderTransform >
    <ScaleTransform ScaleX="-1" ScaleY="-1"/>
   </TextBlock.RenderTransform>
</TextBlock>

4、自定义控件MyCardControl

卡牌翻转动作在这里实现。

<UserControl x:Class="TurnOverCards.MyCardControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:TurnOverCards"
    x:Name="UserControl"
    Loaded="MyUserControl_Loaded">
 <Viewport3D Width="200" Height="300">
  <Viewport3D.Camera>
   <PerspectiveCamera Position="0 -150 480" LookDirection="0 0 -1"/>
  </Viewport3D.Camera>
  <Viewport3D.Children>
   <ModelVisual3D>
    <ModelVisual3D.Content>
     <DirectionalLight Color="Transparent"/>
    </ModelVisual3D.Content>
   </ModelVisual3D>
   <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>
      <local:MyCardControlFront x:Name="frontControl" Width="200" Height="150"/>
     </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>
      <local:MyCardControlBack x:Name="backControl" Width="200" Height="150"/>
     </Viewport2DVisual3D.Visual>
    </Viewport2DVisual3D>
    <ContainerUIElement3D.Transform>
     <Transform3DGroup>
      <RotateTransform3D CenterX="0" CenterY="-150" CenterZ="0">
       <RotateTransform3D.Rotation>
        <AxisAngleRotation3D x:Name="MyAxisAngleRotation3D" Angle="0" Axis="1 0 0"/>
       </RotateTransform3D.Rotation>
      </RotateTransform3D>
     </Transform3DGroup>
    </ContainerUIElement3D.Transform>
   </ContainerUIElement3D>
  </Viewport3D.Children>
 </Viewport3D>
</UserControl>

加载时赋值:

public int ShowValue { get; set; }  

  private void MyUserControl_Loaded(object sender, RoutedEventArgs e)
  {
   this.frontControl.FrontText = ShowValue.ToString();
  }

5、主窗体交互逻辑

private int Count = 10;
private DispatcherTimer frameTimer;
private int TimeValue = 0;

  private void Window_Loaded(object sender, RoutedEventArgs e)
  {
   this.bottomControl.BottomText = Count.ToString();

   for (int i = 1; i <= Count; i++)
   {
    var card = new MyCardControl();
    card.ShowValue = i;
    this.mainGrid.Children.Add(card);
    Canvas.SetZIndex(card, i);
   }

   frameTimer = new DispatcherTimer();
   frameTimer.Tick += OnFrame;
   frameTimer.Interval = TimeSpan.FromSeconds(1);
   frameTimer.Start();
  }

  private void OnFrame(object sender, EventArgs e)
  {
   if (TimeValue >= Count)
   {
    if (frameTimer != null)
     frameTimer.Stop();
    return;
   }

   if(TimeValue == Count - 1)
   {
    this.bottomControl.BottomText = 0.ToString();
   }

   List<MyCardControl> cardList = GetChildObjects<MyCardControl>(this.mainGrid);
   foreach (var item in cardList)
   {
    if(item.ShowValue == Count - TimeValue)
    {
     Canvas.SetZIndex(item, Count + TimeValue);

     DoubleAnimation da = new DoubleAnimation();
     da.Duration = new Duration(TimeSpan.FromSeconds(1));
     da.To = 180d;
     item.ShowValue--;
     item.backControl.BackText = item.ShowValue.ToString();

     AxisAngleRotation3D aar = item.FindName("MyAxisAngleRotation3D") as AxisAngleRotation3D;
     if (aar != null)
      aar.BeginAnimation(AxisAngleRotation3D.AngleProperty, da);

     break;
    }
   }

   TimeValue++;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • WPF制作一个简单的倒计时器实例附源码

    实例一: 早上起来后闲的无事,于是想到前些日子学院的某个老师让大家给他找个什么倒计时的小软件,当时大家忙于复习所以也懒得搭理这件事,囧~.既然早上没事干,何不写个玩玩~既然要写,就用以前没怎么捣鼓过的WPF写一个吧,也算是一次学习WPF的初探吧(感觉自己很落后了)! 在Vs2008和Vs2010之间徘徊了许久之后,最终还是选择了Vs2008做开发IDE.在Vs2008中建了个WPF工程后,浏览了下默认生成的工程文件结构,一个App.xaml(当然还有App.xaml.cs)和一个Windows1

  • WPF实现3D翻牌式倒计时特效

    本文实例为大家分享了WPF实现3D翻牌式倒计时的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:使用自定义控件,设置一个背板 MyCardControlBottom,一个卡牌翻动的前部 MyCardControlFront,一个卡牌翻动后的背部 MyCardControlBack,另外实现卡牌翻动的MyCardControl:在主窗体中设置一计时器,根据卡牌上的数字和计时器时间启动翻牌动作. 主要代码: 1.自定义控件MyCardControlBottom <UserControl x

  • jQuery团购倒计时特效实现方法

    本文实例讲述了jQuery团购倒计时特效实现方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &

  • JS实现秒杀倒计时特效

    本文实例为大家分享了JS实现秒杀倒计时特效的具体代码,供大家参考,具体内容如下 知识点 添加一个定时器,对时间标签不断进行更新设置即可. 引入工具库工具库 运行效果 代码 引入MyTool.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div

  • WPF实现3D立方体波浪墙效果

    本文实例为大家分享了WPF实现3D立方体波浪墙效果的具体代码,供大家参考,具体内容如下 实现效果如下: 思路:仿照3D粒子系统,将粒子颗粒的Geometry改造为立方体,鼠标移动时将鼠标位置转为3D场景中的坐标. 步骤: 1.粒子类Particle.cs public Point3D Position;//位置 public double Width;//长方体底面宽 public double Height;//长方体侧面高 2.粒子系统ParticleSystem.cs private re

  • WPF实现3D粒子波浪效果

    本文实例为大家分享了WPF实现3D粒子波浪效果的具体代码,供大家参考,具体内容如下 实现效果如下: 步骤: 1.3D粒子类Particle.cs public class Particle { public Point3D Position;//位置 public double Size;//尺寸 public int XIndex;//X位置标识 public int YIndex;//Y位置标识 } 2.粒子系统ParticleSystem类 public class ParticleSys

  • 利用Three.js实现3D三棱锥立体特效

    目录 演示 技术栈 源码 css部分 js部分 演示 技术栈 3D特效的话最容易让人想到的应该是three.js吧.我们今天来说说它. Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多.使用最广泛的三维引擎. Threejs是一款WebGL三维引擎,它可以用来做什么许多许多地场景应用 一个小案例 <!DOCTYPE html> <html lang="en"> <head> <me

  • CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效

    今天分享一个CSS3制作的翻牌效果,效果如下图所示,所过把把这个效果应用于相册肯定会很炫的.呵呵,超酷啊. 一.HTML代码: 因为是CSS3实现,所以大家可以看到没有任何的JS代码.ul为一组图片,每个li中有个a(因为我们希望点击图片可以跳转),a中包含两个div,一个是正常显示时的(即显示图片),一个是图片旋转后显示的(即介绍). <!doctype html> <html> <head> <meta charset="gb2312"&g

  • Android实现3D推拉门式滑动菜单源码解析

    前言   又看了郭霖大神的一篇博客<Android 3D滑动菜单完全解析,实现推拉门式的立体特效>,是关于自定义控件方面的,因为自己关于自定义控件了解的不过,以前的要求是会用就行,但是后来越发的明白只会用是不够的,出现问题都不知道该怎么分析,所以我才打算把别人博客里的自定义控件的源码给看懂,虽然可能时间花的时间长,但是,绝对是值得的!   因为源码的东西比较多,看完之后发现还存在可以优化的地方,郭神的代码当时是为了例子讲解,所以对这个控件类的封装就没有仔细去做,所以我就进行了封装和优化,是的移

  • javascript实现数字倒计时特效

    本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下: 效果图: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript实现的倒计时时钟</title> <style> body,div{margin:0;paddi

  • javascript 可控式透明特效实现代码

    空间就全凭CSS的绝对定位实现位移了.在开始之前,我们练习一下setTimeout的递归用法(用来模拟setInterval). 复制代码 代码如下: function text(el){ var node = (typeof el == "string")? document.getElementById(el) : el; var i = 0; var repeat = function(){ setTimeout(function(){ node.innerHTML = &quo

随机推荐