my SequentialAnimation isn't fully executing

mzimmers

Hi all -

I'm trying to experiment with animation. I want to add some movement to my tab button icons when the tab is selected. For now, I want to turn it upside down, then right side up again. Here's what I'm trying:

states: State {
    name: "rotated"
    when: button.checked
    PropertyChanges {
        target: overlay; rotation: 180 // overlay is a ColorOverlay
    }
}
transitions: Transition {
    to: "rotated"
    reversible: true
    SequentialAnimation {
        RotationAnimation { duration: 500; direction: RotationAnimation.Counterclockwise }
        RotationAnimation { duration: 500; direction: RotationAnimation.Clockwise }
    }
}

Only the first of the two RotationAnimations execute.

Any ideas what I'm doing wrong here? My intention is to eventually have the icon "jiggle" - move a little bit clockwise then CCW, etc, so I'll need several rotations to implement this.

EDIT:

This works for me, though I'm curious if there might be a simpler way to do it:

states: State {
    name: "rotated"
    when: button.checked
}
transitions: Transition {
    to: "rotated"
    reversible: true
    SequentialAnimation {
        RotationAnimator { duration: 75; target: overlay; from: 0; to: 20; direction: RotationAnimation.Clockwise }
        RotationAnimator { duration: 150; target: overlay; from: 20; to: 340; direction: RotationAnimation.Counterclockwise }
        RotationAnimator { duration: 150; target: overlay; from: 340; to: 20; direction: RotationAnimation.Clockwise }
        RotationAnimator { duration: 75; target: overlay; from: 20; to: 0; direction: RotationAnimation.Counterclockwise }
    }
}

Thanks...

GrecKo

Whenever I can I don't use states. In your case a state also doesn't really apply. You want to do something based on a change, not based on a state.

Here I would just start an animation, note the Math.sin * amplitude "trick" to have a simple oscillating animation:

CheckBox {
    anchors.centerIn: parent

    onCheckedChanged: wiggleAnimation.start()

    property real wiggle
    rotation: Math.sin(wiggle) * 20 // 20 is the amplitude
    RotationAnimation on wiggle {
        id: wiggleAnimation
        from: 0
        to: Math.PI * 5 // 5 is the number of "loops"
        duration: 400
        easing.type: Easing.InOutQuad
    }
}

mzimmers

@GrecKo I like it a lot. I'm getting a curious behavior, though -- I'm doing this within a customized TabButton, and on startup, all the tab icons wiggle. Any idea why this might be happening? I think I could put a condition on my wiggle start to only perform if the button matches the current index, but I'm not sure how to code that.

Here's what I have, stripped down to the essentials:

TabButton {
    contentItem: RowLayout {
        Image {
            id: image
        }
        ColorOverlay {
            id: overlay
            property real wiggle
            rotation: Math.sin(wiggle) * 20 // 20 is the amplitude
            RotationAnimation on wiggle {
                id: wiggleAnimation
                from: 0
                to: Math.PI * 5 // 5 is the number of "loops"
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    onClicked: wiggleAnimation.start()
}

Thanks...

fcarney

@mzimmers "By default, animations are not running. Though, when the animations are assigned to properties, as property value sources using the on syntax, they are set to running by default."

https://doc.qt.io/qt-5/qml-qtquick-animation.html#running-prop

I set the "running" property to false to fix the running when created problem.

mzimmers

@fcarney wow...that's rather intricate knowledge. That did seem to fix that issue; thanks!

@GrecKo I'm curious to why you try to avoid states.

fcarney

@mzimmers said in my SequentialAnimation isn't fully executing:

wow...that's rather intricate knowledge

I just set running to false and it worked. Then went and looked at Animation because that is where running is defined. Then I found the reason. Usually most QML objects show the default states of properties. So it was a wild guess to start.

GrecKo

@mzimmers said in my SequentialAnimation isn't fully executing:

@GrecKo I'm curious to why you try to avoid states.

I find them more verbose than they are worth. I prefer to define what a property should be directly in its binding, this way I don't have to look for a possible State maybe changing a property defined before.
Only 1 State is enabled at a time, combinatorial explosion can get messy when you want to have a state for a hovered, clicked and in warning button.

In general a ternary in your binding and a Behavior if you want an animation is enough.