Login to your Qt account
Login to your QA account
Qt Quick 2 comes with a huge number of predefined easing curves for animations. However, in Qt Quick 2 it is also possible to define custom easing curves using Cubic Bézier curves.
Bézier curves are typically used in computer graphics to model smooth curves, but they can also be used in the time domain to define easing curves. As a result, users of Qt Quick 2 are not limited by the built-in easing curves and can instead define their own custom ones. This allows users to mimic very specific physics of an animation, for example.
Whether it is the transition between screens or the behavior applied to UI controls that can be interacted with, motion has become a significant element of mobile design. Therefore it is also important to control more subtle elements of animations like easing curves.
The custom Bézier easing curve is defined as a JavaScript array of control points.
PropertyAnimation {
easing.bezierCurve: [0.43,0.0025,0.65,1,1,1]
}
Since dealing with Bézier curves in number form is very cumbersome, we wrote a small tool called qmleasing, which is part of qtdeclarative (qt5/qtdeclarative/tools).
The qmleasing tool that is part of the Qt Declarative module
In the qmleasing tool, users can define the easing curves using an interactive curve editor. An easing curve does not have to be a single Bézier curve, but can be a Bézier spline consisting of several segments. To support this, control points can be added and removed by right-clicking on a segment or control point in the tool.
The definition of the easing curve as a JavaScript array is shown on the top right and can be copied into the QML code. The easing curve can be previewed on the bottom of the tool in a short animation by pressing the play button. The qmleasing tool has a couple of presets that can be used as starting points.
To give an impression of how easing curves affect animations and to show the qmleasing tool in action, I created a short video:
http://www.youtube.com/watch?v=xEO07g_stBM