Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Help on states and transitions
Forum Update on Monday, May 27th 2025

Help on states and transitions

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
transitionstatesanimations
4 Posts 2 Posters 1.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Mark81
    wrote on last edited by
    #1

    Hi, I'm trying to understand how the states and transitions works togheter. Basically, I have some variables that define the current state. For example, let's say we have:

    property bool isActive: myClass.isActive
    

    where myClass is a C++ class which has a notifiable property called isActive.
    I want to animate some objects when this property changes. I tried this code:

    states: [
            State {
                name: "ACTIVE";  when: myClass.isActive
                PropertyChanges { target: areaContents; x: 0 }
                PropertyChanges { target: areaHeader; opacity: 1.0 }
                PropertyChanges { target: areaFooter; opacity: 1.0 }
            },
            State {
                name: "NOTACTIVE";  when: !myClass.isActive
                PropertyChanges { target: areaContents; x: -width }
                PropertyChanges { target: areaHeader; opacity: 0.0 }
                PropertyChanges { target: areaFooter; opacity: 0.0 }
            }
        ]
    
        transitions: [
            Transition {
                NumberAnimation { target: areaContents; property: "x"; duration: 500; easing.type: Easing.InOutQuad }
                OpacityAnimator { target: areaHeader; duration: 500 }
                OpacityAnimator { target: areaFooter; duration: 500 }
            }
        ]
    

    But it doens't work as excpected.
    Few questions:

    1. do I need to explicitly define values for both states? I mean, in the NOTACTIVE state the properties' values are the same declared into the definition of the object ("default" ones)
    2. is it correct how I animate the properties? I'm not sure because in the *Animators you can also specify the from and to values. When not specified they use the ones provided from the PropertyChanges objects?
    raven-worxR 1 Reply Last reply
    0
    • M Mark81

      Hi, I'm trying to understand how the states and transitions works togheter. Basically, I have some variables that define the current state. For example, let's say we have:

      property bool isActive: myClass.isActive
      

      where myClass is a C++ class which has a notifiable property called isActive.
      I want to animate some objects when this property changes. I tried this code:

      states: [
              State {
                  name: "ACTIVE";  when: myClass.isActive
                  PropertyChanges { target: areaContents; x: 0 }
                  PropertyChanges { target: areaHeader; opacity: 1.0 }
                  PropertyChanges { target: areaFooter; opacity: 1.0 }
              },
              State {
                  name: "NOTACTIVE";  when: !myClass.isActive
                  PropertyChanges { target: areaContents; x: -width }
                  PropertyChanges { target: areaHeader; opacity: 0.0 }
                  PropertyChanges { target: areaFooter; opacity: 0.0 }
              }
          ]
      
          transitions: [
              Transition {
                  NumberAnimation { target: areaContents; property: "x"; duration: 500; easing.type: Easing.InOutQuad }
                  OpacityAnimator { target: areaHeader; duration: 500 }
                  OpacityAnimator { target: areaFooter; duration: 500 }
              }
          ]
      

      But it doens't work as excpected.
      Few questions:

      1. do I need to explicitly define values for both states? I mean, in the NOTACTIVE state the properties' values are the same declared into the definition of the object ("default" ones)
      2. is it correct how I animate the properties? I'm not sure because in the *Animators you can also specify the from and to values. When not specified they use the ones provided from the PropertyChanges objects?
      raven-worxR Offline
      raven-worxR Offline
      raven-worx
      Moderators
      wrote on last edited by
      #2

      @Mark81 said:

      1. is it correct how I animate the properties? I'm not sure because in the *Animators you can also specify the from and to values. When not specified they use the ones provided from the PropertyChanges objects?

      you should define at least the "to" properties. The from - if left out - should use the current value.
      Of course without a to-value, who should know until which value you want the animation to happen.

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      M 1 Reply Last reply
      0
      • raven-worxR raven-worx

        @Mark81 said:

        1. is it correct how I animate the properties? I'm not sure because in the *Animators you can also specify the from and to values. When not specified they use the ones provided from the PropertyChanges objects?

        you should define at least the "to" properties. The from - if left out - should use the current value.
        Of course without a to-value, who should know until which value you want the animation to happen.

        M Offline
        M Offline
        Mark81
        wrote on last edited by
        #3

        @raven-worx said:

        Of course without a to-value, who should know until which value you want the animation to happen.

        I'm not sure to understand this. If I have to specify to to-value in the *Animator objects, what is the purpose of the PropertyChanges?

        raven-worxR 1 Reply Last reply
        0
        • M Mark81

          @raven-worx said:

          Of course without a to-value, who should know until which value you want the animation to happen.

          I'm not sure to understand this. If I have to specify to to-value in the *Animator objects, what is the purpose of the PropertyChanges?

          raven-worxR Offline
          raven-worxR Offline
          raven-worx
          Moderators
          wrote on last edited by
          #4

          @Mark81
          forget what i said, this wasn't correct. sorry.

          In the Transition object you should fill the "from" and "to" porperties with names of the states.
          So you need a transition from state to state.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          1 Reply Last reply
          0

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved