Làm thế nào để trì hoãn hành động JavaScript trong QML?

Question

Tôi đang xây dựng một ứng dụng C++ dựa trên QML.

Để làm cho nó đơn giản:

Trong file QML chính của tôi, tôi có một nút (Rectangle) gọi một hàm JavaScript (được định nghĩa trong một tập tin JS bên ngoài) khi nhấp:

// My JS file linked to the main QML window 
[...] 
function actionOnButtonClicked() 
{ 
    var x = 0; 
    var y = 0; 
    for(var i = 0; i < 3; i++) 
    { 
     createObject(x, y); 
     x = x + 10; 
     y = y + 10; 
    } 
} 

Như bạn có thể thấy, trong hàm này, tôi gọi n (= 3 đây) lần khác chức năng JS để tự động tạo nhiều QML đối tượng để thêm vào cảnh:

function createObject(xPosition, yPosition) 
{ 
    component = Qt.createComponent("Symbol.qml"); 
    component.createObject(windowApp, {"x": xPosition, "y": yPosition}); 
} 

Điều này hoạt động tốt. Nhưng đối tượng được tạo (Biểu tượng) xuất hiện trong cửa sổỨng dụng với hoạt ảnh dịch (khoảng 1 giây) và tôi muốn đợi hoạt ảnh của đối tượng đầu tiên hoàn thành trước khi tạo hình ảnh thứ hai ...

Như chúng tôi không thể sử dụng hàm setTimeOut() JavaScript trong QML, tôi tự hỏi làm thế nào tôi có thể đạt được điều này. Tôi không thấy cách tôi có thể sử dụng đối tượng Hẹn giờ QML hoặc thậm chí là PauseAnimation ...

Có ai biết cách thêm độ trễ giữa 2 hoạt động JavaScript QML không?

Answer 1

Bạn có thể làm điều đó để bạn chỉ tạo một "Biểu tượng" từ thao tác nút và kích hoạt biểu tượng mới trên một số sự kiện trong đối tượng mới. Có lẽ đoạn phim hoạt hình kết thúc kích hoạt một sự kiện mà bạn có thể sử dụng?

Answer 2

Đã lâu rồi, tôi đã bỏ lỡ QML. Nhưng hãy để tôi cố gắng đề xuất một giải pháp. Tôi đoán điều này có thể hiệu quả nếu bạn đang gọi số translationAnimation.running = true trong sự kiện Component.onComlpeted. Tôi đã đăng một câu trả lời ngu ngốc trước đây. Bây giờ tôi thay thế nó bằng một cách lười biếng/xấu xí để làm điều này. Điều này có lẽ không đúng cách để làm điều đó, mặc dù mã này có thể giúp trường hợp sử dụng của bạn.

CreateObject.js

.pragma library 

var objects = null; 
var objectCount = 0; 
var i = 0; 
var mainWin; 
var x = 0; 
var y = 0; 

function calledOnbuttonAction(parentWindow) 
{ 
    if(objects === null) 
    { 
     mainWin = parentWindow; 
     x = 0; 
     y = 0; 
     objects = new Array(); 
     createObject(x,y); 
    } 

    else 
    { 
     if(x <= mainWin.width) 
      x = x + 28; 
     else 
     { 
      x = 0; 
      if(y <= mainWin.height) 
       y = y + 28; 
      else 
      { 
       console.debug("Exceeded window area!") 
       return; 
      } 
     } 
     createObject(x,y); 
    } 

} 

function createObject(xPos, yPos) 
{ 
    i++; 
    var component = Qt.createComponent("Object.qml"); 
    objects[objectCount++] = component.createObject(mainWin, {"x": xPos, "y": yPos}); 
} 

main.qml

import QtQuick 1.1 
import "CreateObjects.js" as CreateObject 

Rectangle { 
    id: mainWindow 
    width: 360 
    height: 360 

    Text { 
     text: qsTr("Click inside window") 
     anchors.centerIn: parent 
     font.pixelSize: 18 
    } 
    MouseArea { 
     anchors.fill: parent 
     onClicked: { 
      CreateObject.calledOnbuttonAction(mainWindow); //passing the parent window object 
     } 
    } 

} 

Object.qml // Symbol trong trường hợp của bạn

//The Symbol 

import QtQuick 1.1 
import "CreateObjects.js" as CreateObject 
Rectangle { 

    id: obj 
    width: 25 
    height: 25 

    gradient: Gradient { 
     GradientStop { 
      position: 0 
      color: "#d11b1b" 
     } 

     GradientStop { 
      position: 1 
      color: "#ea4848" 
     } 
    } 

    property alias animationStatus: completedAnimation 

    NumberAnimation { 
     id: completedAnimation; 
     target: obj; 
     property: "opacity"; 
     duration: 800; 
     from: 0; 
     to: 1.0; 
     onRunningChanged: { 
      if(!running && CreateObject.i < 900) // Decrease or increase the value according to the number of objects you want to create 
      { 
       CreateObject.calledOnbuttonAction(); 
      } 
     } 
    } 

    Component.onCompleted: completedAnimation.running = true; 

} 

Answer 3

tôi nghĩ rằng điều này QML Timer type có thể giúp bạn đạt được những gì bạn muốn.