WPF实现倒计时转场动画效果
更新时间：2022年08月02日 17:19:04 作者：驚鏵
这篇文章主要介绍了如何利用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;
}
}
}
}效果预览
到此这篇关于WPF实现倒计时转场动画效果的文章就介绍到这了,更多相关WPF倒计时动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了C#实现截图软件功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在写C#TCP通信程序时,发送数据时,只能发送byte数组,处理起来比较麻烦不说,如果是和VC6.0等写的程序通信的话,很多的都是传送结构体,在VC6.0中可以很方便的把一个char[]数组转换为一个结构体,而在C#却不能直接把byte数组转换为结构体，要在C#中发送结构体,应该怎么做呢？2017-11-11
提取HTML代码中文字的C#函数...2007-03-03
c#实现ini文件读写类分享，大家参考使用吧2013-12-12
本文详细讲解了C#数据类型转换(显式转型、隐式转型、强制转型)，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
本文针对不同阶段、不同程度的C#学习者，介绍了C# Hello World的17种不同写法，C# Hello World写法入门、C# Hello World写法进阶、C# Hello World的特别写法三种角度进行推进2013-12-12
这篇文章主要介绍了C#中获取程序路径的几种方法及其区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了C#使用webbrowser的常见用法,涉及C#使用webbrowser实现判断网络连接、模拟登陆、点击等常用技巧,需要的朋友可以参考下2015-08-08
有朋友问我，C#中C#语句先后顺序影响程序的结果吗？告诉大家，答案是肯定的，绝对影响程序的结果，所以在程序中一定要注意C#语句的顺序2015-10-10
这篇文章主要介绍了C#动态加载dll扩展系统功能的方法,涉及C#动态加载dll扩展的相关技巧,需要的朋友可以参考下2015-04-04
最新评论