examples/QtQuick/qmlanimationex/qml/qmlanimationex/main.qml

/****************************************************************************
**
** Copyright (C) 2011 Nokia Corporation and/or its subsidiary(-ies).
** All rights reserved.
** Contact: Nokia Corporation
**
**
** $QT_BEGIN_LICENSE:BSD$
** You may use this file under the terms of the BSD license as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
**   * Redistributions of source code must retain the above copyright
**     notice, this list of conditions and the following disclaimer.
**   * Redistributions in binary form must reproduce the above copyright
**     notice, this list of conditions and the following disclaimer in
**     the documentation and/or other materials provided with the
**     distribution.
**   * Neither the name of Nokia Corporation and its Subsidiary(-ies) nor
**     the names of its contributors may be used to endorse or promote
**     products derived from this software without specific prior written
**     permission.
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
** $QT_END_LICENSE$
**
****************************************************************************/

import QtQuick 1.0
import com.nokia.symbian 1.0

// Main window of the example.
ApplicationWindow {
    id: mainWindow

    ToolBarLayout {
        id: commonTools
        ToolButton {
            flat: true
            iconSource: "toolbar_back.svg"
            onClicked: Qt.quit()
        }
        ToolButton {
            flat: true
            iconSource: "toolbar_options.svg"
            onClicked: pageMenu.open()
        }
    }

    Page{
        id: page
        tools: commonTools

        property string animationDetails: ""

        // Page heading
        PageHeading{
            id: heading
            anchors.top: parent.top
            width: parent.width
            text: qsTr("Animations Example")
        }

        Button{
            id: button1
            x: 0; y: 50
            width: 100
            height: 50
            text: "button1"

            // this is a standalone animation, it's not running by default
            SequentialAnimation{
                id: animation
                PropertyAnimation { target: button1; property: "width"; to: 30; duration: 500 }
                PropertyAnimation { target: button1; property: "width"; to: 100; duration: 500 }
            }


            onClicked: animation.running = true
        }

        Button{
            id: button2
            x: 0
            y: 120
            width: 150
            height: 50
            text: "button2"
            SequentialAnimation on x {
                     loops: Animation.Infinite
                     PropertyAnimation { to: 200; easing.type: Easing.InOutQuad }
                     PropertyAnimation { to: 0; duration: 500; easing.type: Easing.InQuad }
                 }
        }

        Button{
            id: button3
            x: 0
            y: 190
            width: 150
            height: 50
            text: "button3"
            SequentialAnimation{
                id: animation2
                ParallelAnimation{
                    PropertyAnimation { target: button3; property: "width"; to: 30; duration: 500 }
                    PropertyAnimation { target: button3; property: "x"; to: 200; duration: 500 }
                }
                PropertyAnimation { target: button3; property: "x"; to: 0; duration: 500 }
                PropertyAnimation { target: button3; property: "width"; to: 150; duration: 500 }

            }
            onClicked: animation2.running = true;

        }

        TextArea{
            id: displayInfo
            anchors.bottom: parent.bottom
            readOnly: true
            width: parent.width
            height: 100
            text: "Click buttons to see how they animate.\nUse Menu options to apply transitions" +
                  parent.animationDetails
        }

        Menu{
            id: pageMenu


            content: Column{
                width: pageMenu.width
                MenuItem{
                    id: menu1
                    text: qsTr("Apply State1")
                    onClicked:{
                        page.state = "state1"
                        pageMenu.close();
                    }
                }

                MenuItem{
                    id: menu2
                    text: qsTr("Apply State2")
                    onClicked:{
                        page.state = "state2"
                        pageMenu.close();
                    }
                }

                MenuItem{
                    id: menu3
                    text: qsTr("Apply State3")
                    onClicked:{
                        page.state = "state3"
                        pageMenu.close();
                    }
                }

            }
        }

        states: [

            State{
                name: "state1"
            },

            State{
                name: "state2"
            },


            State{
                name: "state3"
            }


        ]

        transitions:[

            Transition{
                to: "state1"
                SequentialAnimation{
                    NumberAnimation { target: button1; property: "x"; to: 30 }
                    NumberAnimation { target: button1; property: "x"; to: 0 }
                }

            },

            Transition{
                to: "state2"
                from:  "state1"
                SequentialAnimation{
                    ParallelAnimation{
                        PropertyAnimation { target: button1; property: "x"; to: 30 }
                        PropertyAnimation { target: button3; property: "x"; to: 30 }
                    }
                    ParallelAnimation{
                        PropertyAnimation { target: button1; property: "x"; to: 0 }
                        PropertyAnimation { target: button3; property: "x"; to: 0 }
                    }
                }


            },

            Transition{
                SequentialAnimation{
                    ParallelAnimation{
                        PropertyAnimation { target: button1; property: "x"; to: 80 }
                        PropertyAnimation { target: button3; property: "x"; to: 80 }
                    }
                    ParallelAnimation{
                        PropertyAnimation { target: button1; property: "x"; to: 0 }
                        PropertyAnimation { target: button3; property: "x"; to: 0 }
                    }
                }

            }

        ]

    }

    Component.onCompleted: {
        pageStack.push(page)
    }

}

---