Animating widget properties using animators

In this recipe, we will learn how to animate the properties of our GUI widgets using the animator feature provided by QML.

How to do it…

  1. Create a rectangle object and add a scale animator to it:
    Rectangle {
  id: myBox;
  width: 50;
  height: 50;
  anchors.horizontalCenter: parent.horizontalCenter;
  anchors.verticalCenter: parent.verticalCenter;
  color: "blue";

  ScaleAnimator {
    target: myBox;
    from: 5;
    to: 1;
    duration: 2000;
    running: true;
  }
}
  2. Add a rotation animator and set the running value in the parallel animation group, but not in any of the individual animators:
    ParallelAnimation {
  ScaleAnimator {
    target: myBox;
    from: 5;
    to: 1;
    duration: 2000;
  }
  RotationAnimator {
    target: myBox;
    from: 0;
    to: 360;
    duration: 1000;
  }
  running: true;
}
  3. Add an easing curve to the scale animator:
    ScaleAnimator {
  target: myBox;
  from: 5;
  to: 1;
  duration: 2000;
  easing.type: Easing.InOutElastic;
  easing.amplitude: 2.0;
  asing.period: 1.5;
  running: true;
}

How it works...

The animator type can be used just like any other animation type. We want to scale a rectangle from a size of 5 to a size of 1 within 2,000 milliseconds (2 seconds).

We created a blue Rectangle object and added a scale animator to it. We set the initial value to 5 and the final value to 1. Then, we set the animation duration to 2000 and set the running value to true so that it will be played when the program starts.

Just like the animation types, animators can also be put into groups (that is, parallel animation groups or sequential animation groups). An animation group will also be treated as an animator by QtQuick and be run on the scene graph's rendering thread whenever possible.

In Step 2, we want to group two different animators into a parallel animation group so that they run together at the same time.

We will keep the scale animator we have created previously and add another rotation animator to rotate the Rectangle object. This time, set the running value in the parallel animation group, but not in any of the individual animators.

Just like the C++ version, QML also supports easing curves and they can be easily applied to any of the animations or animator types.

There is something called animator in QML, which is similar but different from the ordinary animation type. Animator types are a special type of animation that operate directly on Qt Quick's scene graph, rather than the QML objects and their properties like regular animation types do.

The value of the QML property will be updated after the animation has finished. However, the property is not updated while the animation is running. The benefits of using the animator type is that the performance is slightly better because it doesn't run on the UI thread, but operates directly on the scene graph's rendering thread.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.137.183.10