用WPF实现计数振动动画效果

1、创建项目
创建窗体WPF项目CountDown
2、创建用户控件
创建用户控件CountDownControl
（1）、修改视图文件CountDownControl.xaml

<UserControl x:Class="CountDown.CountDownControl"
             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:CountDown"
             RenderTransformOrigin="0.5,0.5"
             Loaded="CountDownControl_Loaded"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.RenderTransform>
        <TransformGroup>
            <ScaleTransform x:Name="scale"></ScaleTransform>
        </TransformGroup>
    </UserControl.RenderTransform>
    <TextBlock x:Name="tb" Width="200" Height="200" Text="9" FontSize="200" TextAlignment="Center" FontWeight="Bold" FontFamily="FangSong" Foreground="Black"></TextBlock>
</UserControl>

（2）、修改逻辑文件CountDownControl.xaml.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace CountDown
{
    /// <summary>
    /// CountDownControl.xaml 的交互逻辑
    /// </summary>
    public partial class CountDownControl : UserControl
    {
        private Grid grid = null;
        private Window wm;
        private double left = 0;
        private double top = 0;
        private Storyboard storyboard = null;
        private string textValue = string.Empty;

        public CountDownControl(Grid _grid, Window _wm)
        {
            InitializeComponent();
            grid = _grid;
            wm = _wm;
            left = _wm.Left;
            top = _wm.Top;
        }

        public string TextValue
        {
            get { return textValue; }
            set { textValue = value;this.tb.Text = textValue; }
        }

        private void CountDownControl_Loaded(object sender,RoutedEventArgs e)
        {
            //创建动画对象实例
            storyboard = new Storyboard();
            //ScaleX缩放动画
            DoubleAnimation daX = new DoubleAnimation();
            daX.Duration = TimeSpan.FromSeconds(0.6);
            daX.From = 20;
            daX.To = 1;
            Storyboard.SetTarget(daX, this);
            Storyboard.SetTargetProperty(daX, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"));
            //ScaleY缩放动画
            DoubleAnimation daY = new DoubleAnimation();
            daY.Duration = TimeSpan.FromSeconds(0.6);
            daY.From = 20;
            daY.To = 1;
            Storyboard.SetTarget(daY, this);
            Storyboard.SetTargetProperty(daY, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"));
            //Opacity变换动画
            DoubleAnimation daO = new DoubleAnimation();
            daO.Duration = TimeSpan.FromSeconds(0.6);
            daO.From = 0;
            daO.To = 1;
            Storyboard.SetTarget(daO, this);
            Storyboard.SetTargetProperty(daO, new PropertyPath("(Opacity)"));
            storyboard.Children.Add(daX);
            storyboard.Children.Add(daY);
            storyboard.Children.Add(daO);
            //抖动效果
            DoubleAnimation daLeft1 = new DoubleAnimation();
            daLeft1.BeginTime = TimeSpan.FromSeconds(0.6);
            daLeft1.Duration = TimeSpan.FromSeconds(0.2);
            daLeft1.From = wm.Left;
            daLeft1.To = wm.Left - 10;
            daLeft1.EasingFunction = new BounceEase() { Bounces = 10, EasingMode = EasingMode.EaseInOut };
            Storyboard.SetTarget(daLeft1, wm);
            Storyboard.SetTargetProperty(daLeft1, new PropertyPath("(Left)"));
            DoubleAnimation daLeft2 = new DoubleAnimation();
            daLeft2.BeginTime = TimeSpan.FromSeconds(0.7);
            daLeft2.Duration = TimeSpan.FromSeconds(0.2);
            daLeft2.From = wm.Left;
            daLeft2.To = wm.Left + 10;
            daLeft2.EasingFunction = new BounceEase() { Bounces = 10, EasingMode = EasingMode.EaseInOut };
            Storyboard.SetTarget(daLeft2, wm);
            Storyboard.SetTargetProperty(daLeft2, new PropertyPath("(Left)"));

            DoubleAnimation daTop1 = new DoubleAnimation();
            daTop1.BeginTime = TimeSpan.FromSeconds(0.6);
            daTop1.Duration = TimeSpan.FromSeconds(0.2);
            daTop1.From = wm.Top;
            daTop1.To = wm.Top + 10; ;
            daTop1.EasingFunction = new BounceEase() { Bounces = 10, EasingMode = EasingMode.EaseInOut };
            Storyboard.SetTarget(daTop1, wm);
            Storyboard.SetTargetProperty(daTop1, new PropertyPath("(Top)"));

            DoubleAnimation daTop2 = new DoubleAnimation();
            daTop2.BeginTime = TimeSpan.FromSeconds(0.7);
            daTop2.Duration = TimeSpan.FromSeconds(0.2);
            daTop2.From = wm.Top;
            daTop2.To = wm.Top - 10;
            daTop2.EasingFunction = new BounceEase() { Bounces = 10, EasingMode = EasingMode.EaseInOut };
            Storyboard.SetTarget(daTop2, wm);
            Storyboard.SetTargetProperty(daTop2, new PropertyPath("(Top)"));
            storyboard.Children.Add(daLeft1);
            storyboard.Children.Add(daLeft2);
            storyboard.Children.Add(daTop1);
            storyboard.Children.Add(daTop2);
            storyboard.Completed += new EventHandler(sb_Completed);
            storyboard.Begin(this, true);
        }

        private void sb_Completed(object sender,EventArgs e)
        {
            //解除绑定 
            storyboard.Remove(this);
            storyboard.Children.Clear();
            grid.Children.Clear();
            //窗体恢复初始位置
            wm.Left = left;
            wm.Top = top;
        }

    }
}

3、在项目中引用控件
（1）、主窗体文件MainWindow.xaml

<Window x:Class="CountDown.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CountDown"
        mc:Ignorable="d"
        Title="MainWindow" x:Name="wm" WindowStartupLocation="CenterScreen" WindowState="Normal" WindowStyle="None" AllowsTransparency="True" Loaded="Window_Loaded" Background="Orange" Height="450" Width="800">
    <Grid x:Name="rootGrid">

    </Grid>
</Window>

（2）、主窗体逻辑MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace CountDown
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private int count = 10;
        private DispatcherTimer timer = null;

        private void Window_Loaded(object sender,RoutedEventArgs e)
        {
            timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromSeconds(1);
            timer.Tick += new EventHandler(timer_Tick);
            timer.Start();
        }

        private void timer_Tick(object sender, EventArgs e)
        {
            if (count == 0)
            {
                timer.Stop();
                count = 10;
                timer.Start();
            }
            else
            {
                CountDownControl txt = new CountDownControl(this.rootGrid, wm);
                txt.TextValue = count.ToString();
                txt.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
                txt.VerticalAlignment = System.Windows.VerticalAlignment.Center;
                this.rootGrid.Children.Add(txt);
                count--;
            }
        }
    }
}

3、显示效果