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. QML Animation
Forum Update on Monday, May 27th 2025

QML Animation

Scheduled Pinned Locked Moved QML and Qt Quick
5 Posts 2 Posters 1.9k 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.
  • N Offline
    N Offline
    narayanan.krish
    wrote on 30 Dec 2013, 08:28 last edited by
    #1

    Hello all!
    I am dynamically creating a page uisng createComponent. I like to implement any kind of animation while closing the page.
    I am trying to implement the animation before destroying the page using PropertyAnimation on "opacity".
    But it is now working.
    Kindly help to fix it?

    Thanks & Regards,
    Narayanan

    1 Reply Last reply
    0
    • P Offline
      P Offline
      p3c0
      Moderators
      wrote on 30 Dec 2013, 10:18 last edited by
      #2

      Hi,

      Can you paste the relevant code ?

      157

      1 Reply Last reply
      0
      • N Offline
        N Offline
        narayanan.krish
        wrote on 30 Dec 2013, 13:07 last edited by
        #3

        Attaching the code.

        @
        import QtQuick 2.0

        Rectangle {
        id: root
        width:1280
        height:720
        color: "grey"
        PropertyAnimation { target: root; property: "opacity";
        duration: 1000; from: 0; to: 1;
        easing.type: Easing.InOutQuad ; running: true }

        Image {
            id: bg
            source: "../../resources/images/bg.png"
            x: 0
            y: 0
            opacity: 1
        }
        

        /*
        RotationAnimation on rotation {
        from: 0
        to: 360
        duration:1000
        }
        */
        Image {
        id: power_off
        source: "../../resources/images/power_off.png"
        x: 13
        y: 10
        opacity: 1
        }
        Image {
        id: power
        source: "../../resources/images/power.png"
        x: 13
        y: 10
        opacity: 1
        }
        Image {
        id: wifi_off
        source: "../../resources/images/wifi_off.png"
        x: 1133
        y: 9
        opacity: 1
        }
        Image {
        id: wifi
        source: "../../resources/images/wifi.png"
        x: 1133
        y: 9
        opacity: 1
        }
        Image {
        id: battery
        source: "../../resources/images/battery.png"
        x: 1165
        y: 9
        opacity: 1
        }
        Text {
        id: timeText
        // text: "4:23"
        font.pixelSize: 12
        font.family: "SegoeUI-SemiBold"
        font.bold: true
        color: "#8bfcfd"
        smooth: true
        x: 1200
        y: 7.5
        opacity: 1
        }
        Image {
        id: chip_circuit
        source: "../../resources/images/chip_circuit.png"
        x: 327
        y: 109
        opacity: 1
        }
        Image {
        id: home
        source: "../../resources/images/home.png"
        x: 558
        y: 280
        opacity: 1
        }
        Image {
        id: task_manager
        source: "../../resources/images/task_manager.png"
        x: 370
        y: 510
        opacity: 1
        }
        Image {
        id: task_manager_on
        source: "../../resources/images/task_manager_on.png"
        x: 370
        y: 510
        opacity: 1
        }
        Image {
        id: file_manager
        source: "../../resources/images/file_manager.png"
        x: 183
        y: 164
        opacity: 1
        }
        Image {
        id: file_manager_on
        source: "../../resources/images/file_manager_on.png"
        x: 183
        y: 164
        opacity: 1

        MouseArea {
        anchors.fill: parent
        onClicked: {
        Qt.createComponent("FileBrowser.qml").createObject(root, {});
        //loadTimer.start();
        }
        }
        }
        Image {
        id: demos
        source: "../../resources/images/demos.png"
        x: 594
        y: 45
        opacity: 1
        }
        Image {
        id: demos_on
        source: "../../resources/images/demos_on.png"
        x: 594
        y: 45
        opacity: 1
        }
        Image {
        id: about
        source: "../../resources/images/about.png"
        x: 871
        y: 440
        opacity: 1
        MouseArea {
        anchors.fill: parent
        onClicked: {
        Qt.createComponent("About_Screen.qml").createObject(root, {});
        }
        }
        }
        Image {
        id: about_on
        source: "../../resources/images/about_on.png"
        x: 871
        y: 440
        opacity: 1
        }
        Image {
        id: settings
        source: "../../resources/images/settings.png"
        x: 964
        y: 200
        opacity: 1
        }
        Image {
        id: settings_on
        source: "../../resources/images/settings_on.png"
        x: 964
        y: 200
        opacity: 1
        }

        function updateTime(time)
        {
        timeText.text=time
        }
        }
        @

        1 Reply Last reply
        0
        • P Offline
          P Offline
          p3c0
          Moderators
          wrote on 31 Dec 2013, 06:04 last edited by
          #4

          Hi,

          You can start the animation when you want to destroy the page and then use "onStopped":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-animation.html#onStopped-signal to actually destroy the page

          Fo e.g,

          @
          import QtQuick 2.0

          Rectangle {
          id: root
          width:1280
          height:720
          color: "grey"
          PropertyAnimation { id: animation; target: root; property: "opacity";
          duration: 1000; from: 1.0; to: 0.0;
          easing.type: Easing.InOutQuad ;

              onStopped: Qt.quit()
          }
          
          MouseArea {
              anchors.fill: parent
              onClicked: {
                   animation.start();
              }
          }
          

          }
          @

          Hope this helps...

          157

          1 Reply Last reply
          0
          • N Offline
            N Offline
            narayanan.krish
            wrote on 1 Jan 2014, 05:51 last edited by
            #5

            Thanks a lot. It works as I expected.

            1 Reply Last reply
            0

            1/5

            30 Dec 2013, 08:28

            • Login

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