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

Question

Arrow29 серпня 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

Стабільний хостинг, на якому розміщується соціальна мережа EVILEG. Для проектів на Django радимо VDS хостинг.

Підпишіться на обговорення2

Підписка на розділ99

Вам це подобається? Поділіться в соціальних мережах!

01 вересня 2018 р. 03:49

Добрый день!

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

03 вересня 2018 р. 07:30
Відповідь була позначена як рішення.

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

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

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

03 вересня 2018 р. 07:37
(відредаговано)

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

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

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

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

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

05 вересня 2018 р. 03:51
(відредаговано)

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

05 вересня 2018 р. 04:34

Спасибо!

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

flags: Qt.FramelessWindowHint | Qt.Window

Коментарі

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