15

要素が表示されたときにアニメーションをペイントしたい（全体ではなくスムーズに表示されるはずです）

私はこれを試しました

states: State
{
    name: "iconOff"
    when: iconOnSwitch.checked == false
    PropertyChanges { target: selectIconRow; visible: false }
}

transitions: Transition
{
    reversible: true
    from: ""
    to: "iconOff"
    PropertyAnimation
    {
        properties: "x,y,visible"
        easing.type: Easing.InOutQuad
        from: selectIconRow
        property: "visible"
    }
}

ただし、selectIconRowはすぐに表示されます

このようなアニメーションをどのように使用できますか？

4

6 に答える 6

19

ブール値であるため、visibleプロパティをアニメーション化することはできません。おそらくopacityそのトリックを行うことができます。

于 2012-09-09T00:47:25.890 に答える
11

これを行う方法は次のopacityとおりです。

Rectangle {
    id: myRect
    property bool stateVisible: true
    ...
    states: [
        State { when: stateVisible;
            PropertyChanges {   target: myRect; opacity: 1.0    }
        },
        State { when: !stateVisible;
            PropertyChanges {   target: myRect; opacity: 0.0    }
        }
    ]
    transitions: Transition {
        NumberAnimation { property: "opacity"; duration: 500}
    }
}

VascoRinaldoのアドバイスを覚えておいてください。

于 2015-01-10T12:56:09.270 に答える
6

今後の参考のために、Vascoの警告も処理する私のソリューションを次に示します。visible基本的に、不透明度が変更された後、コンポーネントのプロパティをアニメートしています。NumberAnimationブール値でを見るのは痛いですが、機能しています：

states: [
    State{
        name: "Visible"
        PropertyChanges{target: root; opacity: 1.0}
        PropertyChanges{target: root; visible: true}
    },
    State{
        name:"Invisible"
        PropertyChanges{target: root; opacity: 0.0}
        PropertyChanges{target: root; visible: false}
    }
]

transitions: [
        Transition {
            from: "Visible"
            to: "Invisible"

            SequentialAnimation{
               NumberAnimation {
                   target: root
                   property: "opacity"
                   duration: 500
                   easing.type: Easing.InOutQuad
               }
               NumberAnimation {
                   target: root
                   property: "visible"
                   duration: 0
               }
            }
        },
        Transition {
            from: "Invisible"
            to: "Visible"
            SequentialAnimation{
               NumberAnimation {
                   target: root
                   property: "visible"
                   duration: 0
               }
               NumberAnimation {
                   target: root
                   property: "opacity"
                   duration: 500
                   easing.type: Easing.InOutQuad
               }
            }
        }
    ]

これにより、コンポーネントが消失しているときの遷移も発生します。

于 2015-12-02T10:20:35.720 に答える
5

私はそれを機能させるためにウガブガの答えを少し修正しなければなりませんでした、これが私が得たものです：

Rectangle {
    id: myRect
    property bool stateVisible: true
            ...
    states: [
        State { when: myRect.stateVisible; 
                PropertyChanges {   target: myRect; opacity: 1.0    }},
        State { when: !myRect.stateVisible;
                PropertyChanges {   target: myRect; opacity: 0.0    }}
    ]
    transitions: [ Transition { NumberAnimation { property: "opacity"; duration: 500}} ]
}

stateVisibleはアイテムIDを介して参照されることに注意してください。これがないと、システムで機能しません。たぶん、APIのいくつかの変更がこれを引き起こしました。

transitions配列が必要なため、フィールドに角かっこも追加しました（ただし、QML構文では角かっこなしのスペルが許可されているようです）

于 2015-08-23T23:29:48.390 に答える
2 
Item {

 scale: visible ? 1.0 : 0.1
 Behavior on scale { 
   NumberAnimation  { duration: 500 ; easing.type: Easing.InOutBounce  } 
  }

}

私のためにトリックを行います。

于 2017-11-07T19:50:00.380 に答える
0

visibility で使用できますがNumberAnimation、必要なフェード結果を得るには、opacityアニメーションを使用できます。次の例のような機能から可視性をオンにするようなものです。

Rectangle{
    id:fadingRect
    anchors.fill: parent
    visible: false
    opacity: 0.00
    color: "red"
    Component.onCompleted: {
        animRect.start()
    }
}
SequentialAnimation{
    id:animRect
    NumberAnimation { target: fadingRect; property: "visible"; from: 0; to:1; duration: 20}
    NumberAnimation { target: fadingRect; property: "opacity"; from: 0.00; to:1.00; duration: 4000 }

    onStopped: console.log(fadingRect.visible)
}

または ：

Rectangle{
    id:fadingRect
    anchors.fill: parent
    visible: false
    opacity: 1
    color: "red"
    Component.onCompleted: {
        animRect.start()
    }
        NumberAnimation { id:animRect; target: fadingRect; property: "opacity"; from: 0; to:1; duration: 2000;
        onStarted: { fadingRect.visible=true; console.log(fadingRect.visible)}
        }
}
于 2018-10-02T13:32:53.113 に答える