animation

import QtQuick 2.0
import QtQuick.Layouts 1.3

Item {
    id: global
    state: "SomeText2"

    QtObject {
        id: __data

        readonly property real normalFontSize: 12
        readonly property real bigFontSize: 18
        readonly property int animationDuration: 200
    }

    ColumnLayout {

    RowLayout {
        spacing: 5
        id: modes
        Text {
            id: firstText
            text: "fst"
            font.pointSize: __data.normalFontSize
        }

        Text {
            id: secondText
            text: "snd"
            font.pointSize: __data.normalFontSize
        }

        Text {
            id: thirdText
            text: "third"
            font.pointSize: __data.normalFontSize
        }
    }

    Rectangle {
        color: "green"
        width: 50
        height: 50


        MouseArea {
            anchors.fill: parent

            onPressed: {
                global.state = "SomeText1"
            }
        }
    }

    Rectangle {
        color: "red"
        width: 50
        height: 50


        MouseArea {
            anchors.fill: parent

            onPressed: {
                global.state = "SomeText2"
            }
        }
    }

    Rectangle {
        color: "yellow"
        width: 50
        height: 50


        MouseArea {
            anchors.fill: parent

            onPressed: {
                global.state = "SomeText3"
            }
        }
    }
    }

    states: [
        State {
            name: "SomeText2"
            PropertyChanges {
                target: firstText
                font.pointSize: __data.bigFontSize
            }
        },
        State {
            name: "SomeText1"
            PropertyChanges {
                target: secondText
                font.pointSize: __data.bigFontSize

            }
        },
        State {
            name: "SomeText3"
            PropertyChanges {
                target: thirdText
                font.pointSize: __data.bigFontSize
            }
        }
    ]

    transitions: [
        Transition {
            from: "SomeText2"
            to: "SomeText1"
            SequentialAnimation {
              PropertyAnimation {
                  target: firstText
                  property: "font.pointSize"
                  to: __data.normalFontSize
              }
            }
        },
        Transition {
            from: "SomeText1"
            to: "SomeText2"
            SequentialAnimation {
              PropertyAnimation {
                  target: secondText
                  property: "font.pointSize"
                  to: __data.normalFontSize
                  duration: 1000
              }
              NumberAnimation {
                  target: secondText
                  duration: 1000
              }
            }
        },
        Transition {
            from: "SomeText1"
            to: "SomeText3"
            SequentialAnimation {
              PropertyAnimation {
                  target: secondText
                  property: "font.pointSize"
                  to: __data.normalFontSize
              }
            }
        },
        Transition {
            from: "SomeText3"
            to: "SomeText1"
            SequentialAnimation {
              PropertyAnimation {
                  target: thirdText
                  property: "font.pointSize"
                  to: __data.normalFontSize
              }
            }
        },
        Transition {
            from: "SomeText3"
            to: "SomeText2"
            SequentialAnimation {
              PropertyAnimation {
                  target: thirdText
                  property: "font.pointSize"
                  to: __data.normalFontSize
              }

            }
        },
        Transition {
            from: "SomeText2"
            to: "SomeText3"
            SequentialAnimation {
              PropertyAnimation {
                  target: firstText
                  property: "font.pointSize"
                  to: __data.normalFontSize
              }
            }
        }
    ]
}