Pulsating Cursor with QML

Article Metadata

---

Article

Created: axeljaeger (30 Nov 2010)

Last edited: hamishwillee (24 Jul 2012)

Everyone nowadays wants animated user interfaces. Why not provide an upgrade to one of the oldest animations in user interfaces: The blinking text cursor!

Qt Quick's Text Input allows setting an arbitrary component as cursor by setting the cursorDelegate property. The only thing missing is a suitable cursor component. In this example, we just use a small rectangle with an animation:

    Component {
        id: cursor
        Rectangle {
            id: cursor_rect
            width: 1
            height: 20
            color: "black"
 
            PropertyAnimation on opacity  {
                easing.type: Easing.OutSine
                loops: Animation.Infinite
                from: 0
                to: 1.0
                duration: 1000
            }
        }
    }

Because a screenshot would be rather boring, just download the whole example: File:Pulsatingcursor.txt. You will have to rename to file to have qml as extension because the wiki does not allow to upload qml files.