How to use STView

Let's have a look how to use the plugin:

import QtQuick 2.5
import QtQuick.Window 2.2
import ShaderTransitionView 1.0

Window {
    visible: true
    width: 1000
    height: 600

    STView {
        id: view
        anchors.fill: parent
        duration: 700
        transition: ShaderTransitionView.EffectFADECOLOR
        transitionOptions: { "color": Qt.vector3d(0.0, 0.0, 0.0) }
    }

    Component.onCompleted: {
        specialView.push( "PageExample1.qml" )
    }
}

We created a new window and filled it by STView. By calling the method push(...) in Component.onCompleted in such a way specialView.push( "PageExample1.qml" ) we put a QML page PageExample1.qml into the stack so the page PageExample1.qml will be displayed when the window appears. Next time when we want to change the current view by the next one, we need to call the same method push(...) or we there is one more similar method pushItem(...) in STView which puts the next view represented as QQmlComponent.

import QtQuick 2.5
import QtQuick.Window 2.2
import ShaderTransitionView 1.0

Window {
    visible: true
    width: 1000
    height: 600

    Component {
      id: componentPage2
      MyPage2 {
        id: myPage2
        onBackPressed: {
          stView.transitionOptions = { "forward":false }
          stView.pop()
        }
        onNextPressed: {
          stView.transitionOptions = { "forward":true }
          stView.pushItem( componentPage3 )
        }
      }
    }

    Component {
      id: componentPage3
      MyPage3 {
        id: myPage3
        onBackPressed: {
          stView.transitionOptions = { "forward":false }
          stView.pop()
        }
      }
    }

    STView {
        id: stView
        anchors.fill: parent
        duration: 700
        transition: ShaderTransitionView.EffectWIND
        transitionOptions: { "size": 0.3 }
    }

    Component.onCompleted: {
        stView.push( "PageExample1.qml" )
    }
}

Here we have two additional pages MyPage2{...} and MyPage3{...} represented as QML components. They will be loaded when we call the method pushItem(...) If our pages emit signals backPressed() and nextPressed() we can define handlers and put/remove pages into/from the stack. This example also shows that we can put any different options for transition every time when we put or remove pages. For the button "Back" we can change direction of unfolding animation.

  stView.transitionOptions = { "forward":false }
  stView.pop()

The method pop() removes the current page from the stack and displays the previous one. If we want to go to the next page we will do very similar actions but instead removing a page from the stack we need to put it into the stack by calling push(...) or pushItem(...).

  stView.transitionOptions = { "forward":true }
  stView.pushItem( componentPage3 )

We can change transitions and options for each transition during navigation through the stack.