RenderTransform 发生在 TextBlock 上的 EntranceThemeTransition 之后

Question

我将EntranceThemeTransition 动画应用到TextBlock。 TextBlock 的样式为 PageHeaderTextStyle，其中包含 RenderTransform。我遇到的问题是 RenderTransform 应用了 Translation 效果，直到动画播放完毕后才会真正呈现。所以，它看起来很奇怪，因为动画滚动控件，然后突然翻译将文本捕捉到位。有谁知道为什么会这样？

有没有办法在考虑翻译的情况下播放动画？

变换：

<Setter Property="RenderTransform">
    <Setter.Value>
        <TranslateTransform X="-2" Y="8"/>
    </Setter.Value>
</Setter>

文本块：

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}">
    <TextBlock.Transitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </TextBlock.Transitions>
</TextBlock>

Answer 1

我刚刚遇到了完全相同的问题。解决它的方法是嵌套将TextBlock 与Grid 相隔一层并对其进行转换，例如第二个Grid。

发生的情况是，过渡对其每个子级应用了变换，但在动画完成之前，它们可能拥有的任何变换都会被临时替换，从而导致在随后应用原始变换时出现令人讨厌的“捕捉”。

在以下示例中，将运行转换，替换TextBlock 的转换，然后在转换结束后应用原始转换。您会看到“快照”：

<Grid Style="{StaticResource LayoutRootStyle}">
    <TextBlock Text="Header" Style="{StaticResource PageHeaderTextStyle}"
        Margin="0,0,0,40"/>
</Grid>

在下一个示例中，转换运行并将转换应用于Grid，而TextBlock 的转换不受影响。没有“快照”：

<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid>
        <TextBlock Text="Header" Style="{StaticResource PageHeaderTextStyle}"
            Margin="0,0,0,40"/>
    </Grid>
</Grid>

希望这会有所帮助！

Answer 2

从您的话看来，EntranceThemeTransition 似乎为您的 TextBlock 的变换设置了动画。最简单的解决方法是将入口过渡放在父元素上，或者将变换放在一个父元素上。您可以简单地将您的 TextBlock 包装在 Grid 中。