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

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

1 голос
/ 06 февраля 2010

Вот мой 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 градусов по часовой стрелке)

Ответы [ 2 ]

1 голос
/ 06 февраля 2010

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

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

UPDATE

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

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

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

0 голосов
/ 03 августа 2016

Попробуйте это: 

<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>
...