CODEWITHSUNDEEP
wpfanimationstoryboard
Manvinder
Manvinder

Reputation: 4587

WPF Change the object opacity in Circular way

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

enter image description here

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.

Upvotes: 0

Views: 893

Answers (1)

Simon
Simon

Reputation: 326

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.

enter image description here

Let me know if you need any further help.

Upvotes: 2

Related Questions