summaryrefslogtreecommitdiffstats
path: root/examples/declarative/animation/basics
diff options
context:
space:
mode:
authorBea Lam <bea.lam@nokia.com>2010-05-14 01:32:57 (GMT)
committerBea Lam <bea.lam@nokia.com>2010-05-16 23:42:12 (GMT)
commit82d0b03c4f81c2832975d548917c03dbaddeee72 (patch)
treecb2d7ae0c7c8c5870f4c9439453c938a9423afad /examples/declarative/animation/basics
parent0aca20bf669ef7e7702ee96d0d0676392cfd1b72 (diff)
downloadQt-82d0b03c4f81c2832975d548917c03dbaddeee72.zip
Qt-82d0b03c4f81c2832975d548917c03dbaddeee72.tar.gz
Qt-82d0b03c4f81c2832975d548917c03dbaddeee72.tar.bz2
Restructure the examples. They are now organized into various
subdirectories to make it easier to locate examples for certain features (e.g. animation) and to distinguish between different types of examples (e.g. very basic examples vs complex demo-like examples).
Diffstat (limited to 'examples/declarative/animation/basics')
-rw-r--r--examples/declarative/animation/basics/basics.qmlproject16
-rw-r--r--examples/declarative/animation/basics/color-animation.qml70
-rw-r--r--examples/declarative/animation/basics/images/face-smile.pngbin0 -> 15408 bytes
-rw-r--r--examples/declarative/animation/basics/images/moon.pngbin0 -> 2433 bytes
-rw-r--r--examples/declarative/animation/basics/images/shadow.pngbin0 -> 425 bytes
-rw-r--r--examples/declarative/animation/basics/images/star.pngbin0 -> 349 bytes
-rw-r--r--examples/declarative/animation/basics/images/sun.pngbin0 -> 8153 bytes
-rw-r--r--examples/declarative/animation/basics/property-animation.qml63
8 files changed, 149 insertions, 0 deletions
diff --git a/examples/declarative/animation/basics/basics.qmlproject b/examples/declarative/animation/basics/basics.qmlproject
new file mode 100644
index 0000000..d4909f8
--- /dev/null
+++ b/examples/declarative/animation/basics/basics.qmlproject
@@ -0,0 +1,16 @@
+import QmlProject 1.0
+
+Project {
+ /* Include .qml, .js, and image files from current directory and subdirectories */
+ QmlFiles {
+ directory: "."
+ }
+ JavaScriptFiles {
+ directory: "."
+ }
+ ImageFiles {
+ directory: "."
+ }
+ /* List of plugin directories passed to QML runtime */
+ // importPaths: [ " ../exampleplugin " ]
+}
diff --git a/examples/declarative/animation/basics/color-animation.qml b/examples/declarative/animation/basics/color-animation.qml
new file mode 100644
index 0000000..61737e9
--- /dev/null
+++ b/examples/declarative/animation/basics/color-animation.qml
@@ -0,0 +1,70 @@
+import Qt 4.7
+import Qt.labs.particles 1.0
+
+Item {
+ id: window
+ width: 640; 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
+ SequentialAnimation on color {
+ loops: Animation.Infinite
+ ColorAnimation { from: "DeepSkyBlue"; to: "#0E1533"; duration: 5000 }
+ ColorAnimation { from: "#0E1533"; to: "DeepSkyBlue"; duration: 5000 }
+ }
+ }
+ GradientStop {
+ position: 1.0
+ SequentialAnimation on color {
+ loops: Animation.Infinite
+ ColorAnimation { from: "SkyBlue"; to: "#437284"; duration: 5000 }
+ ColorAnimation { from: "#437284"; to: "SkyBlue"; duration: 5000 }
+ }
+ }
+ }
+ }
+
+ // the sun, moon, and stars
+ Item {
+ width: parent.width; height: 2 * parent.height
+ NumberAnimation on rotation { from: 0; to: 360; duration: 10000; loops: Animation.Infinite }
+ Image {
+ source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter
+ rotation: -3 * parent.rotation
+ }
+ Image {
+ source: "images/moon.png"; y: parent.height - 74; anchors.horizontalCenter: parent.horizontalCenter
+ rotation: -parent.rotation
+ }
+ Particles {
+ x: 0; y: parent.height/2; width: parent.width; height: parent.height/2
+ source: "images/star.png"; angleDeviation: 360; velocity: 0
+ velocityDeviation: 0; count: parent.width / 10; fadeInDuration: 2800
+ SequentialAnimation on opacity {
+ loops: Animation.Infinite
+ NumberAnimation { from: 0; to: 1; duration: 5000 }
+ NumberAnimation { from: 1; to: 0; duration: 5000 }
+ }
+ }
+ }
+
+ // ...and the ground.
+ Rectangle {
+ anchors { left: parent.left; top: parent.verticalCenter; right: parent.right; bottom: parent.bottom }
+ gradient: Gradient {
+ GradientStop {
+ position: 0.0
+ SequentialAnimation on color {
+ loops: Animation.Infinite
+ ColorAnimation { from: "ForestGreen"; to: "#001600"; duration: 5000 }
+ ColorAnimation { from: "#001600"; to: "ForestGreen"; duration: 5000 }
+ }
+ }
+ GradientStop { position: 1.0; color: "DarkGreen" }
+ }
+ }
+}
diff --git a/examples/declarative/animation/basics/images/face-smile.png b/examples/declarative/animation/basics/images/face-smile.png
new file mode 100644
index 0000000..3d66d72
--- /dev/null
+++ b/examples/declarative/animation/basics/images/face-smile.png
Binary files differ
diff --git a/examples/declarative/animation/basics/images/moon.png b/examples/declarative/animation/basics/images/moon.png
new file mode 100644
index 0000000..9407b2b
--- /dev/null
+++ b/examples/declarative/animation/basics/images/moon.png
Binary files differ
diff --git a/examples/declarative/animation/basics/images/shadow.png b/examples/declarative/animation/basics/images/shadow.png
new file mode 100644
index 0000000..8270565
--- /dev/null
+++ b/examples/declarative/animation/basics/images/shadow.png
Binary files differ
diff --git a/examples/declarative/animation/basics/images/star.png b/examples/declarative/animation/basics/images/star.png
new file mode 100644
index 0000000..27ef924
--- /dev/null
+++ b/examples/declarative/animation/basics/images/star.png
Binary files differ
diff --git a/examples/declarative/animation/basics/images/sun.png b/examples/declarative/animation/basics/images/sun.png
new file mode 100644
index 0000000..7713ca5
--- /dev/null
+++ b/examples/declarative/animation/basics/images/sun.png
Binary files differ
diff --git a/examples/declarative/animation/basics/property-animation.qml b/examples/declarative/animation/basics/property-animation.qml
new file mode 100644
index 0000000..87ac8ec
--- /dev/null
+++ b/examples/declarative/animation/basics/property-animation.qml
@@ -0,0 +1,63 @@
+import Qt 4.7
+
+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
+
+ // 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 loops to Animation.Infinite makes the
+ // animation repeat indefinitely, otherwise it would only run once.
+ SequentialAnimation on y {
+ loops: Animation.Infinite
+
+ // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function
+ NumberAnimation {
+ from: smiley.minHeight; to: smiley.maxHeight
+ easing.type: Easing.OutExpo; duration: 300
+ }
+
+ // Then move back to minHeight in 1 second, using the OutBounce easing function
+ NumberAnimation {
+ from: smiley.maxHeight; to: smiley.minHeight
+ easing.type: Easing.OutBounce; duration: 1000
+ }
+
+ // Then pause for 500ms
+ PauseAnimation { duration: 500 }
+ }
+ }
+}