Evgenii Legotckoi
Evgenii Legotckoi4 января 2016 г. 21:41

QML - Урок 022. Анимация клика по элементу списка в стиле Material Design

QML не предоставляет анимацию взаимодействий кликов в стиле Material Design для Android по умолчанию, но это легко настраивается с помощью примитивов Rectangle. Анимация заключается в том, чтобы в одном родительском объекте Rectangle, при клике, необходимо второй дочерний объект Rectangle растянуть на всю область родительского. При этом дочерний объект будет растягиваться в течении определённого времени и выглядеть будет как расширяющийся круг, но при этом он не будет выходить за пределы родительского объекта.

Для наглядности создадим список элементов, по которым будем производить клики. Для отслеживания кликов будет использоваться область MouseArea, в которой будет отслеживаться несколько сигналов взаимодействия:

  • onClicked - в данном сигнале будет останавливаться анимация и выполняться результат взаимодействия со списком;
  • onPressed - при сигнале нажатия необходимо запустить анимацию, с предварительной установкой координат анимируемого объекта Rectangle.
  • onReleased - при отпускании элемента списка необходимо остановить анимацию;
  • onPositionChanged - при смене позиции области также необходимо остановить анимацию.

Для выполнения анимации используется объект PropertyAnimation. В данном объекте выбирается цель анимации, и список свойств, которые будут подвергаться изменению. В случае с анимируемым объектом Rectangl, необходимо расширять его как круг, для этого увеличиваем его свойства width, height и radius с одной и той же величиной. А для того, чтобы полностью заполнить родительский объект, выставим конечную величину свойств в три раза большую, чем ширина родительского элемента.

Также важным свойством родительского элемента является:

clip - активируя данное свойство ( true ), Мы обрезаем дочерние элементы объекта, чтобы они не выходили за границы родительского элемента.


Анимация клика - реализация в коде

import QtQuick 2.5
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    /* Создадим список с несколькими элементами,
     * по которым будет производитсья анимированный клик
     * */
    ListView {
        anchors.fill: parent

        // В объекте находится ...
        delegate: Item {
            height: 48
            anchors.left: parent.left
            anchors.right: parent.right

            // ... прямоугольный фон,
            Rectangle {
                id: body
                anchors.fill: parent
                color: "white"
                // дочерние объекты будут обрезаться по области данного родительского элемента
                clip: true

                /* ... в котором находится другой фон, который будет
                 * анимированным кругом клика
                 * */
                Rectangle {
                    id: colorRect
                    height: 0
                    width: 0
                    color: "#e8e8e8"

                    /* Свойство трансформации, в котором будут пересчитываться
                     * стартовые координаты, чтобы был круг в центре клика
                     * */
                    transform: Translate {
                        x: -colorRect.width / 2
                        y: -colorRect.height / 2
                    }
                }

                // Надпись в элементе списка
                Text {
                    text: fragment
                    anchors.left: parent.left
                    anchors.leftMargin: 72
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    font.pixelSize: 14

                    renderType: Text.NativeRendering
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }

                // Область клика по элементу
                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        circleAnimation.stop()
                    }
                    onPressed: {
                        /* При нажатии на элемент выставляем стартовые координаты
                         * фона для анимации круга в элементе
                         * */
                        colorRect.x = mouseX
                        colorRect.y = mouseY
                        // Запускаем анимацию
                        circleAnimation.start()
                    }
                    onReleased: circleAnimation.stop()
                    onPositionChanged: circleAnimation.stop()
                }

                // Анимация свойств
                PropertyAnimation {
                    id: circleAnimation
                    target: colorRect   // Целью задаём круговой фон
                    properties: "width,height,radius" // В анимации изменяем высоту, ширину и радиус закругления
                    from: 0             // Изменяем параметры от о пикселей ...
                    to: body.width*3    // ... до тройного размера ширины элемента списка
                    duration: 300       // в течении 300 милисекунд

                    // По остановке анимации обнуляем высоту и ширину анимированного фона
                    onStopped: {
                        colorRect.width = 0
                        colorRect.height = 0
                    }
                }
            }
        }
        model: listModel
    }

    // Модель списка с элементами
    ListModel {
        id: listModel

        ListElement {fragment: qsTr("1-й Фрагмент")}
        ListElement {fragment: qsTr("2-й Фрагмент")}
        ListElement {fragment: qsTr("3-й Фрагмент")}
        ListElement {fragment: qsTr("4-й Фрагмент")}
        ListElement {fragment: qsTr("5-й Фрагмент")}
        ListElement {fragment: qsTr("6-й Фрагмент")}
        ListElement {fragment: qsTr("7-й Фрагмент")}
    }
}

