WPF以循环方式更改对象不透明度

Question

为了举例，假设我有美国队长的两个盾牌，如图所示。我正在旧的下面铺设新的形象。现在进行一些像按钮点击之类的互动，我想要一个动画效果

在我的图像中，中间部分像中间的星星是相同的，所以动画应该从那里开始，然后它应该产生像蓝色条纹变化然后银色然后蓝色。

我认为旧的图像会以圆形的方式失去其不透明度，因此它下面的盾牌应该展开。

Answer 1

根据我的理解，你有两张图片，一张放在另一张上面。然后，您希望顶部图像完全透明，从中心开始，然后展开到周边，直到整个顶部图像不再可见，底部图像显示出来。

为此，我建议您使用OpacityMask RadialGradientBrush作为OpacityMask。然后，我会根据here和here描述Offset元素的GradientStop属性设置动画。

以下是您如何实现这一目标的完整示例。我在这里使用ToggleButton只是为了给我一些东西来绑定。

<ToggleButton>
    <ToggleButton.Template>
        <ControlTemplate>
            <Grid Background="Transparent">

                <Image Source="Resources/ShieldTwo.png"/>

                <Image Source="Resources/ShieldOne.png">
                    <Image.OpacityMask>
                        <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                            <GradientStop Color="Transparent" Offset="0"/>
                            <GradientStop Color="Transparent" Offset="0.0"/>
                            <GradientStop Color="Black" Offset="0.0"/>
                            <GradientStop Color="Black" Offset="1"/>
                        </RadialGradientBrush>
                    </Image.OpacityMask>
                    <Image.Style>
                        <Style TargetType="Image">
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsChecked, RelativeSource={RelativeSource FindAncestor, AncestorType=ToggleButton}}" Value="true">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                                                 From="0"
                                                                 To="1"
                                                                 Duration="0:0:1"/>
                                                <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[2].(GradientStop.Offset)"
                                                                 From="0"
                                                                 To="1"
                                                                 Duration="0:0:1"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[1].(GradientStop.Offset)"
                                                                 From="1"
                                                                 To="0"
                                                                 Duration="0:0:1"/>
                                                <DoubleAnimation Storyboard.TargetProperty="OpacityMask.(RadialGradientBrush.GradientStops)[2].(GradientStop.Offset)"
                                                                 From="1"
                                                                 To="0"
                                                                 Duration="0:0:1"/>
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>

            </Grid>
        </ControlTemplate>
    </ToggleButton.Template>
</ToggleButton>

这就是最终产品的样子。图像并不完美排列，但你明白了。

如果您需要任何进一步的帮助，请与我们联系。