脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → C#教程 → WPF翻牌式倒计时

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

 更新时间：2020年09月02日 08:44:38   作者：RunnerDNA  
这篇文章主要为大家详细介绍了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++;
}

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

您可能感兴趣的文章:

相关文章

  • Unity3D Shader实现流光效果

    Unity3D Shader实现流光效果

    这篇文章主要为大家详细介绍了Unity3D Shader实现流光效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-04-04
  • C# Razor语法规则

    C# Razor语法规则

    这篇文章介绍了C# Razor的语法规则，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-01-01
  • C# 使用原生 System.IO.Compression 实现 zip 的压缩与解压

    C# 使用原生 System.IO.Compression 实现 zip 的压缩与解压

    这篇文章主要介绍了C# 使用原生 System.IO.Compression 实现 zip 的压缩与解压,zip 是一个非常常见的压缩包格式，本文主要用于说明如何使用代码 文件或文件夹压缩为 zip压缩包及其解压操作，需要的朋友可以参考下
    2022-09-09
  • C# 图片格式转换的实例代码

    C# 图片格式转换的实例代码

    这篇文章主要介绍了C# 图片格式转换的实例代码，文中讲解非常详细，帮助大家更好的理解和学习c#，感兴趣的朋友可以了解下
    2020-08-08
  • C#四种计时器Timer的区别和用法

    C#四种计时器Timer的区别和用法

    这篇文章介绍了C#四种计时器Timer的区别和用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-05-05
  • 解析Silverlight调用WCF/Rest异常的解决方法

    解析Silverlight调用WCF/Rest异常的解决方法

    本篇文章对Silverlight调用WCF/Rest异常的解决方法进行了详细的分析介绍，需要的朋友参考下
    2013-05-05
  • C#实现的文件压缩和解压缩类

    C#实现的文件压缩和解压缩类

    这篇文章主要介绍了C#实现的文件压缩和解压缩类,实例分析了C#针对文件压缩与解压缩的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • C#使用channel实现Plc异步任务之间的通信

    C#使用channel实现Plc异步任务之间的通信

    在C#的并发编程中,Channel是一种非常强大的数据结构,用于在生产者和消费者之间进行通信,本文将给大家介绍C#使用channel实现Plc异步任务之间的通信,文中有相关的代码示例供大家参考,感兴趣的朋友跟着小编一起来看看吧
    2024-05-05
  • LINQ排序操作符用法

    LINQ排序操作符用法

    这篇文章介绍了LINQ排序操作符的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-02-02
  • C#仿QQ实现简单的截图功能

    C#仿QQ实现简单的截图功能

    这篇文章主要为大家详细介绍了如何利用C#语言模拟QQ实现屏幕选择区域截图功能，文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
    2022-08-08

最新评论