wpftextblockwpf-animation

WPF textblock animation


How can I achieve THIS type of animation? I'm very new to WPF. I tried with DoubleAnimation in WPF but not achieved the target.

Animation should be happen when I update the score like in video it's happening when score is updating from 17 to 23.


Solution

  • Try this.

    <Window x:Class="WpfApplication1.AnimWindow"
        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:WpfApplication1"
        mc:Ignorable="d"
        Title="AnimWindow" Height="300" Width="300">
    
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="PointsNew" To="1.0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" />
                    <DoubleAnimation Storyboard.TargetName="PointsOld" To="0.0" Storyboard.TargetProperty="Opacity" Duration="0:0:0.5" />
                    <ThicknessAnimation Storyboard.TargetName="PointsNew" From="0 -32 0 0" To="0 0 0 0" Storyboard.TargetProperty="Margin" Duration="0:0:0.5" />
                    <ThicknessAnimation Storyboard.TargetName="PointsOld" To="0 32 0 0" Storyboard.TargetProperty="Margin" Duration="0:0:0.5" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    
    <Grid>
        <Border HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0.0" x:Name="PointsNew">
            <TextBlock Text="23" FontSize="96" FontWeight="Bold" />
        </Border>
        <Border HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="1.0" x:Name="PointsOld">
            <TextBlock Text="17" FontSize="96" FontWeight="Bold" />
        </Border>
    </Grid></Window>
    

    Try to play with margin, duration, and so on! :-)