Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

sequential animation on property change



  • I am attempting to run a Sequential Animation whenever the optionsListEnabled property changes:

    property int maxHeight: 100
    property bool optionsListEnabled: modelData.enabled
    
    onOptionsListEnabledChanged: heightChange.start()
    SequentialAnimation
    {
      id: heightChange
    
        NumberAnimation
        {
            from: statusIconButton.implicitHeight
            to: statusIconButton.maxHeight
            easing.type: Easing.OutExpo
            duration: 300
        }
    
        NumberAnimation
        {
    	from: statusIconButton.maxHeight
    	to: statusIconButton.implicitHeight
    	easing.type: Easing.OutBounce
    	duration: 300
        }
    }
    

    however, I can't figure out how to make statusIconButton.impliciteHeight be the target. In other words I am trying to toggle the implicitHeight of the button to change whenever the property changes. I tried this:

    SequentialAnimation on implicitHeight
    

    but that causes it to change both when the property changes, and on startup of the application when implicitHeight is being set which is not what I am looking for. Any suggestions?


  • Qt Champions 2018

    Add

    target: yourItem
    property: "implicitHeight"
    

    in your NumberAnimations.

    Note that instead of

    onOptionsListEnabledChanged: heightChange.start()
    SequentialAnimation {
        id: heightChange
        //...
    }
    

    You can do

    Behavior on optionsListEnabled {
        SequentialAnimation {
            //...
        }
    }
    

  • Qt Champions 2018

    Add

    target: yourItem
    property: "implicitHeight"
    

    in your NumberAnimations.

    Note that instead of

    onOptionsListEnabledChanged: heightChange.start()
    SequentialAnimation {
        id: heightChange
        //...
    }
    

    You can do

    Behavior on optionsListEnabled {
        SequentialAnimation {
            //...
        }
    }
    

Log in to reply