From 1d0368335d25b70d3cecbbcea224feb9ac0d6e59 Mon Sep 17 00:00:00 2001 From: Alan Alpert Date: Fri, 20 Apr 2012 21:01:04 +1000 Subject: Flesh out examples documentation Change-Id: I4f7a1ce6b9957f43e442947dc6b319e919ec9cf7 Reviewed-by: Yann Bodson --- examples/quick/animation/animation.qml | 17 ++++++++++++++++- examples/quick/animation/basics/color-animation.qml | 2 ++ examples/quick/animation/basics/property-animation.qml | 2 ++ examples/quick/animation/behaviors/behavior-example.qml | 2 ++ examples/quick/animation/behaviors/tvtennis.qml | 2 ++ examples/quick/animation/behaviors/wigglytext.qml | 4 ++++ .../quick/animation/pathanimation/pathanimation.qml | 2 ++ .../animation/pathinterpolator/pathinterpolator.qml | 2 ++ examples/quick/animation/states/states.qml | 2 ++ examples/quick/animation/states/transitions.qml | 2 ++ 10 files changed, 36 insertions(+), 1 deletion(-) (limited to 'examples/quick/animation') diff --git a/examples/quick/animation/animation.qml b/examples/quick/animation/animation.qml index f478cb713b..a6735efcc2 100644 --- a/examples/quick/animation/animation.qml +++ b/examples/quick/animation/animation.qml @@ -51,24 +51,39 @@ import "../../shared" as Examples a small QML file emphasizing a particular element or feature. ColorAnimation demonstrates using a color animation to fade a sky from day to night. + \snippet examples/quick/animation/basics/color-animation.qml 0 PropertyAnimation demonstrates using a number animation to bounce a circle up and down. + \snippet examples/quick/animation/basics/property-animation.qml 0 Behaviors demonstrates using behaviors to animate moving a rectangle to whereever you click. + \snippet examples/quick/animation/behaviors/behavior-example.qml 0 Wiggly Text demonstrates using more complex behaviors to animate and wiggle some text around as you drag it. + It does this by assigning a complex binding to each letter: + \snippet examples/quick/animation/behaviors/wigglytext.qml 0 + Then, it uses behaviors to animate the movement on each letter: + \snippet examples/quick/animation/behaviors/wigglytext.qml 1 Tv Tennis demonstrates using more complex behaviors to get paddles following a ball for an infinite game. + Again a binding which depends on other values is applied to the position and a behavior provided the animation. + \snippet examples/quick/animation/behaviors/tvtennis.qml 0 Easing Curves shows off all the easing curves available in Qt Quick animations. States demonstrates how the properties of an item can vary between states. + It defines several states: + \snippet examples/quick/animation/states/states.qml 0 + Note that there is also the implicit 'base state' from properties set directly on elements. - Transitions takes the States example and animates the property changes. + Transitions takes the States example and animates the property changes by setting transitions: + \snippet examples/quick/animation/states/transitions.qml 0 PathAnimation animates an image along a beizer curve using a PathAnimation. + \snippet examples/quick/animation/pathanimation/pathanimation.qml 0 PathInterpolator animates an image along the same beizer curve, using a PathInterpolator instead. + \snippet examples/quick/animation/pathinterpolator/pathinterpolator.qml 0 */ Item { diff --git a/examples/quick/animation/basics/color-animation.qml b/examples/quick/animation/basics/color-animation.qml index f1bf40c40b..85dca2d4fa 100644 --- a/examples/quick/animation/basics/color-animation.qml +++ b/examples/quick/animation/basics/color-animation.qml @@ -48,6 +48,7 @@ Item { // Let's draw the sky... Rectangle { anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter } + //! [0] gradient: Gradient { GradientStop { position: 0.0 @@ -66,6 +67,7 @@ Item { } } } + //! [0] } // the sun, moon, and stars diff --git a/examples/quick/animation/basics/property-animation.qml b/examples/quick/animation/basics/property-animation.qml index 4a4d3e3b2a..2752b32816 100644 --- a/examples/quick/animation/basics/property-animation.qml +++ b/examples/quick/animation/basics/property-animation.qml @@ -81,6 +81,7 @@ Item { y: minHeight source: "images/face-smile.png" + //! [0] // Animate the y property. Setting loops to Animation.Infinite makes the // animation repeat indefinitely, otherwise it would only run once. SequentialAnimation on y { @@ -101,5 +102,6 @@ Item { // Then pause for 500ms PauseAnimation { duration: 500 } } + //! [0] } } diff --git a/examples/quick/animation/behaviors/behavior-example.qml b/examples/quick/animation/behaviors/behavior-example.qml index a88d7c8c7b..e77c3537a0 100644 --- a/examples/quick/animation/behaviors/behavior-example.qml +++ b/examples/quick/animation/behaviors/behavior-example.qml @@ -92,10 +92,12 @@ Rectangle { NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 } } + //! [0] // Set an 'elastic' behavior on the focusRect's y property. Behavior on y { NumberAnimation { easing.type: Easing.OutElastic; easing.amplitude: 3.0; easing.period: 2.0; duration: 300 } } + //! [0] Text { id: focusText diff --git a/examples/quick/animation/behaviors/tvtennis.qml b/examples/quick/animation/behaviors/tvtennis.qml index 108f19a11d..667b33fb81 100644 --- a/examples/quick/animation/behaviors/tvtennis.qml +++ b/examples/quick/animation/behaviors/tvtennis.qml @@ -86,8 +86,10 @@ Rectangle { id: leftBat color: "Lime" x: 2; width: 20; height: 90 + // ![0] y: ball.direction == 'left' ? ball.y - 45 : page.height/2 -45; Behavior on y { SpringAnimation{ velocity: 300 } } + // ![0] } Rectangle { id: rightBat diff --git a/examples/quick/animation/behaviors/wigglytext.qml b/examples/quick/animation/behaviors/wigglytext.qml index 4bb94da100..67e6da3fbb 100644 --- a/examples/quick/animation/behaviors/wigglytext.qml +++ b/examples/quick/animation/behaviors/wigglytext.qml @@ -86,8 +86,10 @@ Rectangle { id: letter property variant follow +//! [0] x: follow ? follow.x + follow.width : container.width / 6 y: follow ? follow.y : container.height / 2 +//! [0] font.pixelSize: 40; font.bold: true color: "#999999"; styleColor: "#222222"; style: Text.Raised @@ -99,8 +101,10 @@ Rectangle { onReleased: letter.color = "#999999" } +//! [1] Behavior on x { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } } Behavior on y { enabled: container.animated; SpringAnimation { spring: 3; damping: 0.3; mass: 1.0 } } +//! [1] } } diff --git a/examples/quick/animation/pathanimation/pathanimation.qml b/examples/quick/animation/pathanimation/pathanimation.qml index f995218c6c..06c0b86970 100644 --- a/examples/quick/animation/pathanimation/pathanimation.qml +++ b/examples/quick/animation/pathanimation/pathanimation.qml @@ -64,6 +64,7 @@ Rectangle { loops: -1 PauseAnimation { duration: 1000 } + //! [0] PathAnimation { id: pathAnim @@ -87,6 +88,7 @@ Rectangle { onChanged: canvas.requestPaint() } } + //! [0] } Rectangle { diff --git a/examples/quick/animation/pathinterpolator/pathinterpolator.qml b/examples/quick/animation/pathinterpolator/pathinterpolator.qml index 5a137c732d..6813966015 100644 --- a/examples/quick/animation/pathinterpolator/pathinterpolator.qml +++ b/examples/quick/animation/pathinterpolator/pathinterpolator.qml @@ -59,6 +59,7 @@ Rectangle { } } + //! [0] PathInterpolator { id: motionPath @@ -89,6 +90,7 @@ Rectangle { } } } + //! [0] Rectangle { id: box diff --git a/examples/quick/animation/states/states.qml b/examples/quick/animation/states/states.qml index 7ca56a9295..b92ba1b313 100644 --- a/examples/quick/animation/states/states.qml +++ b/examples/quick/animation/states/states.qml @@ -86,6 +86,7 @@ Rectangle { } states: [ + // ![0] // In state 'middleRight', move the image to middleRightRect State { name: "middleRight" @@ -97,5 +98,6 @@ Rectangle { name: "bottomLeft" PropertyChanges { target: userIcon; x: bottomLeftRect.x; y: bottomLeftRect.y } } + // ![0] ] } diff --git a/examples/quick/animation/states/transitions.qml b/examples/quick/animation/states/transitions.qml index d57924d6d2..bfc4057b97 100644 --- a/examples/quick/animation/states/transitions.qml +++ b/examples/quick/animation/states/transitions.qml @@ -105,6 +105,7 @@ Rectangle { } ] + // ![0] // Transitions define how the properties change when the item moves between each state transitions: [ @@ -126,5 +127,6 @@ Rectangle { Transition { NumberAnimation { properties: "x,y"; duration: 200 } } + // ![0] ] } -- cgit v1.2.3