Видимые изменения свойств анимации QML

Я хочу, чтобы анимация была окрашена, когда элемент становится видимым (должен выглядеть гладко, а не вообще)

Я пробовал это

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 все же появляется сразу

Как я могу использовать такую анимацию?

Ответ 1

Поскольку он является логическим, свойство visible не может быть анимировано. Возможно, opacity может сделать трюк.

Ответ 2

Вот как это сделать с помощью 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}
    }
}

Имейте в виду совет Васко Ринальдо.

Ответ 3

Только для будущих ссылок, здесь мое решение, которое заботится также о предупреждении Васко. В основном я анимация свойства 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
               }
            }
        }
    ]

Это вводит также переход, когда компонент исчезает.

Ответ 4

Мне пришлось немного изменить Uga Buga, чтобы заставить его работать, вот что я получил:

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 ссылается через идентификатор элемента, он не работает без него в моей системе. Возможно, некоторые изменения в API вызвали это.

Я также добавил квадратную скобку в поле transitions, поскольку там нужен массив (хотя синтаксис QML, похоже, позволяет написание без скобок)

Ответ 5

Item {

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

}

делает трюк для меня.