Политика конфиденциальностиКонтактыО сайтеОтзывыGitHubDonate
© 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
        }
    }
}
5

Добрый день!

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

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

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

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

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

Ответы

Только авторизованные пользователи могут отвечать на форуме.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
18 ноября 2018 г. 19:19
cyrillwork

Qt - Тест 001. Сигналы и слоты

  • Результат:78баллов,
  • Очки рейтинга2
16 ноября 2018 г. 19:09
Илья Завьялов

Qt - Тест 001. Сигналы и слоты

  • Результат:31баллов,
  • Очки рейтинга-10
16 ноября 2018 г. 12:49
Ирина Минигузина

C++ - Тест 003. Условия и циклы

  • Результат:0баллов,
  • Очки рейтинга-10
Последние комментарии
16 ноября 2018 г. 6:50
Евгений Легоцкой

Добрый день! шаблон не находит, или шаблон неправильно прописали, или тег шаблона неправильно написан, иных выводов сделать не могу, из того, что вы написали. трейсбек нужно смотреть. Со...
16 ноября 2018 г. 6:48
Евгений Легоцкой

пройтись циклом по всем виджетам в обратном порядке for (int i = ui->vertialLayout->count() - 1; i >= 0; --i){ QWidget* w = ui->verticalLyout->itemAt(i)->widget();...
15 ноября 2018 г. 21:35
chunk

Доброго времени суток Евгений. Не подскажете что я делаю не так? Получаю ошибку такого характера: Reverse for 'add_comment' with arguments '('',)' not found. 1 pattern(s) tried: ...
15 ноября 2018 г. 15:35
Михаиллл

Спасибо. Похоже где то описку сделал, поэтому не работало. Я добавил на verticalLayout много виджитов. А можно ли их как то быстро и просто удалить?
15 ноября 2018 г. 14:55
Евгений Легоцкой

verticalLayout - это, по-моему предположению, должен быть у вас объект класса QVBoxLayout, который наследован от QBoxLayout. Поэтому открываете документацию на QVBoxLayout ...
Сейчас обсуждают на форуме
18 ноября 2018 г. 18:11
Metelev

Большое спасибо, все получилось, завтра начну изучать код.
18 ноября 2018 г. 17:49
Чарльз Грин

Спасибо, буду разбераться
17 ноября 2018 г. 14:13
Чарльз Грин

Я сейчас занимаюсь мультимедией, это аудио и видео, программы для концертов и т. д. Бибилиотека Qt очень помогает, она надежная, а надежность в моих приложениях очень важный фактор чтоб не пол...
16 ноября 2018 г. 16:28
Евгений Легоцкой

Добрый день! Спасибо, что воспользовались именно форумом. Заниматься курсовыми работами чьими-то ни было у меня времени нет, у самого полторы работы. Но что-то подсказать на фо...
Присоединяйтесь к нам в социальных сетях

Для зарегистрированных пользователей на сайте присутствует минимальное количество рекламы