5.1. Animating the NoteToolbar

Let’s see how we can improve the Note Component and add a behavior based on user’s interaction. The Note Component has a toolbar with a Delete* tool for deleting the note. Moreover, the toolbar is used to drag the note around by keeping the mouse pressed on it.

An improvement could be to make the Delete tool visible only when needed. For instance, making the Delete tool visible only when the toolbar is hovered, and it would be nice to do this using fade-in and fade-out effects.

QML provides several approaches to implement this by using Animation and Transition types. In this specific case, we will use the Behavior [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-behavior.html] QML type, and later on cover the reason behind this.

5.1.1. Behavior and NumberAnimation Types

In the NoteToolbar component, we use the Row [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-row.html] type to layout the Delete* tool, so changing the opacity property of the Row [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-row.html] type will also effect the opacity of the Delete tool.

Note

The value of the opacity property is propagated from the parent to the child items.

The Behavior [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-behavior.html] type helps you define the behavior of the item based on the property changes of that item as shown in the following code:

// NoteToolbar.qml

...
MouseArea {
    id: mousearea
    anchors.fill: parent

    // setting hoverEnabled property to true
    // in order for the MouseArea to be able to get
    // hover events
    hoverEnabled: true
}

// using a Row element for laying out tool
// items to be added when using the NoteToolbar
Row {
    id: layout
    layoutDirection: Qt.RightToLeft
    anchors {
        verticalCenter: parent.verticalCenter;
        left: parent.left;
        right: parent.right
        leftMargin: 15;
        rightMargin: 15
    }
    spacing: 20

    // the opacity depends if the mousearea
    // has the cursor of the mouse.
    opacity: mousearea.containsMouse ? 1 : 0

    // using the behavior element to specify the
    // behavior of the layout element
    // when on the opacity changes.
    Behavior on opacity {
        // using NumberAnimation to animate
        // the opacity value in a duration of 350 ms
        NumberAnimation { duration: 350 }
    }
}
...

As you can see in the code above, we enable the hoverEnabled* property of MouseArea [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html] type to accept mouse hover events. Afterwards, we toggle the opacity of the Row type to 0 if the Mousearea type is not hovered and to 1 otherwise. The containsMouse [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-mousearea.html#containsMouse-prop] property of MouseArea is used to decide the opacity value for the Row type.

So the Behavior [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-behavior.html] type is created inside the Row type to define its behavior based on its opacity property. When the opacity value changes, the NumberAnimation [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-numberanimation.html] is applied.

The NumberAnimation [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-numberanimation.html] type applies an animation based on numerical value changes, so we use it for the opacity property of the Row for a duration of 350 milliseconds.

Note

The NumberAnimation type is inherited from PropertyAnimation [http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-propertyanimation.html], which has Easing.Linear as the default easing curve animation.

What’s Next?

In the next step, we will see how to implement an animation using Transition* and other QML animation types.