c# - 在 WPF 中为不透明蒙版下方的内容设置动画时，如何保持不透明蒙版静止不动？

Question

我正在 XAML 中创建倒数计时器。

随着计时器倒计时，数字向下移动，前一个数字和下一个数字随着应用到 OpacityMask 的 LinearGradientBrush 逐渐消失，如下例所示。

我已使用以下 XAML 来执行此操作...

<Grid>

    <Grid.OpacityMask>
        <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0" SpreadMethod="Pad" MappingMode="RelativeToBoundingBox">
            <GradientStop Offset="0.0" Color="Transparent" />
            <GradientStop Offset="0.5" Color="White" />
            <GradientStop Offset="1.0" Color="Transparent" />
        </LinearGradientBrush>
    </Grid.OpacityMask>

    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid.RenderTransform>
            <TranslateTransform Y="0" />
        </Grid.RenderTransform>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

        <!-- TextBlock definitions here --->

    </Grid>


</Grid>

但是，当我移动 TextBlock 容器网格的 TranslateTransform 时，LinearGradientBrush 也会移动。看起来好像计算了不透明度，然后应用了变换。

LinearGradientBrush 似乎与应用它的父级 Grid 的大小无关，这似乎也有点奇怪。相反，它似乎是相对于其可见内容应用的，即子 Grid。有没有办法覆盖它？

如何实现线性渐变下的动画效果？

编辑: 应该可以粘贴到 UserControl 中的完整代码。要进行测试，只需调整变换 Y 值 ...

<UserControl x:Class="MicroBugless.View.UserControls.CountdownWidget"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="Black">

        <Grid>
            <Grid.OpacityMask>
                <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0" SpreadMethod="Pad" MappingMode="RelativeToBoundingBox">
                    <GradientStop Offset="0.0" Color="Transparent" />
                    <GradientStop Offset="0.5" Color="White" />
                    <GradientStop Offset="1.0" Color="Transparent" />
                </LinearGradientBrush>
            </Grid.OpacityMask>

            <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid.RenderTransform>
                    <TranslateTransform Y="0" />
                </Grid.RenderTransform>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Grid.Row="0" Text="000" Foreground="White" />
                <TextBlock Grid.Row="1" Text="001" Foreground="White" />
                <TextBlock Grid.Row="2" Text="002" Foreground="White" />
                <TextBlock Grid.Row="3" Text="003" Foreground="White" />
            </Grid>

        </Grid>

    </Grid>
</UserControl>

Answer 1

好的，明白了。

OpacityMask 出于某种原因相对于可见内容应用。因此，翻译可见内容对 OpacityMask 没有影响。

您可以使父网格的背景稍微不透明，以确保“可见”内容根据需要定义为父网格的边界。

即

<Grid Background="#01000000">
    <Grid.OpacityMask>
         ...
    </Grid.OpacityMask>
    ...
    <!-- Child Grid with TranslateTransform here -->
    ...
</Grid>