xaml - RenderTransform 在 TextBlock 上的 EntranceThemeTransition 之后发生

Question

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

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

转换:

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

文本 block :

<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 一层，上面有过渡，例如第二个 网格。

发生的事情是过渡对其每个子级应用一个变换，但是它们可能拥有的任何变换都被临时替换，直到动画完成之后，导致在之后应用原始变换时出现令人讨厌的“快照”。

在下面的示例中，将运行转换，替换 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>

希望这对您有所帮助!