KittyApp

viewdefinitions.qml

// frame refers to the component drawing the frames on top of the views

Item {
    id: viewContainer
    anchors.fill: frame

    KittyView {
        id: kittyView
        width: parent.width
        anchors.top: parent.top; anchors.bottom: parent.bottom
    }

    FriendsView {
        id: friendsView
        opacity: 0
        width: parent.width
        anchors.top: parent.top; anchors.bottom: parent.bottom
    }

    ShopView {
        id: shopView
        opacity: 0
        width: parent.width
        anchors.top: parent.top; anchors.bottom: parent.bottom
    }
}

ViewLoaderV1.qml

import Qt 4.7

Loader {
    property bool keepLoaded : true
    property url viewSource

    anchors.top: parent.top
    anchors.bottom: parent.bottom
    width: parent.width
    opacity: 0

    function activationComplete() {
         if (item.activationComplete != undefined) item.activationComplete();
    }

    function deactivationComplete() {
         if (item.deactivationComplete != undefined) item.deactivationComplete();
         if (!keepLoaded)
            source = "";
    }

    function loadView() {
        if (status != Loader.Ready)
            source = viewSource;
    }
}

ViewSwitcher.qml

import Qt 4.7

QtObject {
    property Item currentView
    property Item previousView

    property int duration: 700
    property bool running: switchAnimation.running
    property bool direction

    function switchView(newView, leftToRight) {
        if (newView != currentView && !switchAnimation.running) {
            newView.x = leftToRight ? -root.width : root.width
            direction = leftToRight;
            previousView = currentView;
            currentView = newView;
            newView.opacity = 1;
            switchAnimation.start();
        }
    }

    property variant switchAnimation : 
        ParallelAnimation {
            NumberAnimation { target: previousView; property: "x"; easing.type: Easing.InOutSine
                              to: direction ? root.width : -root.width;  }
            NumberAnimation { target: currentView; property: "x"; easing.type: Easing.InOutSine; to: 0 }
        
        onRunningChanged:  {
            if (!running) {
                previousView.opacity = 0;
                if (previousView.deactivationComplete != undefined) previousView.deactivationComplete();
                if (currentView.activationComplete != undefined) currentView.activationComplete();
            }
        }
    }
}

ViewSwitcherChanges

    function switchView(newView, leftToRight) {
        if (newView != currentView && !switchAnimation.running) {
            // if the new view has a loadView() function, call it to make sure the view is loaded
            if (newView.loadView != undefined)
                newView.loadView();
            newView.x = leftToRight ? -root.width : root.width
            direction = leftToRight;
            previousView = currentView;
            currentView = newView;
            newView.opacity = 1;
            switchAnimation.start();
        }
    }