Анимация элементов в QML

Question

ArrowAug. 29, 2018, 9:55 a.m.

Анимация элементов в QML

Animation, QML

Добрый день!

Пытаюсь сделать анимацию прямоугольника (служит стилизированой кнопкой) при нажатии на него мышкой.

Все отображается корректно, клик по MouseArea отрабатывает, только анимации не происходит.

Сделал по примеру из документации.

Вот код файла MenuButton.qml:

import QtQuick 2.10

Item {
    property string itemText: "Text"
    property int fontSize: 18
    property int itemHeight: 40
    property int itemWidth: 100

    height: itemHeight
    width: itemWidth

    Rectangle {
        id: rect
        anchors.fill: parent
        color: "#0b1160"
        gradient: Gradient {
            GradientStop {
                position: 0.47
                color: "#0b1160"
            }
            GradientStop {
                position: 1.00
                color: "#ffffff"
            }
        }
        border.color: "#1313af"
        border.width: 1

        Text {
            anchors.centerIn: rect
            text: itemText
            font.pixelSize: fontSize
            color: "white"
        }

        states: State {
            name: "clicked"
            when: mouseArea.pressed
            PropertyChanges { target: rect; x: 50; y: 50 }
        }

        transitions: Transition {
           NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
        }

        MouseArea {
            id: mouseArea
            anchors.fill: rect
            onClicked: console.log(itemText)
        }
    }
}

Код main.qml:

import QtQuick 2.10
import QtQuick.Window 2.10

Window {
    id: root
    visible: true
    width: Screen.width-500
    height: Screen.height-300
    title: qsTr("Test")

    Image {
        source: "qrc:/pict/background.jpg"
        anchors.fill: parent
    }

    Row {
        x: 0
        y: 0
        width: root.width
        spacing: 2

        MenuButton {
            id: optimizeBtn
            itemText: qsTr("Меню 1")
            itemWidth: parent.width/5 - parent.spacing
        }

        MenuButton {
            id: quickBtn
            itemText: qsTr("Меню 2")
            itemWidth: parent.width/5 - parent.spacing
        }

        MenuButton {
            id: protectionBtn
            itemText: qsTr("Меню 3")
            itemWidth: parent.width/5 - parent.spacing
        }

        MenuButton {
            id: toollBtn
            itemText: qsTr("Меню 4")
            itemWidth: parent.width/5 - parent.spacing
        }

        MenuButton {
            id: actionsBtn
            itemText: qsTr("Меню 5")
            itemWidth: parent.width/5 - parent.spacing
        }
    }
}

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion2

Section subscription99

Do you like it? Share on social networks!

Sept. 1, 2018, 3:49 a.m.

Добрый день!

У меня сейчас нет под рукой компьютера, чтобы проверить, как это должно работать, но есть подозрение, что вам нужно описать два состояния в свойстве states. И если не ошибаюсь, то в качестве states идёт array этих состояний

Sept. 3, 2018, 7:30 a.m.
The answer was marked as a solution.

Спасибо за помощь!

Да необходимо было описать два состояния и запускается анимация немного по другому.

SequentialAnimation {
            id: anim
            NumberAnimation {
                target: rect
                properties: "opacity"
                from: startOpacity
                to: 0.4
                duration: 80
            }


            NumberAnimation {
                target: rect
                properties: "opacity"
                from: 0.4
                to: 0.8
                duration: 80
            }
        }
......................
anim.running = true            // Запуск анимации

Рабочий вариант:

import QtQuick 2.10

Item {
    property string itemText: "Text"
    property int fontSize: 18
    property int itemHeight: 40
    property int itemWidth: 100

    signal mouseClick

    height: itemHeight
    width: itemWidth

    Rectangle {
        id: rect
        anchors.fill: parent
        color: "#0b1160"
        gradient: Gradient {
            GradientStop {
                position: 0.47
                color: "#0b1160"
            }
            GradientStop {
                position: 1.00
                color: "#ffffff"
            }
        }
        border.color: "#1313af"
        border.width: 1

        Text {
            anchors.centerIn: rect
            text: itemText
            font.pixelSize: fontSize
            color: "white"
        }

        SequentialAnimation {
            id: anim
            NumberAnimation {
                target: rect
                properties: "opacity"
                from: 1.0
                to: 0.6
                duration: 80
            }

            NumberAnimation {
                target: rect
                properties: "opacity"
                from: 0.6
                to: 1.0
                duration: 80
            }
        }
        
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
            onClicked: {
                anim.running = true
                mouseClick()
            }
        }
    }
}

Sept. 3, 2018, 7:37 a.m.
(edited)

И такой вопрос не по теме:

Убрал системное обрамление у окна:

import QtQuick 2.10
import QtQuick.Window 2.10

Window {
    id: root
    visible: true
    width: Screen.width-500
    height: Screen.height-300
    minimumWidth: 1250
    minimumHeight: 750
    flags: Qt.FramelessWindowHint

    property int previousX
    property int previousY

    Image { // Фон
        source: "qrc:/pict/background.jpg"
        anchors.fill: parent
    }

..................................................................
/* Описание перетаскивания и изменение размеров окна */
..................................................................
}

и теперь в Windows 7 запущенное приложение не отображается на панели задач. В Debian Linux все в порядке.

Реализацию изменения размеров окна и его перетаскивания делал по Вашему уроку (Спасибо!).

Это глюк или я что-то не то сделал?

Sept. 5, 2018, 3:51 a.m.
(edited)

Там за иконку таскбара отвечает какой-то из флагов. Когда вы отключаете обрамление, вы перезаписываете все флаги которые там существуют, оставляя только флаг отключения обрамления. Видимо под линуксом это работает иначе, чем под виндовс. Нужно либо найти этот флаг, почитать документацию внимательно, либо сохранить все предыдущие флаги и добавить в них флаг отключения обрамления. Мне было лень читать документацию, поэтому я пошёл вторым путём :D

import QtQuick 2.10
import QtQuick.Window 2.10

Window {
    id: root
    visible: true
    width: Screen.width-500
    height: Screen.height-300
    minimumWidth: 1250
    minimumHeight: 750
    flags: root.flags |  Qt.FramelessWindowHint
}

Arrow → Evgenii Legotckoi
#

Sept. 5, 2018, 4:34 a.m.

Спасибо!

Покопался и нашел такое:

flags: Qt.FramelessWindowHint | Qt.Window

Comments

Only authorized users can post comments.
Please, Log in or Sign up