Question

场景：矩形以一定的速度水平移动，在某个位置应将其分成两部分，然后以相同的速度分别移动。

我尝试在该“特定”位置添加新矩形，并使用了不透明度属性和2个独立矩形的动画运动，但无法实现我想要的效果。

还有没有其他方法，例如当第一个矩形到达该特定位置时在x方向上移动时，可以发送信号的信号和第二个矩形开始移动，直到该时间之前，该第二个矩形都不可见。

矩形ID：材料（第一个矩形），矩形ID：material1（第二个矩形）

我编写的

代码：

Rectangle {
    id: material1
    x:291
    y:187
    width: 71
    height: 10
    color: "#ff5930"

    states: [
        State{
            name: "Visible"
            PropertyChanges{target: material1; opacity: 1.0}
            PropertyChanges{target: material1; visible: true}
        },
        State{
            name:"Invisible"
            PropertyChanges{target: material1; opacity: 0.0}
            PropertyChanges{target: material1; visible: false}
        }
    ]
    transitions: [
            Transition {
                from: "Invisible"
                to: "Visible"
            PropertyAnimation {
                target: material1
                property: opacity
                duration: 11000
            }
            PropertyAnimation {
                target: material1
                property: visible
                duration: 0
            }
            }
    ]
    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation{ from: 291 ; to: 1008
            duration: 11000
        }
    }
}
Rectangle {
    id: material
    x: 159
    y: 187
    width: 71
    height: 10
    color: "#ff5930"
    SequentialAnimation on x {
        loops: Animation.Infinite
        PropertyAnimation{ from: 159 ; to: 1008
            duration: 11000
        }        
    }
}

Answer 1

我看不到尝试从给定项目中创建2个项目的代码。在删除之前，您必须先复制项目，然后根据需要进行操作。我可以通过以下方式做到这一点：

MyItem.qml

import QtQuick 2.11

Rectangle {
    signal itemBeforeDelete(Item item)
    signal itemDestroyed(Item item)

    id: item
    width: 50
    height: 50
    radius: 25
    color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
    x: 50 + Math.round(Math.random() * 700)
    y: 50 + Math.round(Math.random() * 500)
    property int dx: Math.round(Math.random() * 10) - 5
    property int dy: Math.round(Math.random() * 10) - 5
    property int maxTicks: 100 + Math.round(Math.random() * 500)
    function tick() {
        item.maxTicks --;
        x += item.dx;
        y += item.dy;
        if(x <= 0|| ((x + width)>= parent.width - dx))
            item.dx *= (-1);
        if(y <= 0|| ((y + height)>= parent.height - dy))
            item.dy *= (-1);

        if(item.maxTicks == 0) {
            item.state = "target"
        }
    }
    state: "initial"
    states: [
        State {
            name: "initial"
            PropertyChanges { target: item; opacity: 1 }
        },
        State {
            name: "target"
            PropertyChanges { target: item; opacity: 0 }
        }
    ]

    transitions: Transition {
        from: "initial"
        to: "target"
        SequentialAnimation {
            ScriptAction { script: item.itemBeforeDelete(item); }
            PropertyAnimation { target: item; property:"opacity"; duration: 1000 }
            ScriptAction { script: item.itemDestroyed(item); }
        }
    }
}

main.qml

import QtQuick 2.11
import QtQuick.Controls 2.4

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Timer {
        id: timer
        interval: 20
        repeat: true
        running: true
        onTriggered: {
            for(var i = 0;i < mainWindow.contentItem.children.length;i++)
            {
                mainWindow.contentItem.children[i].tick();
            }
        }
    }

    function createChildrenFromItem(item) {
        var component = Qt.createComponent("MyItem.qml");
        if (component.status === Component.Ready)
        {
            var offsetx = Math.round(Math.random() * 4) - 2;
            var offsety = Math.round(Math.random() * 4) - 2;
            var params = item ? {
                                    "x": item.x,
                                    "y": item.y,
                                    "dx": item.dx + offsetx,
                                    "dy": item.dy + offsety
                                } :{}
            var obj = component.createObject(mainWindow.contentItem, params);
            obj.itemBeforeDelete.connect(onBeforeDelete);
            obj.itemDestroyed.connect(onDestroyed);
        }
    }

    function onBeforeDelete(item)
    {
        createChildrenFromItem(item);
        createChildrenFromItem(item);
    }

    function onDestroyed(item)
    {
        item.destroy();
    }

    Component.onCompleted: {
        createChildrenFromItem();
    }
}

如何使用QML动画将矩形分成2个相等的部分？

1 个答案: