CODEWITHSUNDEEP
qtqmlembedded-linux
Nandish Sg
Nandish Sg

Reputation: 9

How to Change the image state(or do some animation) without using the Mouse or Keyboard event

i am new to the qt/qml app world, i want do the some animation activity in qml without using the mouse or keyboard event,say example i am getting the input data from external device through serial port and displaying the data on LCD using image,but i need change the action on image like rotating or flipping the image when data is changed,can any one help me how to do, please see the following link for flipable the image by clicking on the mouse, http://doc.qt.io/archives/qt-4.8/qml-flipable.html for rotating the image link is : https://kunalmaemo.blogspot.in/2011/03/flipping-rotating-view-animation-in-qml.html

BR SGN

Upvotes: 0

Views: 751

Answers (1)

folibis
folibis

Reputation: 12874

Welcome to SO. First of all please read How do I ask a good question?. In the future you should avoid question "why isn't this code working?" or "how to do ...". Learn, research, try to write good code and so come back to SO if you're having trouble.

Second, you should start from QML book. This should give you all the necessary knowledge about QML.

As for your question, try the following:

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    id: window
    title: "Test"
    visible: true
    width: 400
    height: 400

    Image {
        id: img
        source: "http://placeimg.com/200/200/nature"
        width: 200
        height: 200
        anchors.centerIn: parent
        rotation: 0
        onStatusChanged: {
            if(img.status == Image.Ready) {
                console.log("image loaded")
                timer.running = true;
            }
        }
    }
    PropertyAnimation {
        id: anim
        target: img
        property: "rotation"
        from: 0
        to: 360
        duration: 2000
        easing.type: Easing.OutBounce
    }
    Timer {
        id: timer
        interval: 3000
        onTriggered: {
            console.log("timer triggered")
            anim.running = true;
        }
    }
}

After the image has loaded the changed status starts up the timer, which in turn starts the animation which animates rotation property.

Upvotes: 1

Related Questions