Grab/main.qml

import QtQuick 2.11
import QtQuick.Window 2.11
import QtGraphicalEffects 1.0

Window {
    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    QtObject{
        id: d

        property int screenCount: 0
        property var images: []
    }

    Item{
        id: source
        width:  parent.width
        height: parent.height

        // Simple Animation

        Rectangle{
            id: rect

            width: 20
            height: 20
            x: 10
            y: 10

            color: "black"
            radius: width
            visible: true
        }

        SequentialAnimation{
            id: moveAnimation
            running: true
            loops: Animation.Infinite
            PropertyAnimation{target: rect; property: "x"; from: 10; to: source.width - rect.width - 10; duration: 1500; easing.type: Easing.OutCirc}
            PropertyAnimation{target: rect; property: "y"; from: 10; to: source.height - rect.height - 10; duration: 1000/*; easing.type: Easing.OutCirc*/}
            PropertyAnimation{target: rect; property: "x"; from: source.width - rect.width - 10; to: 10; duration: 1000/*; easing.type: Easing.OutCirc*/}
            PropertyAnimation{target: rect; property: "y"; from: source.height - rect.height - 10; to: 0; duration: 1000/*; easing.type: Easing.OutCirc*/}
        }


        Image {
            id: img
            anchors.fill: parent
            mipmap: true
            asynchronous: true
            visible: false
        }

        MouseArea{
            anchors.fill: parent
            onClicked: {
                timeToScreenShoot.stop()
                moveAnimation.stop()
                rect.visible = false
                img.visible = true
                timeToAnimate.start()
            }
        }


//        Rectangle{
//            id: rect
//            width: parent.width
//            height: parent.height
//            color: "#49cc19"

//            Rectangle{
//                id: btn
//                anchors.centerIn: parent
//                width: parent.width / 2
//                height: parent.height / 2
//                radius: width / 3
//                Text {
//                    id: btnText
//                    text: qsTr("Yo!")
//                    font.pointSize: 40
//                    color: "black"
//                    anchors.centerIn: parent
//                }

//                MouseArea{
//                    id: mouseArea
//                    anchors.fill: parent
//                    onPressed: {
//                        btn.scale = 0.9
//                        btnShadow.scale = 0.9
//                        btnText.text = "Clicked"
//                    }

//                    onReleased: {
//                        btn.scale = 1
//                        btnShadow.scale = 1
//                        btnText.text = "Yo!"
//                    }
//                }
//            }

//            DropShadow{
//                id: btnShadow
//                anchors.fill: btn
//                horizontalOffset: 3
//                verticalOffset: 13
//                radius: 8.0
//                samples: 17
//                color: "#80000000"
//                source: btn
//            }
//        }

    }

    ShaderEffectSource{
        id: sourceShader
        visible: false // Do not render it (will only be rendered when called grapToImage()
        sourceItem: source
        width: source.width
        height: source.height
        live: false // Will only be updated, when explicitly called for

        function save() {
            scheduleUpdate() // explicitly update. grabToImage() will force rendering afterwards.
            sourceShader.grabToImage(function(result) {
                            d.images.push(result)
                        })
        }
    }

    Timer{
        id: timeToScreenShoot
        interval: 25
        repeat: true
        running: true
        onTriggered: {
//            sourceShader.save()
            source.grabToImage(function(result) {
                            d.images.push(result)
                        })
        }
    }

    Timer{
        id: timeToAnimate

        property int current: 0

        interval: 25
        repeat: true
        running: false

        onTriggered: {
            if(current > d.images.length) current = 0
            img.source = d.images[current++].url
        }

    }
}