diff options
Diffstat (limited to 'examples/declarative')
| -rw-r--r-- | examples/declarative/animation/animation.qml | 63 | ||||
| -rw-r--r-- | examples/declarative/animation/easing.qml (renamed from examples/declarative/easing/easing.qml) | 8 | ||||
| -rw-r--r-- | examples/declarative/animation/images/face-smile.png | bin | 0 -> 15408 bytes | |||
| -rw-r--r-- | examples/declarative/animation/images/shadow.png | bin | 0 -> 425 bytes | |||
| -rw-r--r-- | examples/declarative/animation/property-animation.qml | 64 |
5 files changed, 68 insertions, 67 deletions
diff --git a/examples/declarative/animation/animation.qml b/examples/declarative/animation/animation.qml deleted file mode 100644 index 31c75e1..0000000 --- a/examples/declarative/animation/animation.qml +++ /dev/null @@ -1,63 +0,0 @@ -import Qt 4.6 - -Rectangle { - width: 400 - height: 200 - color: "white" - - Rectangle { - width: 40 - height: 40 - y: 80 - color: "#FF0000" - radius: 10 - - // Animate the x property. Setting repeat to true makes the - // animation repeat indefinitely, otherwise it would only run once. - x: SequentialAnimation { - running: true - repeat: true - - // Move from 0 to 360 in 500ms, using the easeInOutQuad easing function - NumberAnimation { - from: 0 - to: 360 - easing: "easeInOutQuad" - duration: 500 - } - - // Then pause for 200ms - PauseAnimation { - duration: 200 - } - - // Then move back to 0 in 2 seconds, using the easeInOutElastic easing function - NumberAnimation { - from: 360 - to: 0 - easing: "easeInOutElastic" - duration: 2000 - } - } - - // Alternate color between red and green - color: SequentialAnimation { - running: true - repeat: true - - ColorAnimation { - property: "color" - from: "#FF0000" - to: "#00FF00" - duration: 5000 - } - - ColorAnimation { - property: "color" - from: "#00FF00" - to: "#FF0000" - duration: 5000 - } - } - } -} diff --git a/examples/declarative/easing/easing.qml b/examples/declarative/animation/easing.qml index 100d5d2..9e0a0d6 100644 --- a/examples/declarative/easing/easing.qml +++ b/examples/declarative/animation/easing.qml @@ -56,15 +56,15 @@ Rectangle { height: 42; width: window.width Text { text: type; anchors.centerIn: parent; color: "White" } Rectangle { - id: slot1; color: "#121212"; x: 10; height: 32; width: 32 + id: slot1; color: "#121212"; x: 30; height: 32; width: 32 border.color: "#343434"; border.width: 1; radius: 8; anchors.verticalCenter: parent.verticalCenter } Rectangle { - id: slot2; color: "#121212"; x: window.width - 42; height: 32; width: 32 + id: slot2; color: "#121212"; x: window.width - 62; height: 32; width: 32 border.color: "#343434"; border.width: 1; radius: 8; anchors.verticalCenter: parent.verticalCenter } Rectangle { - id: rect; x: 10; color: "#454545" + id: rect; x: 30; color: "#454545" border.color: "White"; border.width: 2 height: 32; width: 32; radius: 8; anchors.verticalCenter: parent.verticalCenter @@ -75,7 +75,7 @@ Rectangle { states : State { name: "right" - PropertyChanges { target: rect; x: window.width - 42; color: ballColor } + PropertyChanges { target: rect; x: window.width - 62; color: ballColor } } transitions: Transition { diff --git a/examples/declarative/animation/images/face-smile.png b/examples/declarative/animation/images/face-smile.png Binary files differnew file mode 100644 index 0000000..3d66d72 --- /dev/null +++ b/examples/declarative/animation/images/face-smile.png diff --git a/examples/declarative/animation/images/shadow.png b/examples/declarative/animation/images/shadow.png Binary files differnew file mode 100644 index 0000000..8270565 --- /dev/null +++ b/examples/declarative/animation/images/shadow.png diff --git a/examples/declarative/animation/property-animation.qml b/examples/declarative/animation/property-animation.qml new file mode 100644 index 0000000..4e0f6f4 --- /dev/null +++ b/examples/declarative/animation/property-animation.qml @@ -0,0 +1,64 @@ +import Qt 4.6 + +Item { + id: window + width: 320; height: 480 + + // Let's draw the sky... + Rectangle { + anchors { left: parent.left; top: parent.top; right: parent.right; bottom: parent.verticalCenter } + gradient: Gradient { + GradientStop { position: 0.0; color: "DeepSkyBlue" } + GradientStop { position: 1.0; color: "LightSkyBlue" } + } + } + + // ...and the ground. + Rectangle { + anchors { left: parent.left; top: parent.verticalCenter; right: parent.right; bottom: parent.bottom } + gradient: Gradient { + GradientStop { position: 0.0; color: "ForestGreen" } + GradientStop { position: 1.0; color: "DarkGreen" } + } + } + + // The shadow for the smiley face + Image { + anchors.horizontalCenter: parent.horizontalCenter + source: "images/shadow.png"; y: smiley.minHeight + 58 + transformOrigin: "Center" + + // The scale property depends on the y position of the smiley face. + scale: smiley.y * 0.5 / (smiley.minHeight - smiley.maxHeight) + } + + Image { + id: smiley + property int maxHeight: window.height / 3 + property int minHeight: 2 * window.height / 3 + + anchors.horizontalCenter: parent.horizontalCenter + source: "images/face-smile.png"; y: minHeight + + // Animate the y property. Setting repeat to true makes the + // animation repeat indefinitely, otherwise it would only run once. + y: SequentialAnimation { + running: true; repeat: true + + // Move from minHeight to maxHeight in 300ms, using the easeOutExpo easing function + NumberAnimation { + from: smiley.minHeight; to: smiley.maxHeight + easing: "easeOutExpo"; duration: 300 + } + + // Then move back to minHeight in 1 second, using the easeOutBounce easing function + NumberAnimation { + from: smiley.maxHeight; to: smiley.minHeight + easing: "easeOutBounce"; duration: 1000 + } + + // Then pause for 500ms + PauseAnimation { duration: 500 } + } + } +} |
