diff options
| -rw-r--r-- | doc/src/snippets/declarative/flipable/flipable.qml | 17 | ||||
| -rw-r--r-- | src/declarative/graphicsitems/qdeclarativeflipable.cpp | 27 |
2 files changed, 23 insertions, 21 deletions
diff --git a/doc/src/snippets/declarative/flipable/flipable.qml b/doc/src/snippets/declarative/flipable/flipable.qml index cd5da4b..8d48bd9 100644 --- a/doc/src/snippets/declarative/flipable/flipable.qml +++ b/doc/src/snippets/declarative/flipable/flipable.qml @@ -46,26 +46,27 @@ Flipable { width: 240 height: 240 - property int angle: 0 property bool flipped: false - front: Image { source: "front.png" } - back: Image { source: "back.png" } + front: Image { source: "front.png"; anchors.centerIn: parent } + back: Image { source: "back.png"; anchors.centerIn: parent } transform: Rotation { - origin.x: flipable.width/2; origin.y: flipable.height/2 - axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis - angle: flipable.angle + id: rotation + origin.x: flipable.width/2 + origin.y: flipable.height/2 + axis.x: 0; axis.y: 1; axis.z: 0 // set axis.y to 1 to rotate around y-axis + angle: 0 // the default angle } states: State { name: "back" - PropertyChanges { target: flipable; angle: 180 } + PropertyChanges { target: rotation; angle: 180 } when: flipable.flipped } transitions: Transition { - NumberAnimation { properties: "angle"; duration: 1000 } + NumberAnimation { target: rotation; property: "angle"; duration: 4000 } } MouseArea { diff --git a/src/declarative/graphicsitems/qdeclarativeflipable.cpp b/src/declarative/graphicsitems/qdeclarativeflipable.cpp index 4ecf87b..f118a85 100644 --- a/src/declarative/graphicsitems/qdeclarativeflipable.cpp +++ b/src/declarative/graphicsitems/qdeclarativeflipable.cpp @@ -83,27 +83,28 @@ public: \section1 Example Usage - \beginfloatright - \inlineimage flipable.gif - \endfloat - The following example shows a Flipable item that flips whenever it is clicked, rotating about the y-axis. - The \l Rotation element is used to specify the angle and axis of the flip. - When \c flipped is true, the item changes to the "back" state, where - the angle is changed to 180 degrees to produce the flipping effect. + This flipable item has a \c flipped boolean property that is toggled + whenever the MouseArea within the flipable is clicked. When + \c flipped is true, the item changes to the "back" state; in this + state, the \c angle of the \l Rotation item is changed to 180 + degrees to produce the flipping effect. When \c flipped is false, the + item reverts to the default state, in which the \c angle value is 0. + + \snippet doc/src/snippets/declarative/flipable/flipable.qml 0 - \clearfloat - \snippet doc/src/snippets/declarative/flipable/flipable-snippet.qml 0 + \image flipable.gif - The \l Transition creates the animation that changes the angle over the - duration of one second. When the item changes between its "back" and + The \l Transition creates the animation that changes the angle over + four seconds. When the item changes between its "back" and default states, the NumberAnimation animates the angle between its old and new values. - See the \l {QML States} and \l {QML Animation} documentation for more - details on state changes and how animations work within transitions. + See \l {QML States} for details on state changes and the default + state, and \l {QML Animation} for more information on how animations + work within transitions. \sa {declarative/ui-components/flipable}{Flipable example} */ |