Partilhar via


Como: Animar a Cor e Opacidade de um SolidColorBrush

Este exemplo mostra como animar o Color e Opacity de um SolidColorBrush.

Exemplo

O seguinte exemplo usa três animações para animar o Color e Opacity de um SolidColorBrush.

  • A primeira animação, um ColorAnimation, modifica a cor da pincelada para Gray quando o mouse entra no retângulo.

  • A próxima animação, outro ColorAnimation, modifica a cor da pincelada para Orange quando o mouse sai do retângulo.

  • A animação final, um DoubleAnimation, modifica a opacidade da pincelada para 0,0 quado o botão esquerdo do mouse é pressionado.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Input;

namespace Microsoft.Samples.Animation
{
    /// <summary>
    /// This example shows how to animate the Opacity and Color 
    /// properties of a SolidColorBrush.
    /// </summary>
    public class SolidColorBrushExample : Page
    {

        public SolidColorBrushExample()
        {
            Title = "SolidColorBrush Animation Example";
            Background = Brushes.White;

            // Create a NameScope for the page so
            // that Storyboards can be used.
            NameScope.SetNameScope(this, new NameScope());

            // Create a Rectangle.
            Rectangle aRectangle = new Rectangle();
            aRectangle.Width = 100;
            aRectangle.Height = 100;

            // Create a SolidColorBrush to paint
            // the rectangle's fill. The Opacity
            // and Color properties of the brush
            // will be animated.
            SolidColorBrush myAnimatedBrush = new SolidColorBrush();
            myAnimatedBrush.Color = Colors.Orange;
            aRectangle.Fill = myAnimatedBrush;

            // Register the brush's name with the page
            // so that it can be targeted by storyboards.
            this.RegisterName("MyAnimatedBrush", myAnimatedBrush);

            //
            // Animate the brush's color to gray when
            // the mouse enters the rectangle.
            //
            ColorAnimation mouseEnterColorAnimation = new ColorAnimation();
            mouseEnterColorAnimation.To = Colors.Gray;
            mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1);
            Storyboard.SetTargetName(mouseEnterColorAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(
                mouseEnterColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard mouseEnterStoryboard = new Storyboard();
            mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation);
            aRectangle.MouseEnter += delegate(object sender, MouseEventArgs e)
            {
                mouseEnterStoryboard.Begin(this);
            };

            //
            // Animate the brush's color to orange when
            // the mouse leaves the rectangle.
            //
            ColorAnimation mouseLeaveColorAnimation = new ColorAnimation();
            mouseLeaveColorAnimation.To = Colors.Orange;
            mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1);
            Storyboard.SetTargetName(mouseLeaveColorAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(
                mouseLeaveColorAnimation, new PropertyPath(SolidColorBrush.ColorProperty));
            Storyboard mouseLeaveStoryboard = new Storyboard();
            mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation);
            aRectangle.MouseLeave += delegate(object sender, MouseEventArgs e)
            {
                mouseLeaveStoryboard.Begin(this);
            };

            //
            // Animate the brush's opacity to 0 and back when
            // the left mouse button is pressed over the rectangle.
            //
            DoubleAnimation opacityAnimation = new DoubleAnimation();
            opacityAnimation.To = 0.0;
            opacityAnimation.Duration = TimeSpan.FromSeconds(0.5);
            opacityAnimation.AutoReverse = true;
            Storyboard.SetTargetName(opacityAnimation, "MyAnimatedBrush");
            Storyboard.SetTargetProperty(
                opacityAnimation, new PropertyPath(SolidColorBrush.OpacityProperty));
            Storyboard mouseLeftButtonDownStoryboard = new Storyboard();
            mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation);
            aRectangle.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
            {
                mouseLeftButtonDownStoryboard.Begin(this);
            };

            StackPanel mainPanel = new StackPanel();
            mainPanel.Margin = new Thickness(20);
            mainPanel.Children.Add(aRectangle);
            Content = mainPanel;
        }

    }
}
<!-- SolidColorBrushExample.xaml
     This example shows how to animate the Opacity and Color 
     properties of a SolidColorBrush.-->
<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="SolidColorBrush Animation Example"
  Background="White">
  <StackPanel Margin="20">

    <!-- The Opacity and Color of the SolidColorBrush 
         used to fill this rectangle is animated. -->
    <Rectangle Width="100" Height="100">
      <Rectangle.Fill>
        <SolidColorBrush x:Name="MyAnimatedBrush" Color="Orange" />
      </Rectangle.Fill>
      <Rectangle.Triggers>

        <!-- Animates the brush's color to gray
             When the mouse enters the rectangle. -->
        <EventTrigger RoutedEvent="Rectangle.MouseEnter">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="Color"
                To="Gray" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>

        <!-- Animates the brush's color to orange
             when the mouse leaves the rectangle. -->
        <EventTrigger RoutedEvent="Rectangle.MouseLeave">
          <BeginStoryboard>
            <Storyboard>
              <ColorAnimation
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="Color"
                To="Orange" Duration="0:0:1" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>    

        <!-- Animates the brush's opacity when the
             left mouse button is pressed over the rectangle. -->
        <EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyAnimatedBrush"
                Storyboard.TargetProperty="Opacity"
                To="0.0" Duration="0:0:0.5" AutoReverse="True" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>        
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>

Para um exemplo mais completo, que mostra como animar tipos diferentes de pinceladas, consulte Exemplo de pincéis. Para mais informações sobre animação, veja Revisão de Animação.

Para consistência com outros exemplos de animação, as versões de código deste exemplo usam um objeto Storyboard para aplicar suas animações. Entretanto, quando aplicando uma única animação no código, é mais simples usar o método BeginAnimation ao invés de usar um Storyboard. Para um exemplo, consulte Como: Animar uma Propriedade Sem Usar um Storyboard.

Consulte também

Tarefas

Exemplo de pincéis

Conceitos

Revisão de Animação

Visão geral sobre Storyboards