WPF Change the object opacity in Circular way

Question

For the sake of example lets assume I have Captain America's two shields as displayed in image. I am laying new image underneath the old. Now upon some interaction like a button click, I want an animation effect

In my images the center part like the star in the middle is same, so animation should go from there, and then it should give effect like blue stripe change then silver then blue.

What I think would go is the older image, loses its opacity in a circular way so the shield underneath it should unfold.

@MikeEason Gif goes continuously, I want it to happen when some event occurs in my application and once it done it stays that way and wait for some other event to happen. — Manvinder, Oct 09 '16 at 09:42
Have a look at the [Glass Button](https://blogs.msdn.microsoft.com/mgrayson/2007/02/16/creating-a-glass-button-the-complete-tutorial/) tutorial. It implements a radial gradient "glow" using Blend. With this technique you should be able to [Create an opacity mask](https://msdn.microsoft.com/en-us/library/cc294816.aspx) and animate it. — Funk, Oct 09 '16 at 09:48
The one on the right should change its blue strip to red using circular effect — AnjumSKhan, Oct 09 '16 at 09:52

score 2 · Accepted Answer · edited May 23 '17 at 12:01

From my understanding, you have two images, one placed on top on the other. Then you want the top image to turn completely transparent, starting at the center and then spreading out to the perimeter until the entire top image is no longer visible and the bottom image shows through.

To do this, I would advise you use an OpacityMask with a RadialGradientBrush as the OpacityMask. I would then animate the Offset property of the GradientStop elements as described here and here.

Here's a full example of how you could achieve this. I've used a ToggleButton here just to give me something to bind to.

<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>

And here's what the final product would look like. The images aren't perfectly lined up, but you get the point.

Let me know if you need any further help.

Big Thanks, there were minor hiccups but you guide me well towards the solution — Manvinder, Oct 24 '16 at 07:40

WPF Change the object opacity in Circular way

1 Answers1