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

Question

Arrow29. August 2018 09:55

Анимация элементов в 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
        }
    }
}

Рекомендуємо хостинг TIMEWEB

Stabiles Hosting des sozialen Netzwerks EVILEG. Wir empfehlen VDS-Hosting für Django-Projekte.

Abonnieren Sie die Diskussion2

Sektionsabonnement99

Magst du es? In sozialen Netzwerken teilen!

1. September 2018 03:49

Добрый день!

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

3. September 2018 07:30
Die Antwort wurde als Lösung markiert.

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

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

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()
            }
        }
    }
}

3. September 2018 07:37
(bearbeitet)

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

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

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 все в порядке.

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

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

5. September 2018 03:51
(bearbeitet)

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

5. September 2018 04:34

Спасибо!

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

flags: Qt.FramelessWindowHint | Qt.Window

Kommentare

Nur autorisierte Benutzer können Kommentare posten.
Bitte Anmelden oder Registrieren