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. QMLBook Tutorial - Problem with animation
Forum Updated to NodeBB v4.3 + New Features

QMLBook Tutorial - Problem with animation

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 372 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.
  • C Offline
    C Offline
    cjcnh
    wrote on last edited by
    #1

    I am studying the tutorial at https://qmlbook.github.io and am having a problem with one of the "animation" exercises.

    Here is the code as provided with the tutorial at https://qmlbook.github.io/ch05-fluid/fluid.html:

    // animation.qml
    
    import QtQuick 2.5
    
    Image {
        id: root
        source: "assets/background.png"
    
        property int padding: 40
        property int duration: 4000
        property bool running: false
    
        Image {
            id: box
            x: root.padding;
            y: (root.height-height)/2
            source: "assets/box_green.png"
    
            NumberAnimation on x {
                to: root.width - box.width - root.padding
                duration: root.duration
                running: root.running
            }
            RotationAnimation on rotation {
                to: 360
                duration: root.duration
                running: root.running
            }
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: root.running = true
        }
    }
    

    The objective is to draw a green square on the left side of a larger box. Clicking on an empty area of the larger box causes the green square to move to the right side of the larger box while rotating 360 degrees. All of that works.

    The tutorial instructsus to "add another animation ... on the opacity or even the scale.". The objective there is that, while the green square is moving and rotating, it also fades out and gets smaller. Here is the code, modified with code I added to do all of that.

    // animation.qml
    
    import QtQuick 2.5
    
    Image {
        id: root
        source: "assets/background.png"
    
        property int padding: 40
        property int duration: 4000
        property bool running: false
    
        Image {
            id: box
            x: root.padding;
            y: (root.height-height)/2
            source: "assets/box_green.png"
    
            // Move to the right ...
            //
            NumberAnimation on x {
                to: root.width - box.width - root.padding
                duration: root.duration
                running: root.running
            }
    
            // ... while rotating 360 degrees ...
            //
            RotationAnimation on rotation {
                to: 360
                duration: root.duration
                running: root.running
            }
    
            // ... fading out to 1/2 opacity ...
            //
            OpacityAnimator on opacity {
                from: 1.0
                to: 0.5
                duration: root.duration
                running: root.running
            }
    
            // ... and gradually shrinking in size to 1/2 of its former size, except THIS DOESN'T WORK.
            // It stays at its initial size all the way to the end, then drops to 1/2 size.
            //
            ScaleAnimator on scale {
                from: 1
                to: 0.5
                duration: root.duration
                running: root.running
            }
        }
    
        MouseArea {
            anchors.fill: parent
            onClicked: root.running = true
        }
    }
    

    As noted in the comment, all of the objectives are working correctly EXCEPT the gradual shrinking to 1/2 size. The size stays the same until movement is complete, then it shrinks to 1/2 size all at once.

    Can anyone pick out what I'm doing wrong?

    Thanks...

    1 Reply Last reply
    0
    • C Offline
      C Offline
      cjcnh
      wrote on last edited by
      #2

      To clarify one thing... the movement to the right, the rotation, the fading to 1/2 opacity, and the shrinking to 1/2 size should all happen gradually over a time of 4 seconds. All of that is working as expected except for the shrinking part, which as noted above, happens all at once at the end.

      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