次の方法で共有


ColorAnimation クラス

定義

指定した Duration の線形補間を使用して、2 つのターゲット値間の Color プロパティの値をアニメーション化 します

public ref class ColorAnimation sealed : Timeline
/// [Windows.Foundation.Metadata.Activatable(65536, Windows.Foundation.UniversalApiContract)]
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class ColorAnimation final : Timeline
/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class ColorAnimation final : Timeline
[Windows.Foundation.Metadata.Activatable(65536, typeof(Windows.Foundation.UniversalApiContract))]
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public sealed class ColorAnimation : Timeline
[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class ColorAnimation : Timeline
Public NotInheritable Class ColorAnimation
Inherits Timeline
<ColorAnimation .../>
継承
Object Platform::Object IInspectable DependencyObject Timeline ColorAnimation
属性

Windows の要件

デバイス ファミリ
Windows 10 (10.0.10240.0 で導入)
API contract
Windows.Foundation.UniversalApiContract (v1.0 で導入)

次の例は、ColorAnimation を使用して StackPanel の背景色をアニメーション化する方法を示しています。

<StackPanel x:Name="myStackPanel" Background="Red"
  Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">

      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation Storyboard.TargetName="myStackPanel" 
        Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
        From="Red" To="Blue" Duration="0:0:4"/>

    </Storyboard>
  </StackPanel.Resources>
</StackPanel>
<StackPanel x:Name="myStackPanel" Background="Red"
Loaded="Start_Animation">
    <StackPanel.Resources>
        <Storyboard x:Name="colorStoryboard">

            <ColorAnimationUsingKeyFrames Storyboard.TargetName="myStackPanel" 
      Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
                
                <!-- Go from green to red in the first 2 seconds. LinearColorKeyFrame creates
                a smooth, linear animation between values. -->
                <LinearColorKeyFrame Value="Blue" KeyTime="00:00:02" />

                <!-- In the next half second, go to yellow. DiscreteColorKeyFrame creates a 
                sudden jump between values. -->
                <DiscreteColorKeyFrame Value="Yellow" KeyTime="00:00:2.5" />

                <!-- In the final 2 seconds of the animation, go from yellow back to green. SplineColorKeyFrame 
                creates a variable transition between values depending on the KeySpline property. In this example,
                the animation starts off slow but toward the end of the time segment, it speeds up exponentially.-->
                <SplineColorKeyFrame Value="Green" KeyTime="00:00:4.5" KeySpline="0.6,0.0 0.9,0.00" />

            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </StackPanel.Resources>
</StackPanel>
<StackPanel Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">
      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
        Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:4"/>
    </Storyboard>
  </StackPanel.Resources>

  <StackPanel.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
  </StackPanel.Background>

</StackPanel>
// Start the animation when the object loads.
private void Start_Animation(object sender, RoutedEventArgs e)
{
    colorStoryboard.Begin();
}
' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
    colorStoryboard.Begin()
End Sub
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"

または、 SolidColorBrush を明示的に作成し、名前を付け、 Color プロパティを直接ターゲットにすることもできます。 次の例は、ダイレクト プロパティのターゲット設定を使用する場合を除き、前のアニメーションと同じアニメーションを作成する方法を示しています。

<StackPanel Loaded="Start_Animation">
  <StackPanel.Resources>
    <Storyboard x:Name="colorStoryboard">
      <!-- Animate the background color of the canvas from red to green
        over 4 seconds. -->
      <ColorAnimation Storyboard.TargetName="mySolidColorBrush"
        Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:4"/>
    </Storyboard>
  </StackPanel.Resources>

  <StackPanel.Background>
    <SolidColorBrush x:Name="mySolidColorBrush" Color="Red" />
  </StackPanel.Background>

</StackPanel>
// Start the animation when the object loads.
private void Start_Animation(object sender, RoutedEventArgs e)
{
    colorStoryboard.Begin();
}
' Start the animation when the object loads
Private Sub Start_Animation(ByVal sender As Object, ByVal e As EventArgs)
    colorStoryboard.Begin()
End Sub

注釈

ColorAnimation を使用して、 Color 型の依存関係プロパティのプロパティ値をアニメーション化します。

Color の線形補間は、各 ARGB 値がバイトとして扱われ、補間が単なる数学的演算であることを意味します。 RGB コンポーネントの少なくとも 1 つが開始値と終了値の両方で同じか、同じに近い場合は、色補間から最適な結果が得られます。

通常、ターゲットのプロパティの値である別のオブジェクトのサブプロパティをターゲットにするには、間接プロパティのターゲット設定を使用する必要があります。 これは、UI 要素に色情報を表示するプロパティが、実際には Color 型であるためです。 ほとんどは Brush 型ではなくです。 UI 要素で ColorAnimation を使用するには、通常、サブプロパティ値である SolidColorBrushColor プロパティを対象とします。 この構文は、XAML の例の「例」セクションに示されています。 間接プロパティのターゲット設定とその他のストーリーボードアニメーションの概念の詳細については、「 ストーリーボード化されたアニメーション 」または 「Property-path 構文」を参照してください。

ColorAnimation には通常、 FromBy 、または To プロパティの少なくとも 1 つが設定されていますが、3 つすべてが設定されることはありません。

  • [From only]\(のみ\): アニメーションは、 From プロパティで指定された値から、アニメーション化されるプロパティの基本値まで進行します。
  • From と To:アニメーションは、From プロパティで指定された値から To プロパティで指定された値まで進行します。
  • From と By: アニメーションは、From プロパティで指定された値から 、FromプロパティとBy プロパティの合計で指定された値まで進行します。
  • To only: アニメーションは、アニメーション化されたプロパティの基本値または前のアニメーションの出力値から 、To プロパティで指定された値まで進行します。
  • のみ: アニメーションは、アニメーション化されているプロパティの基本値または前のアニメーションの出力値から、その値と By プロパティで指定された値の合計まで進行します。

ColorAnimation の From プロパティ、 By プロパティ、 To プロパティは、厳密には Color というわけではありません。 代わりに、これらは ColorNull 許容です。 これらの既定値は null であり、初期化されていない構造体ではありません。 この null 値は、アニメーション システムが値を明示的に設定していないことを識別する方法です。 Visual C++ コンポーネント拡張機能 (C++/CX) には Nullable 型がないため、代わりに IReference を使います。

コンストラクター

ColorAnimation()

ColorAnimation クラスの新しいインスタンスを初期化します。

プロパティ

AutoReverse

順方向の反復の完了後に、タイムラインを逆方向に再生するかどうかを示す値を取得または設定します。

(継承元 Timeline)
BeginTime

この タイムライン を開始する時刻を取得または設定します。

(継承元 Timeline)
By

アニメーションの開始値の変化値の総量を取得または設定します。

ByProperty

By 依存関係プロパティを識別します。

Dispatcher

このオブジェクトが関連付けられている CoreDispatcher を取得します。 CoreDispatcher は、コードが UI 以外のスレッドによって開始された場合でも、UI スレッド上の DependencyObject にアクセスできる機能を表します。

(継承元 DependencyObject)
Duration

繰り返しをカウントせずに、このタイムラインの再生に要する時間を取得または設定します。

(継承元 Timeline)
EasingFunction

このアニメーションに適用されているイージング機能を取得または設定します。

EasingFunctionProperty

EasingFunction 依存関係プロパティを識別します。

EnableDependentAnimation

依存アニメーションと見なされるアニメーションプロパティに、このアニメーション宣言の使用を許可するかどうかを宣言する値を取得または設定します。

EnableDependentAnimationProperty

EnableDependentAnimation 依存関係プロパティを識別します。

FillBehavior

アニメーションがアクティブな期間の終わりに達した後の動作を示す値を取得または設定します。

(継承元 Timeline)
From

アニメーションの開始値を取得または設定します。

FromProperty

From 依存関係プロパティを識別します。

RepeatBehavior

このタイムラインの繰り返し動作を取得または設定します。

(継承元 Timeline)
SpeedRatio

このタイムラインの進行状況を示す、親に対する相対的なレートを取得または設定 します

(継承元 Timeline)
To

アニメーションの終了値を取得または設定します。

ToProperty

To 依存関係プロパティを識別します。

メソッド

ClearValue(DependencyProperty)

依存関係プロパティのローカル値をクリアします。

(継承元 DependencyObject)
GetAnimationBaseValue(DependencyProperty)

依存関係プロパティに対して確立された基本値を返します。これは、アニメーションがアクティブでない場合に適用されます。

(継承元 DependencyObject)
GetValue(DependencyProperty)

DependencyObject から依存関係プロパティの現在の有効な値を返します。

(継承元 DependencyObject)
ReadLocalValue(DependencyProperty)

ローカル値が設定されている場合は、依存関係プロパティのローカル値を返します。

(継承元 DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)

この DependencyObject インスタンスの特定の DependencyProperty に対する変更をリッスンするための通知関数を登録します。

(継承元 DependencyObject)
SetValue(DependencyProperty, Object)

DependencyObject の依存関係プロパティのローカル値を設定します。

(継承元 DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)

RegisterPropertyChangedCallback を呼び出して以前に登録した変更通知を取り消します。

(継承元 DependencyObject)

イベント

Completed

Storyboard オブジェクトの再生が完了したときに発生します。

(継承元 Timeline)

適用対象

こちらもご覧ください