WPF实现3D翻牌式倒计时特效
作者:RunnerDNA 时间:2021-11-11 16:08:21
本文实例为大家分享了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++;
}
来源:https://blog.csdn.net/dnazhd/article/details/107102763
标签:WPF,翻牌,倒计时
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
JAVA如何调用Shell脚本
2022-11-25 01:13:13
java商城项目实战之购物车功能实现
2023-11-02 21:17:43
![](https://img.aspxhome.com/file/2023/0/63340_0s.jpg)
Java框架之Maven SSM集合
2022-04-05 16:22:54
![](https://img.aspxhome.com/file/2023/8/77988_0s.png)
C#中的延时函数sleep
2022-08-05 13:16:49
java开发之内部类的用法
2023-02-04 21:30:07
Spring AOP的概念与实现过程详解
2023-02-17 02:54:12
![](https://img.aspxhome.com/file/2023/4/85434_0s.png)
java创建多级目录文件的实例讲解
2023-11-27 09:29:02
IDEA 单元测试报错:Class not found:xxxx springboot的解决
2022-05-11 01:11:02
![](https://img.aspxhome.com/file/2023/3/69663_0s.png)
IDEA设置maven修改settings.xml配置文件无法加载仓库的解决方案
2023-08-23 22:39:35
![](https://img.aspxhome.com/file/2023/5/66235_0s.png)
Flutter 通过Clipper实现各种自定义形状的示例代码
2023-06-19 14:25:11
![](https://img.aspxhome.com/file/2023/7/59397_0s.jpg)
在Framework 4.0中:找出新增的方法与新增的类(一)
2021-07-07 05:26:07
![](https://img.aspxhome.com/file/2023/6/68626_0s.png)
使用JPA自定义VO类型转换(EntityUtils工具类)
2023-08-26 14:56:17
详解Java中switch的新特性
2023-11-24 23:41:54
![](https://img.aspxhome.com/file/2023/4/60154_0s.webp)
解决SpringBoot web项目启动后立即关闭的问题
2023-07-26 02:33:37
![](https://img.aspxhome.com/file/2023/9/64909_0s.png)
Java基于TCP方式的二进制文件传输
2023-06-04 18:23:52
![](https://img.aspxhome.com/file/2023/9/68219_0s.png)
java设计模式--原型模式详解
2023-11-25 05:08:24
![](https://img.aspxhome.com/file/2023/0/60190_0s.png)
解决springboot 启动找不到主类的问题
2023-06-13 04:58:56
![](https://img.aspxhome.com/file/2023/6/68766_0s.jpg)
说说在Spring中如何引用外部属性文件的方法
2023-09-18 21:47:25
![](https://img.aspxhome.com/file/2023/2/77152_0s.png)
Java实现文件读取和写入过程解析
2023-06-28 11:35:36
![](https://img.aspxhome.com/file/2023/1/57421_0s.png)
spring webflux自定义netty 参数解析
2023-07-26 18:38:25
![](https://img.aspxhome.com/file/2023/1/57811_0s.jpg)