方法 : SolidColorBrush の色または不透明度をアニメーション化する
この例では、SolidColorBrush の Color および Opacity をアニメーション化する方法を説明します。
使用例
3 つのアニメーションを使用して、SolidColorBrush の Color と Opacity をアニメーション化する例を次に示します。
1 つ目のアニメーション ColorAnimation では、マウスが四角形の中に入ると、ブラシの色が Gray に変更されます。
2 つ目のアニメーションである、別の ColorAnimation では、マウスが四角形の外に出ると、ブラシの色が Orange に変更されます。
最後のアニメーション DoubleAnimation では、マウスの左ボタンをクリックすると、ブラシの不透明度が 0.0 に変更されます。
Imports Microsoft.VisualBasic
Imports System
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Media
Imports System.Windows.Media.Animation
Imports System.Windows.Shapes
Imports 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
Inherits Page
Public Sub New()
Title = "SolidColorBrush Animation Example"
Background = Brushes.White
' Create a NameScope for the page so
' that Storyboards can be used.
NameScope.SetNameScope(Me, New NameScope())
' Create a Rectangle.
Dim aRectangle As 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.
Dim myAnimatedBrush As 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.
Me.RegisterName("MyAnimatedBrush", myAnimatedBrush)
'
' Animate the brush's color to gray when
' the mouse enters the rectangle.
'
Dim mouseEnterColorAnimation As New ColorAnimation()
mouseEnterColorAnimation.To = Colors.Gray
mouseEnterColorAnimation.Duration = TimeSpan.FromSeconds(1)
Storyboard.SetTargetName(mouseEnterColorAnimation, "MyAnimatedBrush")
Storyboard.SetTargetProperty(mouseEnterColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
Dim mouseEnterStoryboard As New Storyboard()
mouseEnterStoryboard.Children.Add(mouseEnterColorAnimation)
AddHandler aRectangle.MouseEnter, Sub(sender As Object, e As MouseEventArgs) mouseEnterStoryboard.Begin(Me)
'
' Animate the brush's color to orange when
' the mouse leaves the rectangle.
'
Dim mouseLeaveColorAnimation As New ColorAnimation()
mouseLeaveColorAnimation.To = Colors.Orange
mouseLeaveColorAnimation.Duration = TimeSpan.FromSeconds(1)
Storyboard.SetTargetName(mouseLeaveColorAnimation, "MyAnimatedBrush")
Storyboard.SetTargetProperty(mouseLeaveColorAnimation, New PropertyPath(SolidColorBrush.ColorProperty))
Dim mouseLeaveStoryboard As New Storyboard()
mouseLeaveStoryboard.Children.Add(mouseLeaveColorAnimation)
AddHandler aRectangle.MouseLeave, Sub(sender As Object, e As MouseEventArgs) mouseLeaveStoryboard.Begin(Me)
'
' Animate the brush's opacity to 0 and back when
' the left mouse button is pressed over the rectangle.
'
Dim opacityAnimation As 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))
Dim mouseLeftButtonDownStoryboard As New Storyboard()
mouseLeftButtonDownStoryboard.Children.Add(opacityAnimation)
AddHandler aRectangle.MouseLeftButtonDown, Sub(sender As Object, e As MouseButtonEventArgs) mouseLeftButtonDownStoryboard.Begin(Me)
Dim mainPanel As New StackPanel()
mainPanel.Margin = New Thickness(20)
mainPanel.Children.Add(aRectangle)
Content = mainPanel
End Sub
End Class
End Namespace
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 オブジェクトを使用してアニメーションを適用しています。 ただし、コードで 1 つのアニメーションを適用する場合は、Storyboard よりも BeginAnimation メソッドを使用する方が簡単です。 例については、「方法 : ストーリーボードを使用せずにプロパティをアニメーション化する」を参照してください。