The Qt Graphical Effects project is on its way to offer a set of design neutral visual effects for Qt Quick 2.0.
Over twenty ready-made QML graphical effect elements are currently available. The effects include code for blending, masking, blurring, coloring, and much more. There are still areas to improve and extend — all ideas, feedback, proposals and even concrete contributions are welcome!
Using the effects
Using the graphical effect elements should be straightforward for developers and technically oriented designers as you only need to know basic Qt Quick/QML to get started.
Any QML item can be used as a source item for an effect. You can add a drop shadow to an image, for instance, as follows:
git clone firstname.lastname@example.org:qt-labs/qtgraphicaleffects.git
To see the effects in action, run the code examples from the graphical effects doc/src/snippets folder:
or launch the Testbed application:
The Testbed application is a convenient way to browse the effects and their properties as well as to visualise the results. Select an effect from the left, adjust its properties on the right, and see the result in the center in realtime:
API and documentation
The API for each effect is a set of QML properties. The effect properties can be animated just like any other QML properties. The documention contains property descriptions and basic usage examples. To generate the documentation, execute the following commands in the qtgraphicaleffects projects folder:
Open the generated doc/html/qml-graphicaleffects-index.html in a browser to view the documentation.
QML ShaderEffect is a built-in element in Qt Quick 2.0. This powerful QML element allows combining OpenGL Shading Language (GLSL) and QML, and makes it easy to implement visually impressive custom effects. Under the hood, all the effects in this project are based on ShaderEffect elements. Only QML and GLSL have been used, and there are no additional C++ APIs. If you are familiar with GLSL, you can easily study how the existing effects have been implemented. You can then create custom effects by modifying and combining the basic effects.