在同一时间轴上对两个对象进行动画处理。相继。 WPF

Question

如何在同一时间线但以不同的时间间隔对两个对象的不透明度进行动画处理？

我期待这两个文本元素逐渐淡入，从一个文本框到另一个文本框。相反，文本看起来不同步，并且闪烁。

    <Window x:Class="Hello_world.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:Hello_world"
        mc:Ignorable="d"
        Title="Hello world with WPF" Height="450" Width="800">
    <Grid Background="Black">
        

        <TextBlock Name="primary_adverb" HorizontalAlignment="Left" Margin="184,161,0,0" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="Red">
            <TextBlock.Triggers>
                <EventTrigger RoutedEvent="TextBlock.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="primary_adverb"
                                Storyboard.TargetProperty="Opacity"                 
                                From="0" To="2" Duration="0:0:10" BeginTime="0:0:1"
                            />

                            

                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </TextBlock.Triggers>
        </TextBlock>
        
        <TextBlock Name="Noir_N" HorizontalAlignment="Left" Margin="184,217,0,0" TextWrapping="Wrap" Text="N" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke">
            <TextBlock.Triggers>
            <EventTrigger RoutedEvent="TextBlock.Loaded">
                <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="Noir_N"
                                Storyboard.TargetProperty="Opacity"                 
                                From="2" To="3" Duration="0:0:10" BeginTime="0:0:5"
                            />
                        </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </TextBlock.Triggers>           
        </TextBlock>
        <TextBlock Name="Noir_O" HorizontalAlignment="Left" Margin="319,217,0,0" TextWrapping="Wrap" Text="O" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke" Width="43"/>
        <TextBlock Name="Noir_I" HorizontalAlignment="Left" Margin="455,217,0,0" TextWrapping="Wrap" Text="I" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke" Width="42"/>
        <TextBlock Name="Noir_R" HorizontalAlignment="Left" Margin="616,217,0,0" TextWrapping="Wrap" Text="R" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Foreground="WhiteSmoke" Width="42"/>

    </Grid>
</Window>

Answer 1

您的代码存在一些问题：

1.将初始不透明度设置为 0

如果您想让某个项目淡入淡出，您需要将其设置为

Opacity="0"

才能启动。在你的例子中，你在淡入之前等待 1 秒，所以这就是它闪烁的季节。原始值是默认的

1

，然后将其设置为

0

淡入

1

（这是最大值）。

2.不透明度从 0 变为 1

在您的情况下，使用“N”文本，您从

2

淡入到

3

，这实际上是将其从

1

设置为

1

，本质上根本不褪色。不透明度是百分比，因此唯一有效的值是

0

到

1

，代表 0% 到 100% 不透明。

3. （可选）开始时间不一致

如果您希望它立即开始淡入，您应该设置

BeginTime="0:0:0"

。在下面的示例中，我认为一切都按照您想要的方式工作。不过，我确实加快了动画速度，只是因为我认为它看起来更流畅一些。

<TextBlock Name="primary_adverb" HorizontalAlignment="Left" Margin="184,161,0,0" TextWrapping="Wrap" Text="Hello world." VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Opacity="0" Foreground="Red">
    <TextBlock.Triggers>
        <EventTrigger RoutedEvent="TextBlock.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="primary_adverb" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:05" BeginTime="0:0:0" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </TextBlock.Triggers>
</TextBlock>

<TextBlock Name="Noir_N" HorizontalAlignment="Left" Margin="184,217,0,0" TextWrapping="Wrap" Text="N" VerticalAlignment="Top" FontSize="72" FontFamily="Source Code Pro Black" FontWeight="Bold" Opacity="0" Foreground="WhiteSmoke">
    <TextBlock.Triggers>
        <EventTrigger RoutedEvent="TextBlock.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimation Storyboard.TargetName="Noir_N" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:05" BeginTime="0:0:02" />
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </TextBlock.Triggers>
</TextBlock>