суббота, 23 января 2016 г.

Transitions by using shaders in QML



I've been working on a small QML plugin which allows to use shader effects between two QML scenes. All transitions between QML views are implemented by using ShaderEffect and written in GLSL.
 This short video can show some of those transitions.



The video also shows that the content of QML pages can be various. It doesn't matter whether a QML page has maps or any interactive element such Buttons or ListView for instance or maybe it's just a static picture.
 The plugin is very simple. Let's have a look how to do it on a small example:

Here ShaderTransitionView is a QML element which provides stack-based navigation model with effects shown above. It's still in development. At this moment it has two methods push() and pop(). The method push(...) takes a string argument - path to a QML file which will be displayed as the next scene. The method pop() removes the last page from the stack and displays the previous one.
 ShaderTransitionView also has some properties which allow user to define a graphical effect, set options of any graphical effect. A small example will show better how it works.

The property shaderEffect defines which transition we would like to apply when a view is changed. Each transition has a set of unique options. They can be defined by using an array as it's shown in this example.
 More description, source code and will come soon when the plugin has a decent implementation.