import QtQuick 2.2

Item {
    width: 360
    height: width

    SequentialAnimation {
        running: true
        loops: Animation.Infinite
        NumberAnimation { target: innerItem; property: "width"; from: 50; to: 300; duration: 1500; easing: Easing.OutQuad}
        NumberAnimation { target: innerItem; property: "width"; from: 300; to: 0; duration: 1800; easing: Easing.OutQuad}
        NumberAnimation { target: innerItem; property: "width"; from: 0; to: 50; duration: 300; easing: Easing.OutQuad}
    }

    Rectangle {
        id: innerItem

        width: 50
        height: width
        anchors.centerIn: parent
        border.color: "purple"
        border.width: 2
        color: "lightsteelblue"

        Canvas {
            id: canvas
            anchors.fill: parent

            onPaint: {
                var ctx = canvas.getContext("2d")
                ctx.lineWidth = 10
                ctx.strokeStyle = "red"
                ctx.clearRect(0, 0, width, height)
                ctx.beginPath()
                ctx.moveTo(0, 0)
                ctx.lineTo(width, height)
                ctx.moveTo(0, height)
                ctx.lineTo(width, 0)
                ctx.stroke()
            }
        }
    }
}