WPF实现倒计时转场动画效果
作者:驚鏵 发布时间:2023-01-10 11:46:23
标签:WPF,倒计时,动画
代码如下
一、创建 CountdownTimer.xaml 继承ContentControl代码如下。
using?System;
using?System.Linq;
using?System.Windows;
using?System.Windows.Controls;
using?System.Windows.Input;
using?System.Windows.Media;
using?System.Windows.Media.Animation;
using?System.Windows.Media.Effects;
namespace?WPFDevelopers.Controls
{
????public?enum?CountdownTimerEffect
????{
????????Default,
????????MultiColor
????}
????public?class?CountdownTimer?:?ContentControl
????{
????????private?Storyboard?storyboard;
????????private?const?double?seconds?=?800;
????????private?double?currentSeconds?=?seconds;
????????private?Grid?myGrid;
????????public?int?Number
????????{
????????????get?{?return?(int)GetValue(NumberProperty);?}
????????????set?{?SetValue(NumberProperty,?value);?}
????????}
????????public?static?readonly?DependencyProperty?NumberProperty?=
????????DependencyProperty.Register("Number",?typeof(int),?typeof(CountdownTimer),?new?PropertyMetadata(3));
????????///?<summary>
????????///?完成后回到开始
????????///?</summary>
????????public?bool?IsFinishStart
????????{
????????????get?{?return?(bool)GetValue(IsFinishStartProperty);?}
????????????set?{?SetValue(IsFinishStartProperty,?value);?}
????????}
????????public?static?readonly?DependencyProperty?IsFinishStartProperty?=
????????????DependencyProperty.Register("IsFinishStart",?typeof(bool),?typeof(CountdownTimer),?new?PropertyMetadata(false));
????????public?CountdownTimerEffect?CountdownTimerEffect
????????{
????????????get?{?return?(CountdownTimerEffect)GetValue(CountdownTimerEffectProperty);?}
????????????set?{?SetValue(CountdownTimerEffectProperty,?value);?}
????????}
????????public?static?readonly?DependencyProperty?CountdownTimerEffectProperty?=
????????????DependencyProperty.Register("ExhibitionEnum",?typeof(CountdownTimerEffect),?typeof(CountdownTimer),?new?PropertyMetadata(CountdownTimerEffect.Default));
????????public?override?void?OnApplyTemplate()
????????{
????????????base.OnApplyTemplate();
????????????NameScope.SetNameScope(this,?new?NameScope());
????????????if?(FontSize?==?SystemFonts.CaptionFontSize)
????????????????FontSize?=?200;
????????????FontFamily?=?DrawingContextHelper.FontFamily;
????????????storyboard?=?new?Storyboard();
????????????myGrid?=?new?Grid();
????????????myGrid.Name?=?"myGrid";
????????????myGrid.ToolTip?=?"MouseDown";
????????????myGrid.Background?=?new?SolidColorBrush(Colors.White);
????????????var?linearGradient?=?new?LinearGradientBrush
????????????{
????????????????GradientStops?=?new?GradientStopCollection
????????????????{
???????????????????new?GradientStop{?Color?=?Colors.Red,?Offset?=?1?},
???????????????????new?GradientStop{?Color?=?Colors.White,?Offset?=?1?},
???????????????????new?GradientStop{?Color?=?Colors.White,?Offset?=?.5?},
???????????????????new?GradientStop{?Color?=?Colors.Red,?Offset?=?.5?},
???????????????????new?GradientStop{?Color?=?Colors.Red,?Offset?=?0?},
???????????????????new?GradientStop{?Color?=?Colors.White,?Offset?=?0?},
????????????????},
????????????????StartPoint?=?new?Point(0.5,?0),
????????????????EndPoint?=?new?Point(10,?10),
????????????????SpreadMethod?=?GradientSpreadMethod.Reflect,
????????????????MappingMode?=?BrushMappingMode.Absolute
????????????};
????????????SolidColorBrush?solidColor;
????????????this.RegisterName(myGrid.Name,?myGrid);
????????????var?num?=?0;
????????????for?(int?i?=?Number;?i?>=?num;?i--)
????????????{
????????????????var?textBlock?=?new?TextBlock();
????????????????switch?(CountdownTimerEffect)
????????????????{
????????????????????case?CountdownTimerEffect.Default:
????????????????????????if?(i?%?2?==?0)
????????????????????????????solidColor?=?Brushes.White;
????????????????????????else
????????????????????????????solidColor?=?Brushes.Black;
????????????????????????textBlock.Foreground?=?solidColor;
????????????????????????break;
????????????????????case?CountdownTimerEffect.MultiColor:
????????????????????????textBlock.Foreground?=?linearGradient;
????????????????????????break;
????????????????}
????????????????textBlock.Text?=?i.ToString();
????????????????textBlock.Name?=?$"textBlock{i}";
????????????????textBlock.FontSize?=?FontSize;
????????????????textBlock.FontWeight?=?FontWeights.ExtraBold;
????????????????textBlock.VerticalAlignment?=?VerticalAlignment.Center;
????????????????textBlock.HorizontalAlignment?=?HorizontalAlignment.Center;
????????????????textBlock.RenderTransformOrigin?=?new?Point(.5,?.5);
????????????????textBlock.Effect?=?new?DropShadowEffect
????????????????{
????????????????????ShadowDepth?=?2,
????????????????????RenderingBias?=?RenderingBias.Performance,
????????????????????Color?=?Colors.Red
????????????????};
????????????????if?(!i.Equals(Number))
????????????????????textBlock.Opacity?=?0;
????????????????textBlock.RenderTransform?=?new?ScaleTransform
????????????????{
????????????????????ScaleX?=?2,
????????????????????ScaleY?=?2,
????????????????};
????????????????this.RegisterName(textBlock.Name,?textBlock);
????????????????TimeSpan?beginTime?=?TimeSpan.Zero;
????????????????if?(storyboard.Children.Count?>?0)
????????????????{
????????????????????beginTime?=?TimeSpan.FromMilliseconds(currentSeconds);
????????????????????currentSeconds?+=?seconds;
????????????????}
????????????????var?cubicEase?=?new?CubicEase
????????????????{
????????????????????EasingMode?=?EasingMode.EaseIn,
????????????????};
????????????????DoubleAnimation?doubleAnimationScaleX?=?new?DoubleAnimation();
????????????????doubleAnimationScaleX.From?=?2;
????????????????doubleAnimationScaleX.To?=?0;
????????????????doubleAnimationScaleX.EasingFunction?=?cubicEase;
????????????????Storyboard.SetTargetName(doubleAnimationScaleX,?textBlock.Name);
????????????????Storyboard.SetTargetProperty(doubleAnimationScaleX,?new?PropertyPath("(TextBlock.RenderTransform).(ScaleTransform.ScaleX)"));
????????????????var?doubleAnimationScaleY?=?new?DoubleAnimation
????????????????{
????????????????????From?=?2,
????????????????????To?=?0,
????????????????????EasingFunction?=?cubicEase
????????????????};
????????????????Storyboard.SetTargetName(doubleAnimationScaleY,?textBlock.Name);
????????????????Storyboard.SetTargetProperty(doubleAnimationScaleY,?new?PropertyPath("(TextBlock.RenderTransform).(ScaleTransform.ScaleY)"));
????????????????doubleAnimationScaleX.BeginTime?=?beginTime;
????????????????doubleAnimationScaleY.BeginTime?=?beginTime;
????????????????doubleAnimationScaleX.Duration?=?TimeSpan.FromMilliseconds(seconds);
????????????????doubleAnimationScaleY.Duration?=?TimeSpan.FromMilliseconds(seconds);
????????????????if?(!i.Equals(Number))
????????????????{
????????????????????var?doubleAnimationOpacity?=?new?DoubleAnimation
????????????????????{
????????????????????????Duration?=?TimeSpan.FromMilliseconds(0),
????????????????????????BeginTime?=?beginTime,
????????????????????????From?=?0,
????????????????????????To?=?1
????????????????????};
????????????????????Storyboard.SetTargetName(doubleAnimationOpacity,?textBlock.Name);
????????????????????Storyboard.SetTargetProperty(doubleAnimationOpacity,?new?PropertyPath(TextBlock.OpacityProperty));
????????????????????storyboard.Children.Add(doubleAnimationOpacity);
????????????????}
????????????????if?(i?%?2?==?0)
????????????????{
????????????????????var?colorAnimation?=?new?ColorAnimation
????????????????????{
????????????????????????Duration?=?TimeSpan.FromMilliseconds(0),
????????????????????????From?=?Colors.White,
????????????????????????BeginTime?=?beginTime,
????????????????????????To?=?Colors.Black
????????????????????};
????????????????????Storyboard.SetTargetName(colorAnimation,?myGrid.Name);
????????????????????Storyboard.SetTargetProperty(colorAnimation,?new?PropertyPath("(Panel.Background).(SolidColorBrush.Color)"));
????????????????????storyboard.Children.Add(colorAnimation);
????????????????}
????????????????else
????????????????{
????????????????????if?(!i.Equals(Number))
????????????????????{
????????????????????????var?colorAnimation?=?new?ColorAnimation
????????????????????????{
????????????????????????????Duration?=?TimeSpan.FromMilliseconds(0),
????????????????????????????BeginTime?=?beginTime,
????????????????????????????From?=?Colors.Black,
????????????????????????????To?=?Colors.White
????????????????????????};
????????????????????????Storyboard.SetTargetName(colorAnimation,?myGrid.Name);
????????????????????????Storyboard.SetTargetProperty(colorAnimation,?new?PropertyPath("(Panel.Background).(SolidColorBrush.Color)"));
????????????????????????storyboard.Children.Add(colorAnimation);
????????????????????}
????????????????}
????????????????storyboard.Children.Add(doubleAnimationScaleX);
????????????????storyboard.Children.Add(doubleAnimationScaleY);
????????????????myGrid.Children.Add(textBlock);
????????????}
????????????this.Content?=?myGrid;
????????}
????????protected?override?void?OnMouseDown(MouseButtonEventArgs?e)
????????{
????????????base.OnMouseDown(e);
????????????if?(storyboard?!=?null?&&?storyboard.Children.Count?>?0)
????????????{
????????????????storyboard.Completed?+=?(s,?y)?=>
????????????????{
????????????????????myGrid.Background?=?new?SolidColorBrush(Colors.White);
????????????????????if?(IsFinishStart)
????????????????????{
????????????????????????var?scaleTransform?=?new?ScaleTransform
????????????????????????{
????????????????????????????ScaleX?=?2,
????????????????????????????ScaleY?=?2
????????????????????????};
????????????????????????var?tb?=?myGrid.Children.Cast<TextBlock>().First();
????????????????????????tb.RenderTransform?=?scaleTransform;
????????????????????}
????????????????};
????????????????storyboard.Begin(this);
????????????}
????????}
????}
}
二、CountdownTimerExample.xaml 代码如下
<UserControl?x:Class="WPFDevelopers.Samples.ExampleViews.CountdownTimerExample"
?????????????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:WPFDevelopers.Samples.ExampleViews"
?????????????xmlns:wpfdev="https://github.com/yanjinhuagood/WPFDevelopers"
?????????????mc:Ignorable="d"?
?????????????d:DesignHeight="450"?d:DesignWidth="800">
???
????<Grid?Margin="10"?Grid.Row="1">
????????<Grid.RowDefinitions>
????????????<RowDefinition?Height="Auto"/>
????????????<RowDefinition?Height="*"/>
????????</Grid.RowDefinitions>
????????<Border?Margin="0,0,0,0"?Background="{StaticResource?WhiteSolidColorBrush}"?CornerRadius="4,4,0,0"?
????????????????????Effect="{StaticResource?NormalShadowDepth}">
????????????<wpfdev:NavigateMenu?TabStripPlacement="Top"?SelectionChanged="NavigateMenu_SelectionChanged">
????????????????<ListBoxItem?Content="Default"/>
????????????????<ListBoxItem?Content="MultiColor"/>
????????????</wpfdev:NavigateMenu>
????????</Border>
????????<Border?Grid.Row="1"?Background="{StaticResource?WhiteSolidColorBrush}"?CornerRadius="0,0,4,4"
????????????????????Effect="{StaticResource?NormalShadowDepth}">
????????????<Grid?Margin="10">
????????????????<wpfdev:CountdownTimer?Number="3"?x:Name="CountdownTimer1"/>
????????????????<UniformGrid?Columns="4"?Visibility="Collapsed"?x:Name="CountdownTimerGroup">
????????????????????<wpfdev:CountdownTimer?Number="9"?CountdownTimerEffect="MultiColor"?FontSize="150"?IsFinishStart="True"/>
????????????????????<wpfdev:CountdownTimer?Number="5"?CountdownTimerEffect="MultiColor"?FontSize="150"?IsFinishStart="True"/>
????????????????????<wpfdev:CountdownTimer?Number="2"?CountdownTimerEffect="MultiColor"?FontSize="150"?IsFinishStart="True"/>
????????????????????<wpfdev:CountdownTimer?Number="7"?CountdownTimerEffect="MultiColor"?FontSize="150"?IsFinishStart="True"/>
????????????????</UniformGrid>
????????????</Grid>
????????</Border>
????</Grid>
</UserControl>
三、CountdownTimerExample.xaml.cs 代码如下
using?System.Windows;
using?System.Windows.Controls;
namespace?WPFDevelopers.Samples.ExampleViews
{
????///?<summary>
????///?CountdownTimerExample.xaml?的交互逻辑
????///?</summary>
????public?partial?class?CountdownTimerExample?:?UserControl
????{
????????public?CountdownTimerExample()
????????{
????????????InitializeComponent();
????????}
????????private?void?NavigateMenu_SelectionChanged(object?sender,?SelectionChangedEventArgs?e)
????????{
????????????var?item?=?e.AddedItems[0]?as?ListBoxItem;
????????????if?(item?==?null)?return;
????????????switch?(item.Content.ToString())
????????????{
????????????????case?"Default":
????????????????????if(CountdownTimer1.Visibility?!=?Visibility.Visible)
????????????????????{
????????????????????????CountdownTimer1.Visibility?=?Visibility.Visible;
????????????????????????CountdownTimerGroup.Visibility?=?Visibility.Collapsed;
????????????????????}
????????????????????break;
????????????????case?"MultiColor":
????????????????????if?(CountdownTimerGroup.Visibility?!=?Visibility.Visible)
????????????????????{
????????????????????????CountdownTimerGroup.Visibility?=?Visibility.Visible;
????????????????????????CountdownTimer1.Visibility?=?Visibility.Collapsed;
????????????????????}
????????????????????break;
????????????}
????????}
????}
}
效果预览
来源:https://mp.weixin.qq.com/s/Bqag_XOpY-V0OFrlXxft3Q


