Temporarily display an item

[Darq]

Hello!

I have a project to do that displays a square. Pressing this square will move it, for example, to the left by 40px. After 10 seconds, the square is to return to its place. Can someone help me to create code for this operation?

[Markkyboy]

You need a rectangle, a mousearea and a timer.

When the rectangle is clicked with mouse, x of rectangle shifts by 40 px. The mouse click also starts the timer running. The timer determines when x of the rectangle moves back to 0.

import QtQuick 2.7
import QtQuick.Controls 2.3

Rectangle {
    id: redsquare
    color: "red"
    width: 200
    height: 200
    x: 0
    y: 0

    MouseArea {
        anchors.fill: parent
        onClicked: {
            redsquare.x = 40
            movetimer.running = true
        }
    }
    Timer {
        id: movetimer
        interval: 10000
        running: false
        repeat: true
        onTriggered: {
            redsquare.x = 0
            movetimer.running = false
        }
    }
}

[Darq]

@Markkyboy said in Temporarily display an item:

import QtQuick.Controls 2.3

Rectangle {
id: redsquare
color: "red"
width: 200
height: 200
x: 0
y: 0

MouseArea {
    anchors.fill: parent
    onClicked: {
        redsquare.x = 40
        movetimer.running = true
    }
}
Timer {
    id: movetimer
    interval: 10000
    running: false
    repeat: true
    onTriggered: {
        redsquare.x = 0
        movetimer.running = false
    }
}

}

Thank you very much. I still have a question how to make this square move linearly (now it jumps to x: 40), and after moving it to be more transparent (opaticy 0.4)?

[Markkyboy]

There are a number of ways to animate a movement.

I would use SequentialAnimation on a property of the Rectangle. By using SequentialAnimation, we can change a few properties of Rectangle, like shifting X to the right, back to the left or Opacity up, then down.

Rectangle {
    id: redsquare
    color: "red"
    width: 200
    height: 200
    x: 0
    y: 0
    // animation control
    SequentialAnimation on x {
        id: moving
        loops: 1
        running: false
        NumberAnimation {
            from: 0
            to: 140
            duration: 2000
        }
        PauseAnimation { duration: 2000 }
        NumberAnimation {
            from: 140
            to: 0
            duration: 250
        }
    }
    SequentialAnimation on opacity {
        id: opacitychange
        loops: 1
        running: false
        NumberAnimation {
            from: 1.0
            to: 0.4
            duration: 2000
        }
        PauseAnimation { duration: 2000 }
        NumberAnimation {
            from: 0.4
            to: 1.0
            duration: 2000
        }
    }
    Timer {
        id: movetimer
        interval: 2000
        running: false
        repeat: true
        onTriggered: {
            moving.running = true
            opacitychange.running = true
            movetimer.running = false
        }
    }
    MouseArea {
        anchors.fill: redsquare
        onClicked: {
            movetimer.running = true
            moving.running = true
            opacitychange.running = true
        }
    }
}

[GrecKo]

More declaratively:

Rectangle {
    id: redsquare
    color: "red"
    width: 200
    height: 200
    property real hideProgress: timer.running ? 1 : 0
    x: -40 * hideProgress
    opacity: 1- 0.4 * hideProgress
    TapHandler {
        onTapped: timer.start()
    } 
    Behavior on hideProgress {
        NumberAnimation {
            easing.type: Easing.InOutQuad
        } 
   }
   Timer {
        id: timer
        interval: 10000
   }
}

Used a single property to animate both x and opacity, but they could be separated

[Darq]

@Markkyboy Is it possible to make the text color change automatically? For example, it causes the display of text showing the temperature. I would like it to be blue up to 18 degrees, white from 19 to 27, and red from 28. Can you do something like that?

[mzimmers]

@Darq if I understand your question, that's straightforward: just make the color property dependent on the temperature. You'd use 2 trinary operators for this.

[Darq]

@mzimmers Can you please give an example?

[mzimmers]

@Darq something like this:

    Rectangle {
        id: rect
        property real temperature // assign something to this
        color: rect.temperature < 19 ? 'blue' : rect.temperature < 28 ? 'white' : 'red'
    }

[Darq]

A question from another department, namely, maybe someone will know. I have an installation package and I want the system to reset after 15 seconds from starting its installation. Would anyone have an idea for this?

item1 = XXXXX
Open1 = XXXXX
Options = Autoinstall

[mzimmers]

@Darq given how different that question is from your original, it's better to put it in its own topic. More people may react to the new title.

In the meantime, if we've answered your original question, please mark it as solved. Upvoting the correct answer(s) is entilrely optional.