diff options
Diffstat (limited to 'examples/declarative')
29 files changed, 50 insertions, 313 deletions
diff --git a/examples/declarative/animations/color-animation.qml b/examples/declarative/animations/color-animation.qml index 7171a69..6740522 100644 --- a/examples/declarative/animations/color-animation.qml +++ b/examples/declarative/animations/color-animation.qml @@ -10,7 +10,7 @@ Item { gradient: Gradient { GradientStop { position: 0.0 - color: SequentialAnimation { + SequentialAnimation on color { repeat: true ColorAnimation { from: "DeepSkyBlue"; to: "#0E1533"; duration: 5000 } ColorAnimation { from: "#0E1533"; to: "DeepSkyBlue"; duration: 5000 } @@ -18,7 +18,7 @@ Item { } GradientStop { position: 1.0 - color: SequentialAnimation { + SequentialAnimation on color { repeat: true ColorAnimation { from: "SkyBlue"; to: "#437284"; duration: 5000 } ColorAnimation { from: "#437284"; to: "SkyBlue"; duration: 5000 } @@ -31,7 +31,7 @@ Item { Item { width: parent.width; height: 2 * parent.height transformOrigin: Item.Center - rotation: NumberAnimation { from: 0; to: 360; duration: 10000; repeat: true } + NumberAnimation on rotation { from: 0; to: 360; duration: 10000; repeat: true } Image { source: "images/sun.png"; y: 10; anchors.horizontalCenter: parent.horizontalCenter transformOrigin: Item.Center; rotation: -3 * parent.rotation @@ -44,7 +44,7 @@ Item { 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 - opacity: SequentialAnimation { + SequentialAnimation on opacity { repeat: true NumberAnimation { from: 0; to: 1; duration: 5000 } NumberAnimation { from: 1; to: 0; duration: 5000 } @@ -58,7 +58,7 @@ Item { gradient: Gradient { GradientStop { position: 0.0 - color: SequentialAnimation { + SequentialAnimation on color { repeat: true ColorAnimation { from: "ForestGreen"; to: "#001600"; duration: 5000 } ColorAnimation { from: "#001600"; to: "ForestGreen"; duration: 5000 } diff --git a/examples/declarative/animations/property-animation.qml b/examples/declarative/animations/property-animation.qml index 537ee26..4428f34 100644 --- a/examples/declarative/animations/property-animation.qml +++ b/examples/declarative/animations/property-animation.qml @@ -42,7 +42,7 @@ Item { // Animate the y property. Setting repeat to true makes the // animation repeat indefinitely, otherwise it would only run once. - y: SequentialAnimation { + SequentialAnimation on y { repeat: true // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function diff --git a/examples/declarative/aspectratio/face_fit_animated.qml b/examples/declarative/aspectratio/face_fit_animated.qml index 90ea516..79e99e9 100644 --- a/examples/declarative/aspectratio/face_fit_animated.qml +++ b/examples/declarative/aspectratio/face_fit_animated.qml @@ -18,7 +18,7 @@ Rectangle { source: "pics/face.png" x: (parent.width-width*scale)/2 y: (parent.height-height*scale)/2 - scale: SpringFollow { + SpringFollow on scale { source: Math.max(Math.min(face.parent.width/face.width*1.333,face.parent.height/face.height), Math.min(face.parent.width/face.width,face.parent.height/face.height*1.333)) spring: 1 diff --git a/examples/declarative/behaviours/behavior.qml b/examples/declarative/behaviours/behavior.qml index 2732c0a..c84bf62 100644 --- a/examples/declarative/behaviours/behavior.qml +++ b/examples/declarative/behaviours/behavior.qml @@ -50,12 +50,12 @@ Rectangle { radius: 5 border.width: 10; border.color: "white"; x: 100-37; y: 100-25 - x: Behavior { NumberAnimation { duration: 300 } } - y: Behavior { NumberAnimation { duration: 300 } } + Behavior on x { NumberAnimation { duration: 300 } } + Behavior on y { NumberAnimation { duration: 300 } } Text { id: focusText text: focusRect.text; - text: Behavior { + Behavior on text { SequentialAnimation { NumberAnimation { target: focusText; property: "opacity"; to: 0; duration: 150 } PropertyAction {} diff --git a/examples/declarative/behaviours/test.qml b/examples/declarative/behaviours/test.qml deleted file mode 100644 index 8fffd59..0000000 --- a/examples/declarative/behaviours/test.qml +++ /dev/null @@ -1,102 +0,0 @@ -import Qt 4.6 - -Rectangle { - color: "lightsteelblue" - width: 800 - height: 600 - id: page - MouseArea { - anchors.fill: parent - onClicked: { bluerect.parent = page; console.log(mouseX); bluerect.x = mouseX; } - } - MyRect { - color: "green" - x: 200 - y: 200 - } - MyRect { - color: "red" - x: 400 - y: 200 - } - MyRect { - color: "yellow" - x: 400 - y: 400 - } - MyRect { - color: "orange" - x: 400 - y: 500 - } - MyRect { - color: "pink" - x: 400 - y: 0 - } - MyRect { - color: "lightsteelblue" - x: 100 - y: 500 - } - MyRect { - color: "black" - x: 0 - y: 200 - } - MyRect { - color: "white" - x: 400 - y: 0 - } - Rectangle { - color: "blue" - x: 0 - y: 0 - width: 100 - height: 100 - id: bluerect - x: Behavior { - ParallelAnimation { - SequentialAnimation { - NumberAnimation { - target: bluerect - property: "y" - from: 0 - to: 10 - easing.type: "OutBounce" - easing.amplitude: 30 - duration: 250 - } - NumberAnimation { - target: bluerect - property: "y" - from: 10 - to: 0 - easing.type: "OutBounce" - easing.amplitude: 30 - duration: 250 - } - } - NumberAnimation { duration: 500 } - } - } - parent: Behavior { - SequentialAnimation { - NumberAnimation { - target: bluerect - property: "opacity" - to: 0 - duration: 150 - } - PropertyAction {} - NumberAnimation { - target: bluerect - property: "opacity" - to: 1 - duration: 150 - } - } - } - } -} diff --git a/examples/declarative/border-image/content/MyBorderImage.qml b/examples/declarative/border-image/content/MyBorderImage.qml index ca886e9..5621e18 100644 --- a/examples/declarative/border-image/content/MyBorderImage.qml +++ b/examples/declarative/border-image/content/MyBorderImage.qml @@ -17,13 +17,13 @@ Item { BorderImage { id: image; x: container.width / 2 - width / 2; y: container.height / 2 - height / 2 - width: SequentialAnimation { + SequentialAnimation on width { repeat: true NumberAnimation { from: container.minWidth; to: container.maxWidth; duration: 2000; easing.type: "InOutQuad"} NumberAnimation { from: container.maxWidth; to: container.minWidth; duration: 2000; easing.type: "InOutQuad" } } - height: SequentialAnimation { + SequentialAnimation on height { repeat: true NumberAnimation { from: container.minHeight; to: container.maxHeight; duration: 2000; easing.type: "InOutQuad"} NumberAnimation { from: container.maxHeight; to: container.minHeight; duration: 2000; easing.type: "InOutQuad" } diff --git a/examples/declarative/clocks/content/Clock.qml b/examples/declarative/clocks/content/Clock.qml index 0c6836f..75a1cf5 100644 --- a/examples/declarative/clocks/content/Clock.qml +++ b/examples/declarative/clocks/content/Clock.qml @@ -34,7 +34,7 @@ Item { transform: Rotation { id: hourRotation origin.x: 7.5; origin.y: 73; angle: 0 - angle: SpringFollow { + SpringFollow on angle { spring: 2; damping: 0.2; modulus: 360 source: (clock.hours * 30) + (clock.minutes * 0.5) } @@ -48,7 +48,7 @@ Item { transform: Rotation { id: minuteRotation origin.x: 6.5; origin.y: 83; angle: 0 - angle: SpringFollow { + SpringFollow on angle { spring: 2; damping: 0.2; modulus: 360 source: clock.minutes * 6 } @@ -62,7 +62,7 @@ Item { transform: Rotation { id: secondRotation origin.x: 2.5; origin.y: 80; angle: 0 - angle: SpringFollow { + SpringFollow on angle { spring: 5; damping: 0.25; modulus: 360 source: clock.seconds * 6 } diff --git a/examples/declarative/connections/connections.qml b/examples/declarative/connections/connections.qml index 4692343..c35bda5 100644 --- a/examples/declarative/connections/connections.qml +++ b/examples/declarative/connections/connections.qml @@ -10,7 +10,7 @@ Rectangle { Image { id: image; source: "content/bg1.jpg"; anchors.centerIn: parent; transformOrigin: Item.Center rotation: window.angle - rotation: Behavior { NumberAnimation { easing.type: "OutCubic"; duration: 300 } } + Behavior on rotation { NumberAnimation { easing.type: "OutCubic"; duration: 300 } } } Button { diff --git a/examples/declarative/dial/content/Dial.qml b/examples/declarative/dial/content/Dial.qml index 6fd0f39..ad4717a 100644 --- a/examples/declarative/dial/content/Dial.qml +++ b/examples/declarative/dial/content/Dial.qml @@ -26,7 +26,7 @@ Item { id: needleRotation origin.x: 7; origin.y: 65 angle: -130 - angle: SpringFollow { + SpringFollow on angle { spring: 1.4 damping: .15 source: Math.min(Math.max(-130, root.value*2.6 - 130), 133) diff --git a/examples/declarative/effects/effects.qml b/examples/declarative/effects/effects.qml index 0674433..997d7de 100644 --- a/examples/declarative/effects/effects.qml +++ b/examples/declarative/effects/effects.qml @@ -11,7 +11,7 @@ Rectangle { source: "pic.png" effect: Blur { - blurRadius: NumberAnimation { + NumberAnimation on blurRadius { id: blurEffect running: false from: 0; to: 10 @@ -33,7 +33,7 @@ Rectangle { effect: DropShadow { blurRadius: 3 offset.x: 3 - offset.y: NumberAnimation { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; repeat: true; } + NumberAnimation on offset.y { id: dropShadowEffect; from: 0; to: 10; duration: 1000; running: false; repeat: true; } } MouseArea { anchors.fill: parent; onClicked: dropShadowEffect.running = !dropShadowEffect.running } diff --git a/examples/declarative/fillmode/fillmode.qml b/examples/declarative/fillmode/fillmode.qml index ec3717f..ab0f81c 100644 --- a/examples/declarative/fillmode/fillmode.qml +++ b/examples/declarative/fillmode/fillmode.qml @@ -4,7 +4,7 @@ Image { width: 400 height: 250 source: "face.png" - fillMode: SequentialAnimation { + SequentialAnimation on fillMode { repeat: true PropertyAction { value: Image.Stretch } PropertyAction { target: label; property: "text"; value: "Stretch" } diff --git a/examples/declarative/fonts/banner.qml b/examples/declarative/fonts/banner.qml index 00b8660..7989f80 100644 --- a/examples/declarative/fonts/banner.qml +++ b/examples/declarative/fonts/banner.qml @@ -10,7 +10,7 @@ Rectangle { Row { y: -screen.height / 4.5 - x: NumberAnimation { from: 0; to: -text.width; duration: 6000; repeat: true } + NumberAnimation on x { from: 0; to: -text.width; duration: 6000; repeat: true } Text { id: text; font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text } Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text } Text { font.pixelSize: screen.pixelSize; color: screen.textColor; text: screen.text } diff --git a/examples/declarative/fonts/hello.qml b/examples/declarative/fonts/hello.qml index fcc9580..334409e 100644 --- a/examples/declarative/fonts/hello.qml +++ b/examples/declarative/fonts/hello.qml @@ -9,7 +9,7 @@ Rectangle { id: text; color: "white"; anchors.centerIn: parent text: "Hello world!"; font.pixelSize: 60 - font.letterSpacing: SequentialAnimation { + SequentialAnimation on font.letterSpacing { repeat: true; NumberAnimation { from: 100; to: 300; easing.type: "InQuad"; duration: 3000 } ScriptAction { script: { @@ -17,7 +17,7 @@ Rectangle { container.x = (screen.width / 4) + (Math.random() * screen.width / 2) } } } - opacity: SequentialAnimation { + SequentialAnimation on opacity { repeat: true; NumberAnimation { from: 1; to: 0; duration: 2600 } PauseAnimation { duration: 400 } diff --git a/examples/declarative/layouts/positioners.qml b/examples/declarative/layouts/positioners.qml index 7146702..bce53bd 100644 --- a/examples/declarative/layouts/positioners.qml +++ b/examples/declarative/layouts/positioners.qml @@ -21,11 +21,11 @@ Rectangle { } Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueV1; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueV2; color: "lightsteelblue"; width: 100; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } } @@ -45,11 +45,11 @@ Rectangle { } Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueH1; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } Rectangle { id: blueH2; color: "lightsteelblue"; width: 50; height: 100; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } } @@ -113,15 +113,15 @@ Rectangle { Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueG1; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueG2; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueG3; color: "lightsteelblue"; width: 50; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } @@ -147,15 +147,15 @@ Rectangle { } Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueF1; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueF2; color: "lightsteelblue"; width: 60; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } Rectangle { id: blueF3; color: "lightsteelblue"; width: 40; height: 50; border.color: "black"; radius: 15 - opacity: Behavior{NumberAnimation{}} + Behavior on opacity {NumberAnimation{}} } Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } } diff --git a/examples/declarative/listview/content/ClickAutoRepeating.qml b/examples/declarative/listview/content/ClickAutoRepeating.qml index 0850f4e..5240e65 100644 --- a/examples/declarative/listview/content/ClickAutoRepeating.qml +++ b/examples/declarative/listview/content/ClickAutoRepeating.qml @@ -10,7 +10,7 @@ Item { signal released signal clicked - isPressed: SequentialAnimation { + SequentialAnimation on isPressed { running: false id: autoRepeat PropertyAction { target: page; property: "isPressed"; value: true } diff --git a/examples/declarative/listview/highlight.qml b/examples/declarative/listview/highlight.qml index be1f62d..5e4911d 100644 --- a/examples/declarative/listview/highlight.qml +++ b/examples/declarative/listview/highlight.qml @@ -44,7 +44,7 @@ Rectangle { id: petHighlight Rectangle { width: 200; height: 50; color: "#FFFF88" - y: SpringFollow { source: list1.currentItem.y; spring: 3; damping: 0.1 } + SpringFollow on y { source: list1.currentItem.y; spring: 3; damping: 0.1 } } } ListView { diff --git a/examples/declarative/parallax/qml/Smiley.qml b/examples/declarative/parallax/qml/Smiley.qml index 81eadda..4442d5e 100644 --- a/examples/declarative/parallax/qml/Smiley.qml +++ b/examples/declarative/parallax/qml/Smiley.qml @@ -24,7 +24,7 @@ Item { // Animate the y property. Setting repeat to true makes the // animation repeat indefinitely, otherwise it would only run once. - y: SequentialAnimation { + SequentialAnimation on y { repeat: true // Move from minHeight to maxHeight in 300ms, using the OutExpo easing function diff --git a/examples/declarative/progressbar/content/ProgressBar.qml b/examples/declarative/progressbar/content/ProgressBar.qml index bfc801c..65c80b2 100644 --- a/examples/declarative/progressbar/content/ProgressBar.qml +++ b/examples/declarative/progressbar/content/ProgressBar.qml @@ -21,7 +21,7 @@ Item { id: highlight; radius: 1 anchors.left: parent.left; anchors.top: parent.top; anchors.bottom: parent.bottom anchors.leftMargin: 3; anchors.topMargin: 3; anchors.bottomMargin: 3 - width: EaseFollow { source: highlight.widthDest; velocity: 1200 } + EaseFollow on width { source: highlight.widthDest; velocity: 1200 } gradient: Gradient { GradientStop { id: g1; position: 0.0 } GradientStop { id: g2; position: 1.0 } diff --git a/examples/declarative/progressbar/progressbars.qml b/examples/declarative/progressbar/progressbars.qml index 6530c3d..a66d544 100644 --- a/examples/declarative/progressbar/progressbars.qml +++ b/examples/declarative/progressbar/progressbars.qml @@ -14,9 +14,9 @@ Rectangle { ProgressBar { property int r: Math.floor(Math.random() * 5000 + 1000) width: main.width - 20 - value: NumberAnimation { duration: r; from: 0; to: 100; repeat: true } - color: ColorAnimation { duration: r; from: "lightsteelblue"; to: "thistle"; repeat: true } - secondColor: ColorAnimation { duration: r; from: "steelblue"; to: "#CD96CD"; repeat: true } + NumberAnimation on value { duration: r; from: 0; to: 100; repeat: true } + ColorAnimation on color { duration: r; from: "lightsteelblue"; to: "thistle"; repeat: true } + ColorAnimation on secondColor { duration: r; from: "steelblue"; to: "#CD96CD"; repeat: true } } } } diff --git a/examples/declarative/snow/ImageBatch.qml b/examples/declarative/snow/ImageBatch.qml deleted file mode 100644 index c2a2674..0000000 --- a/examples/declarative/snow/ImageBatch.qml +++ /dev/null @@ -1,72 +0,0 @@ -import Qt 4.6 - -GridView { - id: grid - property int offset: 0 - property var ref - property bool isSelected: ref.selectedItemColumn >= offset && ref.selectedItemColumn < offset + 5 - - currentIndex: (ref.selectedItemColumn - offset) + ref.selectedItemRow * 5 - - property int imageWidth: ref.imageWidth - property int imageHeight: ref.imageHeight - - width: 5 * imageWidth - height: 4 * imageHeight - cellWidth: imageWidth - cellHeight: imageHeight - - states: State { - name: "selected"; when: grid.isSelected - PropertyChanges { target: grid; z: 150 } - } - transitions: Transition { - SequentialAnimation { - PauseAnimation { duration: 150 } - PropertyAction { properties: "z" } - } - } - model: XmlListModel { - property string tags : "" - source: "http://api.flickr.com/services/feeds/photos_public.gne?"+(tags ? "tags="+tags+"&" : "")+"format=rss2" - query: "/rss/channel/item" - namespaceDeclarations: "declare namespace media=\"http://search.yahoo.com/mrss/\";" - - XmlRole { name: "url"; query: "media:content/@url/string()" } - } - - delegate: Item { - id: root - property bool isSelected: GridView.isCurrentItem && grid.isSelected - transformOrigin: Item.Center - width: grid.imageWidth; height: grid.imageHeight; - - Image { id: flickrImage; source: url; fillMode: Image.PreserveAspectFit; smooth: true; anchors.fill: parent; - opacity: (status == Image.Ready)?1:0; opacity: Behavior { NumberAnimation { } } } - Loading { anchors.centerIn: parent; visible: flickrImage.status!=1 } - - states: State { - name: "selected" - when: root.isSelected - PropertyChanges { target: root; scale: 3; z: 100 } - } - transitions: [ - Transition { - to: "selected" - SequentialAnimation { - PauseAnimation { duration: 150 } - PropertyAction { properties: "z" } - NumberAnimation { properties: "scale"; duration: 150; } - } - }, - Transition { - from: "selected" - SequentialAnimation { - NumberAnimation { properties: "scale"; duration: 150 } - PropertyAction { properties: "z" } - } - } - ] - } -} - diff --git a/examples/declarative/snow/Loading.qml b/examples/declarative/snow/Loading.qml deleted file mode 100644 index 238d9c7..0000000 --- a/examples/declarative/snow/Loading.qml +++ /dev/null @@ -1,8 +0,0 @@ -import Qt 4.6 - -Image { - id: loading; source: "pics/loading.png"; transformOrigin: Item.Center - rotation: NumberAnimation { - id: rotationAnimation; from: 0; to: 360; running: loading.visible == true; repeat: true; duration: 900 - } -} diff --git a/examples/declarative/snow/create.js b/examples/declarative/snow/create.js deleted file mode 100644 index 2bdae4a..0000000 --- a/examples/declarative/snow/create.js +++ /dev/null @@ -1,12 +0,0 @@ -var myComponent = null; - -function createNewBlock() { - if (myComponent == null) - myComponent = createComponent("ImageBatch.qml"); - - var obj = myComponent.createObject(); - obj.parent = layout; - obj.offset = maximumColumn + 1; - obj.ref = imagePanel; - maximumColumn += 5; -} diff --git a/examples/declarative/snow/pics/loading.png b/examples/declarative/snow/pics/loading.png Binary files differdeleted file mode 100644 index 0296cfe..0000000 --- a/examples/declarative/snow/pics/loading.png +++ /dev/null diff --git a/examples/declarative/snow/snow.qml b/examples/declarative/snow/snow.qml deleted file mode 100644 index 39c9c43..0000000 --- a/examples/declarative/snow/snow.qml +++ /dev/null @@ -1,69 +0,0 @@ -import Qt 4.6 - -Rectangle { - id: imagePanel - width: 1024 - height: 768 - color: "black" - - property int maximumColumn: 4 - property int selectedItemRow: 0 - property int selectedItemColumn: 0 - - Script { source: "create.js" } - - onSelectedItemColumnChanged: if (selectedItemColumn == maximumColumn) createNewBlock(); - - property int imageWidth: 200 - property int imageHeight: 200 - - property int selectedX: selectedItemColumn * imageWidth - property int selectedY: selectedItemRow * imageHeight - - Item { - anchors.centerIn: parent - Row { - id: layout - property real targetX: -(selectedX + imageWidth / 2) - - property real targetDeform: 0 - property bool slowDeform: true - - property real deform: 0 - deform: SpringFollow { - id: deformFollow; source: layout.targetDeform; velocity: layout.slowDeform?0.1:2 - onSyncChanged: if(inSync) { layout.slowDeform = true; layout.targetDeform = 0; } - } - - ImageBatch { offset: 0; ref: imagePanel } - - x: SpringFollow { source: layout.targetX; velocity: 1000 } - y: SpringFollow { source: -(selectedY + imageHeight / 2); velocity: 500 } - } - - transform: Rotation { - axis.y: 1; axis.z: 0 - angle: layout.deform * -100 - } - } - - Script { - function left() { - if (selectedItemColumn <= 0) return; - selectedItemColumn -= 1; - layout.slowDeform = false; - layout.targetDeform = Math.max(Math.min(layout.deform - 0.1, -0.1), -0.4); - } - function right() { - selectedItemColumn += 1; - layout.slowDeform = false; - layout.targetDeform = Math.min(Math.max(layout.deform + 0.1, 0.1), 0.4); - } - } - - focus: true - Keys.onLeftPressed: "left()" - Keys.onRightPressed: "right()" - Keys.onUpPressed: "if (selectedItemRow > 0) selectedItemRow = selectedItemRow - 1" - Keys.onDownPressed: "if (selectedItemRow < 3) selectedItemRow = selectedItemRow + 1" -} diff --git a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml index 9d35832..36178ec 100644 --- a/examples/declarative/tutorials/samegame/samegame3/Dialog.qml +++ b/examples/declarative/tutorials/samegame/samegame3/Dialog.qml @@ -14,7 +14,7 @@ Rectangle { signal closed(); color: "white"; border.width: 1; width: myText.width + 20; height: 60; opacity: 0 - opacity: Behavior { + Behavior on opacity { NumberAnimation { duration: 1000 } } Text { id: myText; anchors.centerIn: parent; text: "Hello World!" } diff --git a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml index 4c2ba43..1e3a0ed 100644 --- a/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml +++ b/examples/declarative/tutorials/samegame/samegame4/content/BoomBlock.qml @@ -8,8 +8,8 @@ Item { id:block property int targetX: 0 property int targetY: 0 - x: SpringFollow { enabled: spawned; source: targetX; spring: 2; damping: 0.2 } - y: SpringFollow { source: targetY; spring: 2; damping: 0.2 } + SpringFollow on x { enabled: spawned; source: targetX; spring: 2; damping: 0.2 } + SpringFollow on y { source: targetY; spring: 2; damping: 0.2 } //![1] //![2] @@ -24,7 +24,7 @@ Item { id:block } } opacity: 0 - opacity: Behavior { NumberAnimation { properties:"opacity"; duration: 200 } } + Behavior on opacity { NumberAnimation { properties:"opacity"; duration: 200 } } anchors.fill: parent } //![2] diff --git a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml index ed9fd32..831c03b 100644 --- a/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml +++ b/examples/declarative/tutorials/samegame/samegame4/content/Dialog.qml @@ -13,7 +13,7 @@ Rectangle { signal closed(); color: "white"; border.width: 1; width: myText.width + 20; height: 60; opacity: 0 - opacity: Behavior { + Behavior on opacity { NumberAnimation { duration: 1000 } } Text { id: myText; anchors.centerIn: parent; text: "Hello World!" } diff --git a/examples/declarative/tvtennis/tvtennis.qml b/examples/declarative/tvtennis/tvtennis.qml index 4bd5319..1585c7b 100644 --- a/examples/declarative/tvtennis/tvtennis.qml +++ b/examples/declarative/tvtennis/tvtennis.qml @@ -16,7 +16,7 @@ Rectangle { x: 20; width: 20; height: 20; z: 1 // Move the ball to the right and back to the left repeatedly - x: SequentialAnimation { + SequentialAnimation on x { repeat: true NumberAnimation { to: page.width - 40; duration: 2000 } ScriptAction { script: Qt.playSound('paddle.wav') } @@ -27,7 +27,7 @@ Rectangle { } // Make y follow the target y coordinate, with a velocity of 200 - y: SpringFollow { source: ball.targetY; velocity: 200 } + SpringFollow on y { source: ball.targetY; velocity: 200 } // Detect the ball hitting the top or bottom of the view and bounce it onYChanged: { @@ -47,7 +47,7 @@ Rectangle { id: leftBat color: "Lime" x: 2; width: 20; height: 90 - y: SpringFollow { + SpringFollow on y { source: ball.y - 45; velocity: 300 enabled: ball.direction == 'left' } @@ -56,7 +56,7 @@ Rectangle { id: rightBat color: "Lime" x: page.width - 22; width: 20; height: 90 - y: SpringFollow { + SpringFollow on y { source: ball.y-45; velocity: 300 enabled: ball.direction == 'right' } diff --git a/examples/declarative/velocity/Day.qml b/examples/declarative/velocity/Day.qml index c39f99b..7424f60 100644 --- a/examples/declarative/velocity/Day.qml +++ b/examples/declarative/velocity/Day.qml @@ -24,7 +24,7 @@ Rectangle { id: stickyPage x: Math.random() * 200 + 100 y: Math.random() * 300 + 50 - rotation: SpringFollow { + SpringFollow on rotation { source: -flickable.horizontalVelocity / 100 spring: 2.0; damping: 0.1 } |
