代码之家 › 专栏 › 技术社区 › waghekapil

WPF文本块动画

wpf-animation textblock wpf

2

waghekapil · 技术社区 · 9 年前

我如何实现 THIS 动画类型?我对WPF很陌生。我试过了 DoubleAnimation 但未达到目标。

动画应该发生在我更新分数时,就像视频中的分数从17更新到23时一样。

1 回复 | 直到 6 年前

1

4

Igor Damiani 9 年前

试试这个。

<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>

尝试使用边距、持续时间等!:-)