Qml：动态地向SequentialAnimation添加内容

Posted 2021-04-11

我有一个带有SequentialAnimation的Qml组件，其中包含PropertyAction组件的静态序列：

SequentialAnimation {
  id: anim
  running: true

  PropertyAction { target: icon; property: "iconid"; value: propStore.anim1 }
  PropertyAction { target: icon; property: "iconid"; value: propStore.anim2 }
  PropertyAction { target: icon; property: "iconid"; value: propStore.anim3 }
}

这实现了特定图标的动画。但是现在我想通过动态构建序列来使它有点动态。原因是propStore不在我的控制之下，用户在动画序列中添加新图像需要我对Qml进行更改:(

我该怎么做呢？

我的第一个想法是动态添加组件到anim.animations，但这不起作用（它似乎是SequentialAnimation的只读属性。）

我的下一个想法是在外部组件中添加一个ListModel，并在其Component.onCompleted插槽中添加形状{ image: "animN" }的对象（我在propStore上使用内省得到“animN”字符串。）然后我使用ListModel来填充Repeater。然而，SequentialAnimation似乎不接受Repeater对象。

答案

您不能直接附加到anim.animations，但可以将其重新生成为新值。从anim.animation构建一个JS数组，向其附加一个动态创建的动画，然后将其重新影响到anim.animations。

这是一个简单的例子。

Component
{
    id: component
    SequentialAnimation
    {
        id: seq
        property string color
        PropertyAction {target: rect; property: "color"; value: seq.color}
        PauseAnimation { duration: 500 }
    }
}

function addAnim(color)
{
    var listAnim = []
    for(var i=0; i<anim.animations.length; i++)
        listAnim.push(anim.animations[i])
    var temp = component.createObject(root, {"color":color})
    listAnim.push(temp)
    anim.animations = listAnim
}

    Rectangle
{
    id: rect
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: row.top
    anchors.margins: 40
    border.width: 1

    SequentialAnimation
    {
        id: anim
    }
}

Row
{
    id: row
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 50
    anchors.horizontalCenter: parent.horizontalCenter
    spacing: 10

    Button {
        text: qsTr("Play")
        onClicked: anim.start()
    }
    Repeater
    {
        model: ["red", "green", "blue", "cyan", "magenta", "yellow"]

        Button {
            text: qsTr("Add %1").arg(modelData[0])
            onClicked: addAnim(modelData)
        }
    }
}