WPF实现3D翻牌式倒计时特效
更新时间:2020年11月3日 15:19 点击:1961
本文实例为大家分享了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++; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
相关文章
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 这篇文章主要为大家详细介绍了用javascript实现倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-09
- 倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间。倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等。今天,我们来使用jQuery实现一个简单的倒计时功能。本文以团购网站的倒计时为...2015-10-21
- 在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下...2016-01-02
- 下面小编就为大家带来一篇单击按钮发送验证码,出现倒计时的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 代码...2017-07-06
- 这篇文章主要介绍了JS实现倒计时,精确到天数、时、分、秒,还为大家分享了parseInt() 函数的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-11-22
- 这篇文章主要介绍了jquery实现倒计时效果,根据设计一个游戏引出的倒计时功能,需要的朋友可以参考下...2015-12-16
- 这篇文章主要为大家详细介绍了uni-app使用countdown插件实现倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
- 这篇文章主要为大家详细介绍了JavaScript实现前端倒计时效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-09
- 这篇文章主要介绍了C#基于TimeSpan实现倒计时效果的方法,比较实用的功能,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟) 的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下...2016-08-24
- 本篇文章主要介绍了ionic+AngularJs实现获取验证码倒计时按钮,具有一定的参考价值,有兴趣的可以了解一下。...2017-04-27
- 本文给大家介绍了如何使用javascript实现倒计时跳转到其他页面的方法以及实现原理,非常的简单实用,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要为大家详细介绍了Swift实现倒计时5秒功能,在“登录”和“注册”页面也有相似功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-30
- 这篇文章主要介绍了C#中WPF使用多线程调用窗体组件的方法,涉及C#中多线程的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25