Animation

[tomy]

Hi,

Please read this note from this page:
Now you can play around with the animation by changing the to and duration property or you could add another animation for example on the opacity or even the scale. Combining these it could look like the object is disappearing in the deep space. Try it out!

I used OpacityAnimator and ScaleAnimator as below, using the Help button of Qt Creator. Is it what it asked, please?

animation.qml:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Animation")

    Image {
        id: root
        source: "assets/background.png"

        property int padding: 40
        property int duration: 700
        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
                duration: root.duration
                running: root.running
            }

       RotationAnimation on rotation {
                to: 360
                duration: root.duration
                running: root.running
            }

       OpacityAnimator {
           target: root;
           from: 0;
           to: 1;
           duration: root.duration
           running: root.running
       }

       ScaleAnimator {
           target: root;
           from: 0.25;
           to: 1;
           duration: root.duration
           running: root.running
       }
     }

        MouseArea {
            anchors.fill: root
            onClicked: root.running = true
        }

    Button {
        id: quit
        x: 20; y: 400
        text: qsTr("Quit")
        onClicked: close()
    }
}

[Eeli K]

@tomy If I would want to fullfill the purpose of the "exercise" as stated I would rather do

OpacityAnimator {
           target: root;
           from: 1;
           to: 0;
           etc...
       }

       ScaleAnimator {
           target: root;
           from: 1;
           to: 0.1;
           etc...
      }

Now it's "disappearing in" rather than "appering from".