Создание анимации «стереть» в WPF

Question

Я ищу, чтобы создать анимацию, похожую на анимацию «стереть» в Microsoft PowerPoint, используя WPF.

Проще говоря, я хотел бы, чтобы изображение исчезало слева направо в течение 1 секунды.

Это XAML я до сих пор, что замирает изображение во всех сразу:

<Window x:Class="WpfApplication2.MainWindow" 
    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" 
    xmlns:local="clr-namespace:WpfApplication2" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525" Background="Purple" Loaded="Window_Loaded"> 
    <Window.Resources> 
     <Storyboard x:Key="fade"> 
      <DoubleAnimation From="0" To="1" Duration="0:0:1" 
          Storyboard.TargetName="logo" 
          Storyboard.TargetProperty="Opacity"/> 

     </Storyboard> 
    </Window.Resources> 
    <Grid> 
     <Image Source="image.png" x:Name="logo"/> 
    </Grid> 
</Window> 

В коде позади, я просто играть анимации, когда окно загружен:

private void Window_Loaded(object sender, RoutedEventArgs e) 
{ 
    BeginStoryboard((Storyboard)FindResource("fade")); 
} 

Что мне нужно добавить в тег Storyboard, чтобы сделать изображение затухающим, подобно анимации стирания в PowerPoint?

Answer 1

Нашел ответ сам от this сообщение в блоге. Код, который мне нужен для достижения нужного мне эффекта, идентичен коду в сообщении, но мне не нужно первое изображение. (UFO.jpg)

<Window x:Class="LearnWPF.WipeEffect.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="LearnWPF.WipeEffect" Height="500" Width="700" Name="mainWindow"> 
    <Grid> 
     <!--First image not needed.--> 
     <!--<Image Source="Images/UFO.jpg" />--> 
     <Image Source="Images/ladder.jpg"> 
     <Image.OpacityMask> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
       <GradientStop Offset="0" Color="Black" x:Name="BlackStop"/> 
       <GradientStop Offset="0" Color="Transparent" x:Name="TransparentStop"/> 
      </LinearGradientBrush> 
     </Image.OpacityMask> 
     </Image> 
    </Grid> 
    <Window.Triggers> 
    <EventTrigger RoutedEvent="Window.Loaded"> 
     <EventTrigger.Actions> 
     <BeginStoryboard> 
      <Storyboard> 
      <!--Duration changed to half a second as this is what I need. --> 
      <DoubleAnimation Storyboard.TargetName="TransparentStop" 
          Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5" /> 
      <DoubleAnimation Storyboard.TargetName="BlackStop" 
          Storyboard.TargetProperty="Offset" By="1" Duration="0:0:0.5" 
          BeginTime="0:0:0.05" /> 
      </Storyboard> 
     </BeginStoryboard> 
     </EventTrigger.Actions> 
    </EventTrigger> 
    </Window.Triggers> 
    </Window>