在上一篇文章中,我们已经生成了我们Balloon component了。现在我们来让大家怎么来动态生成很多的气球。
property int x1 property int y1 property int speed property bool created: false
NumberAnimation on y { easing.type: Easing.InOutQuad; to: y1; duration: speed running: created } NumberAnimation on x { easing.type: Easing.InOutQuad; to: x1; duration: speed running: created }
transitions: [ Transition { to: "exploded" SequentialAnimation { NumberAnimation { target: balloon; property: "opacity" to: 0; duration: 800 } NumberAnimation { target: balloon; property: "scale" to: 0; duration: 800 } PropertyAction { target: balloon; property: "source" value: { if ( surprise ) "images/flower.png"; else "" } } NumberAnimation { target: balloon; property: "opacity" to: 1; duration: 300 } NumberAnimation { target: balloon; property: "scale" to: 1; duration: 300 } PauseAnimation { duration: { if (surprise) 400 else 200 } } PropertyAction { target: balloon; property: "visible" value: "false"} } } ]
Page { id:main title: i18n.tr("Balloon") property int time: 2000 property int rotateVal: 0 Image { anchors.fill:parent source: "images/sky.jpg" } Balloon { id: red x: main.width/2 y: main.height - 60 rotation: main.rotateVal color: "red" y1: main.height/6 x1: 0 speed: main.time/2 created: true surprise: true } Balloon { id: blue x: main.width / 3 - 60 y: main.height - 60 color: "blue" rotation: main.rotateVal y1: main.height/4 x1: main.width/2 + 20 speed: main.time/2 created: true } Balloon { id: green x: main.width*2/3 y: main.height - 10 rotation: main.rotateVal color: "green" y1: main.height/5 x1: main.width/3 + 20 speed: main.time/3 created: true surprise: true } Button { z: 2 id: restartButton anchors.bottom: parent.bottom anchors.right: parent.right anchors.bottomMargin: 10 anchors.rightMargin: 10 width: 100 height: 40 text: "Add" onClicked: { var x = Math.random() * main.width var y = main.height - 60 var colors = new Array("red","blue","green"); var date = new Date() // Use miliseconds avoids the same random secuece // generation among calls var mils = date.getMilliseconds() var index = Math.floor((Math.random()*mils)%3) var obj = Logic.createBalloon( Math.floor(x), Math.floor(y), colors[index] ) } } }
var component; function addBinding (from, toObj, toProp) { var bindObj = Qt.createQmlObject("import QtQuick 2.0; Binding {value:"+from+"}", main) if (bindObj) { bindObj.target = toObj bindObj.property = toProp } else { console.log("error creating binding object") console.log(bindObj.errorString()) return false } return true } function createBalloon(x, y, color) { // console.log( "Color:" + color) if (component == null) component = Qt.createComponent("Balloon.qml"); // Note that if Block.qml was not a local file, component.status would be // Loading and we should wait for the component's statusChanged() signal to // know when the file is downloaded and ready before calling createObject(). if (component.status === Component.Ready) { var dynamicObject = component.createObject(main); if (dynamicObject === null) { console.log("error creating block"); console.log(component.errorString()); return false; } var xx = main.width*Math.random(); var xx1 = Math.floor(Math.min(xx, main.width-dynamicObject.width)); dynamicObject.x = x; dynamicObject.y = y; dynamicObject.x1 = xx1; dynamicObject.y1 = 100 * Math.random(); dynamicObject.speed = 2000 dynamicObject.color = color; with(Math) { var tmp = floor(random() * 10 + 1) dynamicObject.surprise = (tmp===10); } var bindObj = Qt.createQmlObject("import QtQuick 2.0; Binding {value: main.rotateVal}", main); if (bindObj) { bindObj.target = dynamicObject bindObj.property = "rotation" } else { console.log("error creating binding component") ; console.log(bindObj.errorString()); return false; } // This should be set last dynamicObject.created = true; // addBinding( "scaleVal", dynamicObject, scale ); } else { console.log("error loading block component"); console.log(component.errorString()); dynamicObject = null; return null; } return dynamicObject; } function playsound(surprise) { if ( surprise ) { clapPlayer.play(); } else { player.play(); } }
import "logic.js" as Logic
import QtSensors 5.0
Accelerometer { id: accel active: true dataRate: 20 onReadingChanged: { var x = Math.abs(accel.reading.x); var y = Math.abs(accel.reading.y); var z = Math.abs(accel.reading.z); if ( x > main.maxX ) { main.maxX = x; } if ( y > main.maxY ) { main.maxY = y; } if ( z > main.maxZ ) { main.maxZ = z; } if ( x > main.threshold || y > main.threshold || z > main.threshold ) { console.log("x: " + main.maxX + " y: " + main.maxY + " z: " + main.maxZ); var count = main.children.length for(var i=0; i < count; i++) { if ( main.children[i].type !== "balloon" ) continue; if ( main.children[i].type === "balloon") { if ( main.children[i].color === "red") main.children[i].scale += 0.1 else if ( main.children[i].color === "green" ) main.children[i].scale += 0.02 else main.children[i].scale += 0.05 } if( main.children[i].scale > 2.0 && main.children[i].state !== "exploded" && main.children[i].color === "red" && main.children[i].type === "balloon" ) { main.children[i].state = "exploded" } if( main.children[i].scale > 3.0 && main.children[i].state !== "exploded" && main.children[i].color === "green" && main.children[i].type === "balloon" ) { main.children[i].state = "exploded" } if( main.children[i].scale > 4.0 && main.children[i].state !== "exploded" && main.children[i].color === "blue" && main.children[i].type === "balloon" ) { main.children[i].state = "exploded" } } } } } RotationSensor { id: rotation dataRate: 50 onReadingChanged: { var count = main.children.length for ( var i = 0; i < count; i ++ ) { if (main.children[i].type !== "balloon") continue; main.children[i].rotation = -rotation.reading.x; main.children[i].rotation = -rotation.reading.y; } } }