Set property and ignore behavior animation



  • Hi there,

    I'm trying to animate a property towards one direction but not towards the other.
    Animation usually goes downwards, while setting to zero is a reset function.
    Here is minimal example which obviously animates on both directions, but just to get the idea.

    Rectangle {
        height: 200
        width: 200
    
        Rectangle {
            id: icon
            height: 20
            width: 200
            color: "red"
    
            Behavior on y { NumberAnimation {} }
        }
    
        MouseArea {
            onClicked: icon.y += 20;
            onDoubleClicked: icon.y = 0; // this shall not be animated
            anchors.fill: parent
        }
    }
    

    I was able to work around this restriction with the following code:

    Rectangle {
        height: 200
        width: 200
    
        Rectangle {
            id: icon
            height: 20
            width: 200
            color: "red"
    
            onYChanged: { console.log(y) }
    
            NumberAnimation on y {
                id: anim
                running: false
                duration: 1000
            }
        }
    
        MouseArea {
            onClicked: {
                anim.stop();
                anim.to += 30
                anim.start()
            }
            onDoubleClicked: {
                anim.stop();
                anim.to = icon.y = 0;
            }
    
            anchors.fill: parent
        }
    }
    

    However this is "a lot" of code. In most other cases I'm quite fine with direct bindings to properties.
    Is there a simpler way to achieve this that I missed?
    e.g. Behavior.enabled: newValue > oldValue or in my case even better: icon.setYWithoutBehaviorAnimation(0)?
    (Unfortunately something like 'NumberAnimation.running: to > false' doesn't work either as you cannot bind it to 'to' and 'false')

    Regards, Alex



  • What I have been using is giving the Behavior an id and:

    onDoubleClicked: { yBehavior.enabled = false; icon.y = 0; yBehavior.enabled = true; }
    

    Feels a bit like a clutch, but it works.



  • @kloffy thanks. it's not pretty but way better then what I had.



Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.