Evgenij LegotskojJan. 4, 2016, 9:41 a.m.

QML - Lesson 022. Animation click on an item in the list Material Design style

QML does not provide animation interactions clicks Material Design Style for Android by default, but is easily adjusted with the Rectangle primitive. Animation is to one parent, Rectangle, when clicked, you need a second child Rectangle object to stretch the entire area of the parent. At the same time the child object will stretch for a certain time and will appear as an expanding circle, but it will not go beyond its parent.

For clarity, create a list of items, which will produce clicks. To track clicks is used area MouseArea, which will be monitored by the interaction of several signals:

  • onClicked - the signal will stop the animation and the result of the interaction performed with the list;
  • onPressed - when the signal is pressing need to run an animation preset coordinates animated object Rectangle.
  • onReleased - you need to stop the animation when you release the list item;
  • onPositionChanged - when you change the position of the field also need to stop the animation.

To make the animation used PropertyAnimation object. This site is chosen goal of animation, and a list of properties that will be subject to change. In the case of animatable object Rectangl, it is necessary to expand the circle, for that increase the properties width, height and radius with the same value. In order to completely fill the parent object properties will exhibit a finite amount three times greater than the width of the parent element.

Another important property is the parent element:

clip - activating this property (true), we cut the child elements of the object, so that they do not go beyond the boundaries of the parent element.

Click Animation - Implementation of the code

import QtQuick 2.5
import QtQuick.Controls 1.4

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

    /* Create a list with several items, which will be animated click
     * */
    ListView {
        anchors.fill: parent

        // In the object ...
        delegate: Item {
            height: 48
            anchors.left: parent.left
            anchors.right: parent.right

            // ... rectangular background locates,
            Rectangle {
                id: body
                anchors.fill: parent
                color: "white"
                // child objects will be cut over the area of the parent element
                clip: true

                /* ... which is a different background, which will be animated circle clique
                 * */
                Rectangle {
                    id: colorRect
                    height: 0
                    width: 0
                    color: "#e8e8e8"

                    /* Property transformation, which will be recalculated starting position,
                     * that there was a circle in the center of the click
                     * */
                    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
                }

                // Area click on the item
                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        circleAnimation.stop()
                    }
                    onPressed: {
                        /* When you click on an element exhibiting the starting coordinates 
                         * of the background for the animation range in element
                         * */
                        colorRect.x = mouseX
                        colorRect.y = mouseY
                        // Запускаем анимацию
                        circleAnimation.start()
                    }
                    onReleased: circleAnimation.stop()
                    onPositionChanged: circleAnimation.stop()
                }

                PropertyAnimation {
                    id: circleAnimation
                    target: colorRect   // The aim Asking circular background
                    properties: "width,height,radius" // In animation, change the height, width and radius
                    from: 0             // Change the settings from 0 pixels ...
                    to: body.width*3    // ... to triple the size of the width of the item in the list
                    duration: 300       // within 300 milliseconds

                    // By stopping the animation zero out the height and width of an animated background
                    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-й Фрагмент")}
    }
}

Video

Result Material Design animations in the style is not completely identical to what should be, but it shows the basic idea. Demonstration of work you can see in the video tutorial.

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

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

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting
V
  • Vitreg
  • Oct. 26, 2020, 1:35 a.m.

C++ - Test 001. The first program and data types

  • Result:73points,
  • Rating points1
V
  • Vitreg
  • Oct. 26, 2020, 1:23 a.m.

C++ - Test 005. Structures and Classes

  • Result:83points,
  • Rating points4
K
  • Kanes
  • Oct. 25, 2020, 8:42 a.m.

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:60points,
  • Rating points-1
Last comments
S

QML - Lesson 026. Intents with Qt for Android, part 1

Есть ли возможность приведения java типа у QAndroidJniObject? Интересует конкретно class to
VK

Qt/C++ - Lesson 015. QTableWidget – How to create a table with checkboxes?

Кто-нибудь знает, как сделать так, чтобы в QTableWidget состоящей из чекбоксов в строке таблицы можно было выбрать только один checkbox ?

Qt/C++ - Lesson 006. QSqlQueryModel – Tables in Qt with SQL-query

QSqlTableModel выполняет ряд стандартных операций для одной таблицы из базы данных. Поэтому там и реализован функционал по удалению и редактированию. QSqlQueryModel позволяет выполнить запр…
VB

Qt/C++ - Lesson 006. QSqlQueryModel – Tables in Qt with SQL-query

Добрый день. Хотел спросить вот что. Создал проект на основе QAbstractTableModel. В MainWindow cоответственно создал модель и связал с представлением. Поиск веду по списку элементов модели,…

QCheckBox в качестве делегата QTableView

До тех пор, пока у вас проект содержит только одну таблицу, или несколько то может быть. Когда их будет 1000 и чекбоксы в разных колонках, то без делегатов и переопределения возвращаемых ре…
Now discuss on the forum

QSqlTableModel - Как добавить картинки в таблицу, чтобы они отражались в диалоговом окне, но не были частью модели

Ну тогда в этом столбце указывайте пути на несколько картинок
u
  • ubomj
  • Oct. 27, 2020, 9:34 a.m.

Создание черновика как на авито и тд

Ну пользователь я думаю не настроен будет жмакать кнопку создать черновик, потом продолжать заполнять... А черновик в свою очередь нужен пока только для получения id, который нужен для муль…

QGraphicItems объекты

спасибо
  • BlinCT
  • Oct. 24, 2020, 6:14 a.m.

Открытие файла и чтение данных из него по средством башевского запроса

И так же интересно как в случаи чтения из потока таким путем можно узнавать об окончании файла?
KM

Qt анимация диалога c++

Хочу сдедать диалог который будет выпадать с помощью анимации Анимация готова но я не знаю как попровать ее так чтобы мой диалог выезжал с верху на центр, при закрытии диалог заезжает навер…
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB