Animations QML changements de propriétés visibles

J'ai envie d'une animation à peindre lorsqu'un élément est visible (qui doit apparaître en douceur, pas du tout du tout)

J'ai essayé ce

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"
    }
}

Mais la selectIconRow apparaît toujours immédiatement

Comment puis-je utiliser une animation?

source d'informationauteur marmistrz | 2012-09-08

  1. 15

    Parce que c'est booléen, visible de propriété ne peuvent pas être animés. Peut-être opacity pourrait faire l'affaire.

  2. 9

    Ici est de savoir comment le faire avec 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}
    }
}

    Garder à l'esprit les conseils de Vasco de Rinaldo.

  3. 4

    Juste pour référence, voici ma solution qui prend soin aussi de Vasco avertissement. Fondamentalement, je suis d'animer le visible propriété du composant après l'opacité a changé. Ça fait mal de voir un NumberAnimation sur un booléen, mais ça fonctionne:

    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
               }
            }
        }
    ]

    Cela introduit également une transition lorsque le composant est en voie de disparition.

  4. 3

    J'ai dû modifier Uga Buga réponse légèrement pour le faire fonctionner, voici ce que j'ai:

    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}} ]
}

    Veuillez noter que stateVisible est référencé par le biais de l'id de l'élément, il ne fonctionne pas sans il sur mon système. Peut-être un peu de changement dans l'API a causé cela.

    J'ai aussi ajouté des crochets dans transitions champ comme un tableau est nécessaire, il existe (bien que QML syntaxe semble permettre d'orthographe sans crochets)

  5. 0
    Item {

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

}

    fait le truc pour moi.