방법: SolidColorBrush의 색 또는 불투명도에 애니메이션 효과 적용

  • 아티클

이 예제에서는 SolidColorBrush의 Color 및 Opacity에 애니메이션 효과를 주는 방법을 보여줍니다.

예제

다음 예제에서는 세 개의 애니메이션을 사용하여 SolidColorBrush의 Color 및 Opacity에 애니메이션을 적용합니다.

  • 첫 번째 애니메이션인 ColorAnimation은 마우스가 사각형에 있을 때 브러시의 색상을 Gray로 변경합니다.

  • 다음 애니메이션인 또 다른 ColorAnimation은 마우스가 사각형에서 벗어날 때 브러시의 색상을 Orange로 변경합니다.

  • 마지막 애니메이션 DoubleAnimation은 왼쪽 마우스 단추를 누를 때 브러시의 불투명도를 0.0으로 변경합니다.

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;
        }
    }
}

다양한 유형의 브러시에 애니메이션 효과를 주는 방법을 보여 주는 전체 샘플을 보려면 브러시 샘플을 참조하세요. 애니메이션에 대한 자세한 내용은 애니메이션 개요를 참조하세요.

다른 애니메이션 예제와의 일관성을 위해 이 예제의 코드 버전에서는 Storyboard 개체를 사용하여 애니메이션을 적용합니다. 하지만 코드에서 단일 애니메이션을 적용할 때 Storyboard를 사용하는 대신 BeginAnimation 메서드를 사용하는 것이 더 간단합니다. 예제를 보려면 Storyboard를 사용하지 않고 속성에 애니메이션 효과 주기를 참조하세요.

참고 항목