StyleAnimation QML Type

スタイルプロパティをアニメーション化するための便利型です。詳細...

この型はテクノロジープレビュー段階であり、変更される可能性があります。

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• animateBackgroundBorder : bool
• animateBackgroundColors : bool
• animateBackgroundGeometry : bool
• animateBackgroundRadii : bool
• animateBackgroundScaleAndRotation : bool
• animateBackgroundShadow : bool
• animateColors : bool
• animateControlGeometry : bool
• animateHandleBorder : bool
• animateHandleColors : bool
• animateHandleGeometry : bool
• animateHandleRadii : bool
• animateHandleScaleAndRotation : bool
• animateHandleShadow : bool
• animateIndicatorBorder : bool
• animateIndicatorColors : bool
• animateIndicatorGeometry : bool
• animateIndicatorRadii : bool
• animateIndicatorScaleAndRotation : bool
• animateIndicatorShadow : bool
• duration : int
• easing : EasingCurve

詳細説明

StyleAnimationは、コントロールの変更時にスタイルプロパティをアニメーション化するAnimation です（state ）。たとえば、animateBackgroundColors をtrue に設定すると、background のすべての色プロパティ（background.color 、background.border.color 、background.image.color 、background.shadow.color など）がアニメーション化されます。これはtransition 内で使用されます：

comboBox {
    background.color: "lightgray"
    hovered.background.color: "plum"

    indicator.color: "white"
    hovered.indicator.color: "pink"
    hovered.indicator.border.width: 4

    transition: Transition {
        StyleAnimation {
            animateBackgroundColors: true
            animateIndicatorColors: true
            animateIndicatorBorder: true
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

StyleAnimationは、影響を受けるスタイルプロパティを自動的に列挙する、単なる便利なAnimation です。上記のスニペットは、次のように記述することもできます：

checkBox {
    background.color: "lightgray"
    hovered.background.color: "plum"

    indicator.color: "white"
    hovered.indicator.color: "pink"
    hovered.indicator.border.width: 4

    transition: Transition {
        ColorAnimation {
            properties: "background.color, background.border.color, background.image.color, background.shadow.color"
            + ", indicator.color, indicator.border.color, indicator.image.color, indicator.shadow.color"
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "indicator.border.width"
            easing.type: Easing.OutQuad
            duration: 500
        }
    }
}

StyleAnimationは他のアニメーションと組み合わせて使用することも可能です：

slider {
    handle.color: "white"
    hovered.handle.color: "seagreen"
    hovered.handle.border.width: 8

    transition: Transition {
        StyleAnimation {
            animateHandleColors: true
            easing.type: Easing.OutQuad
            duration: 500
        }
        NumberAnimation {
            properties: "handle.border.width"
            easing.type: Easing.OutBounce
            duration: 1000
        }
    }
}

ControlStyle.transition およびControlStyleも参照してください 。

プロパティのドキュメント

animateBackgroundBorder : bool

true が実行されると、background デリゲートのborder width がアニメーションされます。

animateBackgroundColors : bool

true が実行されると、background デリゲートの色プロパティ（border およびshadow の色を含む）がアニメーション処理されます。

「 animateColors 」および「animateBackgroundGeometry 」も参照してください 。

animateBackgroundGeometry : bool

true が実行されると、background デリゲートのジオメトリプロパティ（width 、height 、margins など）がアニメーション処理されます。

animateBackgroundRadii : bool

true が実行されると、background デリゲートのradii コーナーがアニメーション表示されます。

animateBackgroundScaleAndRotation : bool

true が実行されると、background デリゲートの移動および回転がアニメーション処理されます。

animateBackgroundShadow : bool

true が実行されると、background デリゲートのshadowプロパティ（vertical offset 、horizontal offset 、scale 、blur など）がアニメーション処理されます。shadowcolor は、animateHandleColors によってアニメーション処理されます。

animateColors : bool

true が設定されている場合、すべてのデリゲートにわたってすべての色プロパティにアニメーションが適用されます。これは、animateBackgroundColors 、animateHandleColors 、およびanimateIndicatorColors を一度に有効にするための短縮表記です。

なお、property とproperties の両方が設定されていない場合、ColorAnimation はトランジション中に変化するすべての色プロパティもアニメーション化します。これにより、色をアニメーション化する必要がある場合に限り、StyleAnimation の代替手段となります。

animateBackgroundColors 、animateHandleColors 、およびanimateIndicatorColorsも参照してください 。

animateControlGeometry : bool

true が呼び出されると、spacing やpadding といったコントロールのジオメトリプロパティがアニメーション処理されます。

animateHandleBorder : bool

true が実行されると、handle デリゲートのborder width およびそのsub-handles がアニメーションされます。

animateHandleColors : bool

true が実行されると、handle デリゲートおよびそのsub-handles の色プロパティ（border およびshadow の色を含む）がアニメーション処理されます。

「 animateColors 」および「animateHandleGeometry 」も参照してください 。

animateHandleGeometry : bool

true が実行されると、handle デリゲートおよびそのsub-handles のジオメトリプロパティ（width 、height 、margins など）がアニメーション処理されます。

animateHandleRadii : bool

true が実行されると、handle デリゲートのradii コーナーと、そのsub-handles がアニメーションされます。

animateHandleScaleAndRotation : bool

true が実行されると、handle デリゲートのscale およびrotation 、ならびにそのsub-handles がアニメーション処理されます。

animateHandleShadow : bool

true が実行されると、handle デリゲートおよびそのsub-handles のshadowプロパティ（vertical offset 、horizontal offset 、scale 、blur など）がアニメーション処理されます。shadowのcolor は、animateHandleColors によってアニメーション処理されます。

animateIndicatorBorder : bool

true が実行されると、indicator デリゲートのborder width およびそのsub-indicators がアニメーションされます。

animateIndicatorColors : bool

true が呼び出されると、indicator デリゲートおよびそのsub-indicators の色プロパティ（border およびshadow の色を含む）がアニメーション処理されます。

「 animateColors 」および「animateIndicatorGeometry 」も参照してください 。

animateIndicatorGeometry : bool

true が実行されると、indicator デリゲートおよびそのsub-indicators のジオメトリプロパティ（width 、height 、margins など）がアニメーション処理されます。

animateIndicatorRadii : bool

true が実行されると、indicator デリゲートのradii コーナーとそのsub-indicators がアニメーションされます。

animateIndicatorScaleAndRotation : bool

true が呼び出されると、indicator デリゲートとそのsub-indicators のスケールおよび回転がアニメーション処理されます。

animateIndicatorShadow : bool

true が実行されると、indicator デリゲートおよびそのsub-indicators のshadowプロパティ（vertical offset 、horizontal offset 、scale 、blur など）がアニメーション処理されます。shadowのcolor は、animateHandleColors によってアニメーション処理されます。

duration : int

アニメーションの再生時間（ミリ秒単位）。

「 easing 」および「PropertyAnimation 」も参照してください 。

easing : EasingCurve

アニメーションに適用されたイージングカーブ。

「 duration 」および「PropertyAnimation 」も参照してください 。