QML

QML Project: Audio Wave Animation Implementation

I am sure you have seen tons of animations in applications, maybe as loading spinners or even the gifs we send as chat responses or even the smooth user interfaces that make things look “wooow”!. There are many tools for creating animated components, depending on use cases, both coming with their advantages and disadvantages.

Introduction

Let's have a look at the animation below. Quite awesome, showing a kind of wave, or audio wave, to be specific. Can be used to show the user’s microphone is turned on, like in Zoom meetings. Such animations give us sensual feedback on boring non-visual things, making the user experience (commonly abbreviated as UX) better.

Image showing original GIF adapted from twitter (X)

Can we implement it in code?

Can we? I believe everything is possible, right? The animation has 5 vertical bars that can be broken down into the following:

5 bars that animate from an original size where width and height are the same to a maximum y-value and then back to the default size.
Each bar takes a constant amount of time to animation from a default state (State 0) to max height (State 1) and back to default state (State 0), as shown in the image below.
Each animation cycle takes a constant time; let's call it T.
Each bar has a delay before starting to animate. The first bar starts immediately on each cycle, the second one after a delay of d, third one after delay of 2*d,...

Image Showing a single audio wave bar states

The wave bar animation delay

We have talked about each bar having a delay before starting to animate for a constant time, Tb. If we put it on an X-Y time scale, as shown in the image below, we should be able to calculate the delay on each bar.

Image Showing the animation bars timings for a single animation cycle

Lets define the constants we shall be working with;

Tc: Time for each cycle of animation, that is, from the audio bar initial state (State 0) till audio bar animates back to State 0.
Tb: Time each audio bar takes to animate from State 0 to State 1 and back to State 0.
d: Uniform delay before the start of each audio bar animation

Defaults

Lets assign some initial values to work with; the audio wave animation shows that each cycle (Tc) takes approximately 2 seconds (2000ms). Similarly, each audio bar animation takes 1 second (1000ms).

Calculating delay value

Recall from the image above showing a time graph of the individual bar animation start and finish times. Since Tc=2000ms, so the sum of the first 4 delays and Tb

4*d + Tb = Tc ..... (i)

4*d + 1000 = 2000

4*d = (2000 - 1000) ... (ii)

4*d = 1000d = (1000)/4d = 250 (ms)

The value of d will be a max of 250ms. For this sample, I found a value of 200ms worked best, but you are free to test along.

Let's Code

Animation Cycle

To maintain a constant animation cycle, lets make use of a Timer as shown below;

The timer runs with an interval of 2000ms, and when completed, triggers a signal. On each cycle end, we start the delay timer for each audio wave bar we have.

Audio Bar Animation

Each audio bar also has a delay timer that initiates the animation of the bar once triggered. Each bar has a different delay value depending on its index, starting from index 0 to 4 for the 5 bars. At index 0, i.e. the first audio bar, the delay is zero as the animation starts immediately with the cycle. As such, the other delay values of the subsequent bar animation start are 0, 200, 400, 600, 800 respectively.

To animate bar height, we utilize QML’s NumberAnimation component. Here, we will need to animate first from the initial height to a max height and then a second NumberAnimation to animate height from the max-y value back to the default value. Since it has to be done sequentially, then we use a SequentialAnimation component as shown in the code block below.