WPF_Storyboard实现文字消息弹窗动画

原创已于 2025-11-03 21:25:45 修改 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c#

于 2021-06-23 19:45:00 首次发布

WPF 专栏收录该内容

5 篇文章

订阅专栏

本文展示了如何在WPF应用中利用Storyboard实现文字消息弹窗的动画效果，包括XAML和C#代码的详细说明，帮助开发者创建带有动态点点效果的文本通知。

*.先上效果图(文本后面带有点点动画的效果)

xaml中相关代码如下：

<TextBlock x:Name="tBlockStatus" FontSize="12" HorizontalAlignment="Center" Foreground="#999999">
                    <TextBlock.Resources>
                        <Storyboard x:Key="TextWaitingStoryboard" RepeatBehavior="Forever" Duration="0:0:3.5">
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="waitText0">
                                <DiscreteColorKeyFrame KeyTime="0:0:1.0" Value="#999999"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="waitText1">
                                <DiscreteColorKeyFrame KeyTime="0:0:1.5" Value="#999999"/>
                            </ColorAnimationUsingKeyFrames>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="waitText2">
                                <DiscreteColorKeyFrame KeyTime="0:0:2.5" Value="#999999"/>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </TextBlock.Resources>
                     <Run>正在等待连接</Run>
                     <Run x:Name="waitText0" Foreground="#00999999">.</Run>
                     <Run x:Name="waitText1" Foreground="#00999999">.</Run>
                     <Run x:Name="waitText2" Foreground="#00999999">.</Run>
                </TextBlock>

cs中代码控制动画开始和停止：

    this.textWaitingStoryboard = (Storyboard)this.tBlockStatus.FindResource("TextWaitingStoryboard");

     this.textWaitingStoryboard.Begin(); //动画开始
     this.textWaitingStoryboard.Stop();  //动画停止

*.效果图如下：

xaml中代码如下：

 <Border Name="TipMessageBorder" Height="40" Margin="24,0" Background="#FFF2F0" BorderBrush="#FFCCC7" BorderThickness="1" CornerRadius="4" Visibility="Hidden">
                <Border.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform CenterX="100" CenterY="20"></ScaleTransform>
                    </TransformGroup>
                </Border.RenderTransform>
                <Border.Resources>
                    <Storyboard x:Key="TipMessageStoryboard">
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="Visibility">
                            <ObjectAnimationUsingKeyFrames.KeyFrames>
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                                <DiscreteObjectKeyFrame KeyTime="0:0:3">
                                    <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Hidden</Visibility>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames.KeyFrames>
                        </ObjectAnimationUsingKeyFrames>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.2" To="0.5" Duration="0:0:0.04"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.2" To="0.5" Duration="0:0:0.04"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.5" To="1" Duration="0:0:0.04" BeginTime="0:0:0.04"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="1" To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="1"  To="1.2" Duration="0:0:0.04" BeginTime="0:0:0.08" AutoReverse="True"/>

                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True" BeginTime="0:0:2.92"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="1" To="1.2" Duration="0:0:0.04"  AutoReverse="True" BeginTime="0:0:2.92"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:2.96"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="1" To="0.5" Duration="0:0:0.04" BeginTime="0:0:2.96"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleX" From="0.5" To="0.2" Duration="0:0:0.04" BeginTime="0:0:2.96"/>
                        <DoubleAnimation Storyboard.TargetName="TipMessageBorder" Storyboard.TargetProperty="RenderTransform.Children[0].ScaleY" From="0.5"  To="0.2" Duration="0:0:0.04" BeginTime="0:0:2.96"/>
                    </Storyboard>
                </Border.Resources>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/WeDou.PCClient;component/Resources/Image/failed.png" Stretch="None" Margin="10,0" />
                    <TextBlock Text="{Binding TipMessage}" VerticalAlignment="Center" FontSize="14" Foreground="#F76B69"/>
                </StackPanel>
            </Border>

cs代码如下：

  private Storyboard storyboard;


  this.storyboard =(Storyboard)this.TipMessageBorder.FindResource("TipMessageStoryboard");

  public void ShowTipMessage()
   {
      this.storyboard.Begin();
   }