Tape.qml Example File

dictaphone/assets/Tape.qml
    /* Copyright (c) 2012, 2013  BlackBerry Limited.
    *
    * Licensed under the Apache License, Version 2.0 (the "License");
    * you may not use this file except in compliance with the License.
    * You may obtain a copy of the License at
    *
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Unless required by applicable law or agreed to in writing, software
    * distributed under the License is distributed on an "AS IS" BASIS,
    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    * See the License for the specific language governing permissions and
    * limitations under the License.
    */

    import bb.cascades 1.0

    Container {
        property bool running: false

        onRunningChanged: {
            if (running)
                animation.play()
            else
                animation.stop()
        }

        layout: DockLayout {}

        ImageView {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center

            imageSource: "asset:///images/tape_shadow.png"
        }

        ImageView {
            id: leftGear

            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center

            translationX: -155
            translationY: -8

            imageSource: "asset:///images/tape_gear.png"
        }

        ImageView {
            id: rightGear

            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center

            translationX: 138
            translationY: -8

            imageSource: "asset:///images/tape_gear.png"
        }

        ImageView {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center

            imageSource: "asset:///images/tape_cover.png"
        }

        animations: ParallelAnimation {
            id: animation

            SequentialAnimation {
                target: leftGear

                RotateTransition {
                    fromAngleZ: 0
                    toAngleZ: 1800
                    duration: 15000
                    easingCurve: StockCurve.Linear
                }
            }
            SequentialAnimation {
                target: rightGear

                RotateTransition {
                    fromAngleZ: 0
                    toAngleZ: 1800
                    duration: 15000
                    easingCurve: StockCurve.Linear
                }
            }
        }
    }