© EVILEG 2015-2018
Рекомендует хостинг
TIMEWEB
29 августа 2018 г. 13: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
        }
    }
}

Добрый день!

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

Для Django рекомендую VDS-хостинг TIMEWEB

  • #
  • Ответ был помечен как решение
  • 3 сентября 2018 г. 11: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()
            }
        }
    }
}
  • #
  • 3 сентября 2018 г. 11: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 все в порядке.
Реализацию изменения размеров окна и его перетаскивания делал по Вашему уроку (Спасибо!).
Это глюк или я что-то не то сделал?

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

Для Django рекомендую VDS-хостинг TIMEWEB

Спасибо!
Покопался и нашел такое:
flags: Qt.FramelessWindowHint | Qt.Window

Ответы

Только авторизованные пользователи могут отвечать на форуме.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
24 сентября 2018 г. 17:42
edorofeeva

C++ - Тест 001. Первая программа и типы данных

  • Результат 100баллов,
  • Очки рейтинга10
24 сентября 2018 г. 17:37
edorofeeva

C++ - Тест 001. Первая программа и типы данных

  • Результат 66баллов,
  • Очки рейтинга-1
23 сентября 2018 г. 14:38
No Names

C++ - Тест 001. Первая программа и типы данных

  • Результат 60баллов,
  • Очки рейтинга-1
Последние комментарии
25 сентября 2018 г. 15:24
pasagir

Qt/C++ - Урок 006. QSqlQueryModel - Таблицы в Qt с помощью SQL-запросов

Это запись метода которая работает параллельно с БД, данные из парсера поступают в БД и в наш метод одновременно
25 сентября 2018 г. 14:56
pasagir

Qt/C++ - Урок 006. QSqlQueryModel - Таблицы в Qt с помощью SQL-запросов

Как можно динамически отображать данные в таблице? На COM-порт непрерывно приходят данные, я их принимаю сохраняю в БД, а после остановка приема/передачи данные отображаются в таблице. В табли...
25 сентября 2018 г. 10:43
Евгений Легоцкой

Qt/C++ - Урок 017. QGraphicsScene или как работать с графикой в Qt

Прямо так не написано. Хотя соглашусь, что в качестве улучшения вызов данного метода здесь к месту.
25 сентября 2018 г. 10:37
reef425

Qt/C++ - Урок 017. QGraphicsScene или как работать с графикой в Qt

В статье написано, что таймер сработает один раз. Но это не так. Было бы хорошо добавить timer->setSingleShot(true); После инициализации таймера.
24 сентября 2018 г. 15:09
Евгений Легоцкой

Qt Linux - Урок 001. Автозапуск Qt приложения под Linux

А вот здесь у меня есть пример использования supervisor. https://evileg.com/ru/post/3/ Вся статья вам там не интересна, интересен только шаг с настройкой supervisor. Он получается ...
Сейчас обсуждают на форуме
25 сентября 2018 г. 15:57
Евгений_Канусовский@1981

Чтение файлов в python

Вот код: import sys from re import matchfrom vira import *from PyQt5 import QtCore, QtGui, QtWidgetsfrom PyQt5.QtWidgets import (QDialog, QFileDialog, QMessageBox, QLineEdit, QProgr...
25 сентября 2018 г. 13:51
DmitrySD

Трансляция видео с помощью VLC по RTP

Спасибо! Данная команда не дала результата. В итоге сделал трансляцию через ffmpeg. ffmpeg.exe -f gdigrab -framerate 30 -i desktop -vcodec libx264 -preset:v veryfast -b:v 4000k -f...
25 сентября 2018 г. 13:39
Arrow

Настройка Qt Creator для Android

Конечно отпишусь.
25 сентября 2018 г. 12:22
avovana

Автозапуск и авторестарт Qt Gui Application в Linux

Не получается... Решил пробовать скрипт, выполняемый при загрузке. В скрипте вечный цикл по старту программы.
Присоединяйтесь к нам в социальных сетях