WPF implements the animated Effect of gradual fade-in and fade-out.

WPF implements the animated Effect of gradual fade-in and fade-out.
1. Implementation Principle

1.1 Use the UIElement. OpacityMask attribute to change the opacity of the object area. It can make specific areas of elements transparent or partially transparent to achieve relatively new results.

1.2 The OpacityMask attribute accepts any paint brush. You can use the LinearGradientBrush linear gradient Paint Brush to animation each color point in the gradient paint brush.

2. Gradient fade-in implementation

The gradient fade-in effect can be implemented by triggering the Loaded event through the event trigger, so it can be implemented only in the front-end XAML language.

2.1 set the OpacityMask attribute of the object

<Grid.OpacityMask>    <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">        <GradientStop Color="#00000000" Offset="0"/>        <GradientStop Color="#00000000" Offset="1"/>        <GradientStop Color="#00000000" Offset="1"/>    </LinearGradientBrush></Grid.OpacityMask>

2.2 set object event triggers

<Grid.Triggers>    <EventTrigger RoutedEvent="Loaded">        <EventTrigger.Actions>            <BeginStoryboard>                <Storyboard>                    <DoubleAnimation From="1" To="0" Duration="0:0:1.5" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>                    <DoubleAnimation From="1" To="0" Duration="0:0:1" BeginTime="0:0:0.5" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>                    <ColorAnimation To="#FF000000" Duration="0" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>                </Storyboard>            </BeginStoryboard>        </EventTrigger.Actions>    </EventTrigger></Grid.Triggers>

3. Implement gradient fade-out

Gradient fade-out effect. Because event trigger events need to be triggered by routing events, you need to use backend code.

3.1 prepare the animation and painting resources for gradual fade-out

<Window.Resources>    <Storyboard x:Key="ClosedStoryboard" Storyboard.TargetName="LoginGrid">        <DoubleAnimation From="1" To="0" Duration="0:0:2" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[1].Offset"/>        <DoubleAnimation From="1" To="0" Duration="0:0:1.5" BeginTime="0:0:0.5"Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Offset"/>        <ColorAnimation To="#00000000" Duration="0" Storyboard.TargetProperty="OpacityMask.(GradientBrush.GradientStops)[2].Color"/>    </Storyboard>    <LinearGradientBrush x:Key="ClosedBrush" StartPoint="0.5,0" EndPoint="0.5,1">        <GradientStop Color="#FF000000" Offset="0"/>        <GradientStop Color="#FF000000" Offset="1"/>        <GradientStop Color="#FF000000" Offset="1"/>    </LinearGradientBrush></Window.Resources>

3.2 The backend is implemented through the Click Event of the BIND button.

private void btnCancel_Click(object sender, RoutedEventArgs e){    this.IsEnabled = false;    LoginGrid.OpacityMask = this.Resources["ClosedBrush"] as LinearGradientBrush;    Storyboard std = this.Resources["ClosedStoryboard"] as Storyboard;    std.Completed += delegate { this.Close(); };    std.Begin();}

4. Running Effect

4.1 as follows

 

You are welcome to reprint it, but please indicate the source: http://www.cnblogs.com/julyweb/. thank you!