Плавный переход от изображения к изображению

Question

Вот моя XAML:

<Setter Property="Template"> 
    <Setter.Value> 
    <ControlTemplate> 
     <Image x:Name="Expander_Normal" 
      Source="/Images/arrow-e.tiff" Width="13" Height="13" /> 
     <ControlTemplate.Triggers> 
     <Trigger Property="ToggleButton.IsChecked" Value="True"> 
      <Setter x:Name="Expander_Expanded" 
        TargetName="Expander_Normal" Property="Source" 
        Value="/Images/arrow-s.tiff" /> 
     </Trigger> 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 
    </Setter.Value> 
</Setter> 

Переход от изображения к другому изображению очень грубо, и я не очень нравится. Итак, как я могу сделать переход гладким.
UPDATE:
Возможно, вместо того, чтобы менять изображение, возможно, ВОСПРОИЗВЕДЕНИЕ изображения. Основное изображение выглядит как>. Поэтому, возможно, повернуть его вниз (на 90 градусов по часовой стрелке)

Answer 1

Если вы хотите идти фантазии, вы можете:

1. Добавить раскадровку
2. Используйте двойную анимацию на непрозрачности исчезать из окна изображения
3. Изменить изображение
4. Используйте другую двойную анимацию исчезать в окне изображения

---

UPDATE

Чтобы повернуть изображение:

1. Добавить вращаются преобразовать в изображение
2. Использование двойной анимации на преобразование поворота-х угол свойству

См http://www.vbforums.com/showthread.php?t=555120 для примера

Answer 2

Попробуйте следующее:

<Grid> 
    <Image Source="Image1.png" 
      Height="100" Width="100"> 
     <Image.Triggers> 
      <EventTrigger RoutedEvent="MouseEnter"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          BeginTime="0:0:0" 
          Duration="0:0:0.5" 
          From="1" 
          To="0" 
          Storyboard.TargetProperty="(Image.Opacity)" 
          /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="MouseLeave"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          BeginTime="0:0:0" 
          Duration="0:0:0.8" 
          From="0" 
          To="1" 
          Storyboard.TargetProperty="(Image.Opacity)"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Image.Triggers> 
    </Image> 
    <Image Source="Image2.png" 
      Height="100" Width="100" Opacity="0"> 
     <Image.Triggers> 
      <EventTrigger RoutedEvent="MouseEnter"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          BeginTime="0:0:0" 
          Duration="0:0:0.5" 
          From="0" 
          To="1" 
          Storyboard.TargetProperty="(Image.Opacity)" 
          /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      <EventTrigger RoutedEvent="MouseLeave"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation 
          BeginTime="0:0:0" 
          Duration="0:0:0.8" 
          From="1" 
          To="0" 
          Storyboard.TargetProperty="(Image.Opacity)"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Image.Triggers> 
    </Image> 
</Grid>