Time for action – animating the sun's horizontal movement

The everyday cruise of the sun in the sky starts in the east and continues west to hide beneath the horizon in the evening. Let's try to replicate this horizontal movement by adding animation to our sun object.

Open the QML document of our last project. Inside the root item add the following declaration:

NumberAnimation {
  target: sun
  property: "x"
  from: 0
  to: root.width
  duration: dayLength
  running: true
}

Running the program with such modifications will produce a run with a horizontal movement of the sun. The following image is a composition of a number of frames of the run:

What just happened?

We introduced a NumberAnimation element that is set to animate the x property of the sun object. The animation starts at 0 and lasts until x reaches the root item's width (which is the right edge of the scene). The movement lasts for dayLength miliseconds. The running property of the animation is set...