Nasıl yapılır: Bir Öğe veya Fırça Opaklığına Animasyon Ekleme

Bir çerçeve öğesinin görünümün içinde ve dışında soldurma yapmak için, özelliğine animasyon veya onu boyamak için kullanılan (veya fırçalar) özelliğine animasyon Opacity Opacity Brush sızabilirsiniz. Öğenin opaklığının animasyonu, öğenin alt öğenin görünüm içinde ve dışında soldurmalarına neden olur, ancak öğeyi boyamak için kullanılan fırça animasyonu, öğenin hangi kısmının soluk olduğu konusunda daha seçici hale getirebilirsiniz. Örneğin, bir düğmenin arka planını boyamak için kullanılan fırça opaklığı animasyonu kullanabilirsiniz. Bu, düğmenin arka planının soluk ve görünümden çıkmalarına ve metni tamamen opak şekilde bırakmalarına neden olur.

Not

öğesinin Opacity Brush animasyonu, bir öğenin özelliğine animasyonu ek Opacity olarak performans avantajları sağlar.

Aşağıdaki örnekte iki düğme, görünüm içinde ve dışında soluk olacak şekilde animasyonludur. birincinin opaklığı Button beş saniyeden 1.0 uzun 0.0 bir süreye animasyonlu hale Duration getiriliyor. İkinci düğme de animasyonlu ancak düz renklendirmek için kullanılan SolidColorBrush'ın Opaklığı, düğmenin tamamının opaklığı yerine Background animasyonlu hale getiri. Örnek çalıştırıldığında, ilk düğme görünüm içinde ve dışında tamamen belirirken, ikinci düğmenin yalnızca arka planı görünüm içinde ve dışında soldur. Metni ve kenarlıkları tamamen opak kalır.

Örnek

<!-- OpacityAnimationExample.xaml
     This example shows how to animate the opacity of objects, 
     making them fade in and out of view. -->
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Opacity Animation Example" Background="White">
  <StackPanel Margin="20">

    <!-- Clicking this button animates its opacity. -->
    <Button Name="opacityAnimatedButton">
      A Button
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="opacityAnimatedButton"
                Storyboard.TargetProperty="(Button.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  /> 
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

    <!-- Clicking this button animates the opacity of the brush
         used to paint its background. -->
    <Button>
      A Button
      <Button.Background>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Button.Background>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="(Brush.Opacity)" 
                From="1" To="0" Duration="0:0:5" AutoReverse="True"  />  
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>         
    </Button>
  </StackPanel>
</Page>

Kod bu örnekten atlanmıştır. Tam örnek ayrıca içinde bir opaklığı animasyonu nasıl Color LinearGradientBrush gösterir. Tam örnek için bkz. Öğe Örneğinin Opaklığına Animasyon Uygulama.