WPF实现遮罩动画

叫美工设计了一个动画：打印机打出A4纸的过程

使用WPF实现，预研了关键技术：遮罩+位置偏移动画

一开始的时候遮罩层使用Tile brush 添加一张使用PS做的上半部分透明的png图片，用起来很别扭，老是出问题，几经调试终于正确

但是发现使用Gradient brush子类LinearGradientBrush 添加一个渐变更具适应性：

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

以下代码实现效果：点击按钮，动画逐渐显示

贴出源代码：

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
 x:Class="AD.OfflineUI.wpf.UserControl1"
x:Name="UserControl">
<UserControl.Resources>
<Storyboard x:Key="OnPreviewMouseLeftButtonDown1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="-100">
<EasingDoubleKeyFrame.EasingFunction>
<SineEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<QuinticEase EasingMode="EaseOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown" SourceName="button">
<BeginStoryboard Storyboard="{StaticResource OnPreviewMouseLeftButtonDown1}"/>
</EventTrigger>
</UserControl.Triggers>
<UserControl.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.5"/>
<GradientStop Color="#FF000000" Offset="1"/>
</LinearGradientBrush>
</UserControl.OpacityMask>
<Grid x:Name="LayoutRoot" Background="AntiqueWhite" HorizontalAlignment="Left" VerticalAlignment="Top" Height="368">
<Image x:Name="image" Source="ADM脱机页面底部切图_Images/图层 36 副本.png" RenderTransformOrigin="0.5,0.5" Margin="0,178.328,0,104.922" d:LayoutOverrides="VerticalAlignment">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
  </Image>
<Button x:Name="button" Content="Button" HorizontalAlignment="Right" Height="41" VerticalAlignment="Bottom" Width="64"/>
</Grid>
</UserControl>