Видеоурок

Результат анимации в стиле Material Design не является полностью идентичным тому, что должно быть, но показывает основную идею. Демонстрацию работы Вы можете увидеть в видеоуроке.

Рекомендуем хостинг TIMEWEB
Рекомендуем хостинг TIMEWEB
Стабильный хостинг, на котором располагается социальная сеть EVILEG. Для проектов на Django рекомендуем VDS хостинг.

Вам это нравится? Поделитесь в социальных сетях!

Комментарии

Только авторизованные пользователи могут публиковать комментарии.
Пожалуйста, авторизуйтесь или зарегистрируйтесь
Ua

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

  • Результат:84баллов,
  • Очки рейтинга4
Ua

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

  • Результат:42баллов,
  • Очки рейтинга-8
ОК

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

  • Результат:47баллов,
  • Очки рейтинга-6
Последние комментарии
ИМ
Игорь Максимов22 ноября 2024 г. 21:51
Django - Урок 017. Кастомизированная страница авторизации на Django Добрый вечер Евгений! Я сделал себе авторизацию аналогичную вашей, все работает, кроме возврата к предидущей странице. Редеректит всегда на главную, хотя в логах сервера вижу запросы на правильн…
Evgenii Legotckoi
Evgenii Legotckoi31 октября 2024 г. 23:37
Django - Урок 064. Как написать расширение для Python Markdown Добрый день. Да, можно. Либо через такие же плагины, либо с постобработкой через python библиотеку Beautiful Soup
A
ALO1ZE19 октября 2024 г. 17:19
Читалка fb3-файлов на Qt Creator Подскажите как это запустить? Я не шарю в программировании и кодинге. Скачал и установаил Qt, но куча ошибок выдается и не запустить. А очень надо fb3 переконвертировать в html
ИМ
Игорь Максимов5 октября 2024 г. 16:51
Django - Урок 064. Как написать расширение для Python Markdown Приветствую Евгений! У меня вопрос. Можно ли вставлять свои классы в разметку редактора markdown? Допустим имея стандартную разметку: <ul> <li></li> <li></l…
d
dblas55 июля 2024 г. 20:02
QML - Урок 016. База данных SQLite и работа с ней в QML Qt Здравствуйте, возникает такая проблема (я новичок): ApplicationWindow неизвестный элемент. (М300) для TextField и Button аналогично. Могу предположить, что из-за более новой верси…
Сейчас обсуждают на форуме
f
firstlunoxod15 февраля 2025 г. 13:46
Рисование на QGraphicsScene при зажатой кнопке мыши Подскажите, пожалуйста! Как данный класс можно дополнить, чтобы созданные объекты можно было перемещать мышкой по сцене?
Дмитрий
Дмитрий3 февраля 2025 г. 16:24
Создание deb-пакета. Как создать ярлык на рабочем столе после установки собственного deb-пакета? Всем привет. Сделал свой deb-пакет с программой. Всё устанавливается и работает. Ставлю по пути /usr/bin/my_application. Как для пользователя при установке пакета сразу создать ярлык на раб…
NW
Nayo Wai30 января 2025 г. 19:22
не запускается компьютер!!! Не запускается компьютер (точнее работает блок , но сам монитор вообще жесть)В общем я ничего с интернета не скачивала в последнее время. На компе никаких левых пр…
n
nkly3 января 2025 г. 12:52
Нужно запретить перемещение только некоторых итемов, остальные перемещать можно. Вопрос решен. Узнать QModelIndex элемента на который мы перетаскиваем другой элемент, можно с помощью функции indexAt(event->position().toPoint()) представления QTreeViev вызываемой в переопр…
M
Marsel17 августа 2023 г. 0:26
OAuth2.0 через VK, получение email Спасибо большое за помощь и простите за то что отнял время своей невнимательностью.

Следите за нами в социальных сетях