다음을 통해 공유


방법: 3D 시각 효과에 애니메이션 효과 주기

업데이트: 2007년 11월

이 예제에서는 단추의 BevelBitmapEffect에 애니메이션 효과를 주는 방법을 보여 줍니다.

예제

다음 예제에서는 BevelBitmapEffectBevelWidthLightAngle 속성에 애니메이션 효과를 주는 방법을 보여 줍니다. 그 결과 마우스 포인터를 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>

전체 샘플을 보려면 비트맵 효과 갤러리 샘플을 참조하십시오.

참고 항목

작업

방법: 3D 시각 효과 만들기

방법: 여러 시각 효과에 애니메이션 적용

비트맵 효과 갤러리 샘플

개념

비트맵 효과 개요

기타 리소스

비트맵 효과 방법 항목

비트맵 효과 샘플