方法 : 要素またはブラシの不透明度をアニメーション化する
フレームワーク要素のフェード インおよびフェード アウトは、その要素の Opacity プロパティをアニメーション化するか、その要素の描画に使用される Brush (ブラシ) の Opacity プロパティをアニメーション化することで作成できます。 要素の不透明度をアニメーション化すると、その要素と子要素のフェード インおよびフェード アウトを作成できます。また、要素の描画に使用されるブラシをアニメーション化することで、要素のどの部分をフェード インまたはフェード アウトするかを選択することもできます。 たとえば、ボタンの背景を描画するブラシの不透明度をアニメーション化できます。 これにより、ボタンの背景だけをフェード インおよびフェード アウトさせ、テキストの部分はそのまま残すことができます。
メモ |
---|
Brush の Opacity をアニメーション化した方が、要素の Opacity プロパティをアニメーション化するよりも、パフォーマンス上の利点があります。 |
次の例では、2 つのボタンをアニメーション化してフェード インおよびフェード アウトします。 最初の Button の Opacity は、Duration で指定した 5 秒間をかけて 1.0 から 0.0 にアニメーション化されます。 2 番目のボタンもアニメーション化されますが、ボタン全体の不透明度ではなく、Background の描画に使用される SolidColorBrush の Opacity がアニメーション化されます。 この例を実行すると、最初のボタンは全体がフェード インおよびフェード アウトするのに対し、2 番目のボタンは背景だけがフェード インおよびフェード アウトします。 テキストと境界線は、完全に不透明のまま残ります。
使用例
<!-- OpacityAnimationExample.xaml
This example shows how to animate the opacity of objects,
making them fade in and out of view. -->
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://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>
この例では、コードは省略されています。 サンプル全体では、LinearGradientBrush の Color の透明度をアニメーション化する方法も示します。 サンプル全体については、要素の不透明度のアニメーション化のサンプルを参照してください。