DropletSpinnerWidget

Two-droplet spinner rendered with cubic Bezier paths.

Detailed description

Renders two filled "droplet" shapes that share a single color, so that whenever they overlap they read as a single shape. The visual is fully driven by three animatable Q_PROPERTYs:

• rotation — scene rotation around the midpoint (degrees)
• sizeBalance — 0 = left dot infinitely small, right at 2x; 0.5 = both equal size; 1 = mirror of 0
• meld — 0 = two perfectly separate circles; 1 = fully melded pill-like single shape

Drive these properties via QPropertyAnimation to compose rotation, wobble, and meld-and-empty animations.

Property documentation

color property

color : QColor

This property holds the fill color of the two droplets.

The two droplets use one color, so where they overlap they look like one shape. A change emits colorChanged() and repaints the widget. The default is a light blue, RGB (58, 169, 255).

Access functions:

• QColor color() const
• void setColor(const QColor &color)

Notifier signal:

• void colorChanged(const QColor &)

meld property

meld : qreal

how much the two droplets join, from 0.0 to 1.0.

At 0 the droplets are two separate circles. At 0.5 they touch at one point. At 1 they make one pill shape, whose straight edges are the outer tangents of the two circles. When one droplet is very small, the widget paints no meld. A value outside the range is clamped. A change emits meldChanged() and repaints the widget. The default is 0.

Access functions:

• qreal meld() const
• void setMeld(qreal meld)

Notifier signal:

• void meldChanged(qreal)

rotation property

rotation : qreal

This property holds the rotation of the two droplets around their midpoint, in degrees.

The value is not limited to a range. A change emits rotationChanged() and repaints the widget. The default is 0.

Access functions:

• qreal rotation() const
• void setRotation(qreal degrees)

Notifier signal:

• void rotationChanged(qreal)

sizeBalance property

sizeBalance : qreal

This property holds the size of the left droplet relative to the right droplet, from 0.0 to 1.0.

At 0.5 the two droplets have the same radius. At 0 the left droplet has no size and the right droplet has twice the radius. At 1 the sizes are the opposite. The radii change linearly between these points. A value outside the range is clamped. A change emits sizeBalanceChanged() and repaints the widget. The default is 0.5.

Access functions:

• qreal sizeBalance() const
• void setSizeBalance(qreal balance)

Notifier signal:

• void sizeBalanceChanged(qreal)