Time for action – animating the car dashboard

Let's employ the knowledge we just learned to improve our car dashboard so that it shows some realism in the way the clocks update their values.

Open the dashboard project and navigate to the dashboard.qml file. Find the declaration of the Needle object, which is responsible for visualizing the speed of the vehicle. Add the following declaration to the object:

Behavior on rotation {
  SmoothedAnimation { velocity: 50 }
}

Repeat the process for the left clock. Set the velocity of the animation to 100. Build and run the project. See how the needles behave when you modify the parameter values in spinboxes. Adjust the velocity of each animation until you get a realistic result.

What just happened?

We have set the property value sources on needle rotations that are triggered whenever a new value for the property is requested. Instead of immediately accepting the new value, the Behavior element intercepts the request and starts the SmoothedAnimation...