如何在WPF中为其下面的内容制作动画时,如何保持OpacityMask？

Question

我正在XAML中创建一个倒数计时器.

当计时器倒计时数字向下移动,前一个数字和下一个数字逐渐消失,并LinearGradientBrush应用于OpacityMask下面的示例中的a.

我使用以下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>

然而,LinearGradientBrush也移动,当我转移TranslateTransform了的TextBlock容器格.看起来好像计算了不透明度,然后应用了变换.

看起来似乎有点奇怪,它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>