Практическое руководство. Анимирование визуальных эффектов срезания

Обновлен: Ноябрь 2007

В этом примере демонстрируется анимация BevelBitmapEffect на кнопке.

Пример

В следующем примере показано, как анимировать свойства BevelWidth и LightAngle элемента BevelBitmapEffect. В результате, при наведении указателя мыши на Button, внутренний уровень скашивания увеличивается, в то время как искусственный источник света, используемый для скашивания, распределяется вокруг Button.

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" >

  <StackPanel>

    <Button Width="200" Height="80" Margin="50">
      MouseOver ME!
      <Button.BitmapEffect>

        <!-- This BitmapEffect is targeted by the animation. -->
        <BevelBitmapEffect x:Name="myBevelBitmapEffect" BevelWidth="0" EdgeProfile="CurvedIn"  />
      </Button.BitmapEffect>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.MouseEnter">
          <BeginStoryboard>
            <Storyboard>

              <!-- Animate the BevelWidth from 0 to 15. -->
              <DoubleAnimation
               Storyboard.TargetName="myBevelBitmapEffect"
               Storyboard.TargetProperty="BevelWidth"
               From="0" To="15" Duration="0:0:0.5" AutoReverse="True"
               />

              <!-- Animate the LightAngle so that the light source and 
                   corresponding bevel shadows move around the button. -->
              <DoubleAnimation
               Storyboard.TargetName="myBevelBitmapEffect"
               Storyboard.TargetProperty="LightAngle"
               From="360" To="0" Duration="0:0:0.5" AutoReverse="True"
               />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>

</Page>

Полный пример содержится в разделе Пример растровых эффектов.

См. также

Задачи

Практическое руководство. Создание визуального эффекта среза

Практическое руководство. Анимация нескольких визуальных эффектов

Пример растровых эффектов

Основные понятия

Общие сведения об эффектах для точечных рисунков

Другие ресурсы

Разделы руководства, посвященные эффектам для точечных рисунков

Примеры растровых эффектов