qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

revamp animation example according to guidelines 

The following changes are applied to the example:
- All qmllint warnings are fixed.
- Tv tennis part of the example is now actually working.
- Use let/const instead of var in JS.
- Use qsTr() in a few places.
- Use strict equality operator, when it's wise to do so.

Change-Id: If0222feb942abfd0a6c9f8a8cab0ac60ced3d76e
Reviewed-by: Richard Moe Gustavsen <richard.gustavsen@qt.io>
(cherry picked from commit 838472592b)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
This commit is contained in:
Oliver Eftevaag 2023-06-28 13:11:28 +02:00 committed by Qt Cherry-pick Bot
parent 561d15890e
commit 469b786fc8
7 changed files with 71 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
examples/quick/animation/behaviors/tvtennis.qml
View File

@ -8,30 +8,67 @@ Rectangle {
width: 320; height: 480;
color: "#1e1b18"
state: "right"
states: [
State {
name: "left"
PropertyChanges {
leftBat {
y: (ball.y + ball.height / 2) - leftBat.height / 2
}
rightBat {
y: page.height / 2 - rightBat.height / 2
}
}
},
State {
name: "right"
PropertyChanges {
rightBat {
y: (ball.y + ball.height / 2) - rightBat.height / 2
}
leftBat {
y: page.height / 2 - leftBat.height / 2
}
}
}
]
transitions: [
Transition {
from: "left"; to: "right"
NumberAnimation { property: "y"; easing.type: Easing.InOutQuad; duration: 200}
},
Transition {
from: "right"; to: "left"
NumberAnimation { property: "y"; easing.type: Easing.InOutQuad; duration: 200}
}
]
// Make a ball to bounce
Rectangle {
id: ball
// Add a property for the target y coordinate
property variant direction : "right"
x: 20; width: 20; height: 20; z: 1
width: 20
height: 20
z: 1
color: "#80c342"
// Move the ball to the right and back to the left repeatedly
SequentialAnimation on x {
loops: Animation.Infinite
NumberAnimation { to: page.width - 40; duration: 2000 }
PropertyAction { target: ball; property: "direction"; value: "left" }
PropertyAction { target: page; property: "state"; value: "left" }
NumberAnimation { to: 20; duration: 2000 }
PropertyAction { target: ball; property: "direction"; value: "right" }
PropertyAction { target: page; property: "state"; value: "right" }
}
// Make y move with a velocity of 200
Behavior on y { SpringAnimation{ velocity: 200; }
Behavior on y {
SpringAnimation { velocity: 200; }
}
Component.onCompleted: y = page.height-10; // start the ball motion
Component.onCompleted: y = page.height - 10; // start the ball motion
// Detect the ball hitting the top or bottom of the view and bounce it
onYChanged: {
@ -48,31 +85,27 @@ Rectangle {
Rectangle {
id: leftBat
color: "#328930"
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]
width: 20; height: 90
x: 2;
}
Rectangle {
id: rightBat
color: "#328930"
x: page.width - 22; width: 20; height: 90
y: ball.direction == 'right' ? ball.y - 45 : page.height/2 -45;
Behavior on y { SpringAnimation{ velocity: 300 } }
width: 20; height: 90
x: page.width - width - 2
}
// The rest, to make it look realistic, if neither ever scores...
Rectangle { color: "#328930"; x: page.width/2-80; y: 0; width: 40; height: 60 }
Rectangle { color: "#1e1b18"; x: page.width/2-70; y: 10; width: 20; height: 40 }
Rectangle { color: "#328930"; x: page.width/2+40; y: 0; width: 40; height: 60 }
Rectangle { color: "#1e1b18"; x: page.width/2+50; y: 10; width: 20; height: 40 }
Rectangle { color: "#328930"; x: page.width / 2 - 80; y: 0; width: 40; height: 60 }
Rectangle { color: "#1e1b18"; x: page.width / 2 - 70; y: 10; width: 20; height: 40 }
Rectangle { color: "#328930"; x: page.width / 2 + 40; y: 0; width: 40; height: 60 }
Rectangle { color: "#1e1b18"; x: page.width / 2 + 50; y: 10; width: 20; height: 40 }
Repeater {
model: page.height / 20
Rectangle {
delegate: Rectangle {
required property int index
color: "#328930"
x: page.width / 2 - 5
x: parent.width / 2 - 5
y: index * 20
width: 10
height: 10

16
examples/quick/animation/behaviors/wigglytext.qml
View File

@ -4,26 +4,28 @@
import QtQml
import QtQuick
pragma ComponentBehavior: Bound
Rectangle {
id: container
property string text: "Drag me!"
property string text: qsTr("Drag me!")
property bool animated: true
width: 320; height: 480; color: "#474747"; focus: true
Keys.onPressed: (event) => {
if (event.key == Qt.Key_Delete || event.key == Qt.Key_Backspace)
if (event.key === Qt.Key_Delete || event.key === Qt.Key_Backspace)
container.remove()
else if (event.text != "") {
else if (event.text !== "") {
container.append(event.text)
}
}
function append(text) {
container.animated = false
var lastLetter = container.children[container.children.length - 1]
var newLetter = letterComponent.createObject(container)
const lastLetter = container.children[container.children.length - 1]
let newLetter = letterComponent.createObject(container)
newLetter.text = text
newLetter.follow = lastLetter
container.animated = true
@ -36,8 +38,8 @@ Rectangle {
function doLayout() {
var follow = null
for (var i = 0; i < container.text.length; ++i) {
var newLetter = letterComponent.createObject(container)
for (let i = 0; i < container.text.length; ++i) {
let newLetter = letterComponent.createObject(container)
newLetter.text = container.text[i]
newLetter.follow = follow
follow = newLetter

1
examples/quick/animation/doc/src/animation.qdoc
View File

@ -53,7 +53,6 @@
\e{Tv Tennis} uses complex behaviors to make the paddles follow a ball to
simulate an infinite tennis game. Again, a binding which depends on other
values is applied to the position and a behavior provided the animation.
\snippet animation/behaviors/tvtennis.qml 0
\section1 Easing Curves

4
examples/quick/animation/easing/easing.qml
View File

@ -5,6 +5,8 @@ import QtQml
import QtQml.Models
import QtQuick
pragma ComponentBehavior: Bound
Rectangle {
id: window
width: 320; height: 480; color: "#232323"
@ -90,7 +92,7 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
MouseArea {
onClicked: if (rect.state == '') rect.state = "right"; else rect.state = ''
onClicked: if (rect.state === '') rect.state = "right"; else rect.state = ''
anchors.fill: parent
anchors.margins: -5 // Make MouseArea bigger than the rectangle, itself
}

4
examples/quick/animation/pathanimation/pathanimation.qml
View File

@ -15,7 +15,7 @@ Rectangle {
antialiasing: true
onPaint: {
var context = canvas.getContext("2d")
let context = canvas.getContext("2d")
context.clearRect(0, 0, width, height)
context.strokeStyle = "black"
context.path = pathAnim.path
@ -65,7 +65,7 @@ Rectangle {
Text {
anchors.centerIn: parent
text: "Box"
text: qsTr("Box")
}
}
}

4
examples/quick/animation/pathinterpolator/pathinterpolator.qml
View File

@ -15,7 +15,7 @@ Rectangle {
antialiasing: true
onPaint: {
var context = canvas.getContext("2d")
let context = canvas.getContext("2d")
context.clearRect(0, 0, width, height)
context.strokeStyle = "black"
context.path = motionPath.path
@ -71,7 +71,7 @@ Rectangle {
Text {
anchors.centerIn: parent
text: "Box"
text: qsTr("Box")
}
}
}

1
examples/quick/animation/states/states.qml
View File

@ -1,7 +1,6 @@
// Copyright (C) 2017 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
import QtQml
import QtQuick
Rectangle {