猜你喜欢
- Java平台的垃圾收集机制显著提高了开发者的效率,但是一个实现糟糕的垃圾收集器可能过多地消耗应用程序的资源。在Java虚拟机性能优化系列的第
- Redis不仅可作为缓存服务器,还可以用作消息队列。它的列表类型天生支持用作消息队列。如下图所示:由于Redis的列表是使用双向链表实现的,
- 1. 什么是 spring-boot-devtoolsspring-boot-devtools 是 spring-boot项目开发时的一个热
- Springboot 实体类生成数据库表JPA:springboot -jpa:数据库的一系列的定义数据持久化的标准的体系学习的目的是:利用
- 本文实例讲述了Android基于AlarmManager实现用户在线心跳功能。分享给大家供大家参考,具体如下:在做即时通信或者其他检测是否在
- 本文实例为大家分享了java实现双人五子棋游戏的具体代码,供大家参考,具体内容如下通过 上下左右 控制棋盘走动 空格落子 &nb
- 一、首先在Application的onCreate中写:// GeneralAppliction.javapublic static IWX
- java 单例模式的实例详解概念: java中单例模式是一种常见的设计模式,单例模式分三种:懒汉式单例、饿汉式单例、登记式单例三
- 我们经常会希望在程序中写入一些配置信息,例如版本号,以及数据库的连接字符串等。你可能知道在WinForm应用程序中可以利用Propertie
- 代码如下:import java.io.BufferedReader;import java.io.DataOutputStream;imp
- (Memory Leak,内存泄漏)为什么会产生内存泄漏?当一个对象已经不需要再使用本该被回收时,另外一个正在使用的对象持有它的引用从而导致
- 挂起和恢复线程 Thread 的API中包含两个被淘汰的方法,它们用于临时挂起和重启某个线程,这些方法已
- 本文实例讲述了Android编程实现实时监听EditText文本输入的方法。分享给大家供大家参考,具体如下:平时在做Android开发过程中
- 本文结合之前的动态创建fragment来进行一个实践,来实现用Fragment创建一个选项卡项目布局<LinearLayout xml
- ⛳️ 基本类型做形式参数(零散参数的数据接收)1、基本数据类型要求前台页面的表单输入框的name属性值与对应控制器方法中的形式参数名称与类型
- 一: Environment.StackTrace可能我们看到最多的就是catch中的e参数,里面会有一个StackTrace,然后不可否认
- Java中常用关键字:与数据类型相关(10)与流程控制相关(13)if: 表示条件判断,一般用法if(关系表达式),后跟else或
- ZooKeeper 是一个典型的分布式数据一致性解决方案,分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/订阅、负载均衡、分布
- 前言不知道大家对const和readonly这两个关键字的区别有什么了解,原来自己之前还真不清楚它们到底是怎么回事,那么如果你也不是很清楚的
- 前序(先序)遍历中序遍历后续遍历层序遍历如图二叉树:二叉树结点结构public class TreeNode { int val