Qml：将内容动态添加到 SequentialAnimation答案

【问题标题】：Qml: Adding content dynamically to a SequentialAnimationQml：将内容动态添加到 SequentialAnimation
【发布时间】：2014-12-18 13:38:35
【问题描述】：

我有一个带有 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 对象。

【问题讨论】：

标签： qt animation qml

【解决方案1】：

您不能直接附加到 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)
        }
    }
}

【讨论】：