Практическое руководство. Анимация свойства "Цвет" или "Непрозрачность" элемента SolidColorBrush
Обновлен: Ноябрь 2007
В следующем примере демонстрируется анимация свойств Color и Opacity элемента SolidColorBrush.
Пример
В следующем примере используется три анимации для анимирования свойств Color и Opacity элемента SolidColorBrush.
Первая анимация, 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;
}
}
}
<!-- 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>
Более полный пример, демонстрирующий анимацию различных типов кистей, см. в разделе Пример использования кистей. Дополнительные сведения об анимации см. в разделе Общие сведения об эффектах анимации.
Для совместимости с другими примерами анимации, в разных версиях кода этого примера используется объект Storyboard для применения соответствующих анимаций. Однако при применении одной анимации в коде проще использовать метод BeginAnimation вместо Storyboard. Пример см. в разделе Практическое руководство. Анимация свойства без раскадровки.