Qml：将内容动态添加到SequentialAnimation [英] Qml: Adding content dynamically to a SequentialAnimation

问题描述

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

I have an Qml component with a SequentialAnimation containing a static sequence of PropertyAction components:

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进行更改：（

This accomplishes that a specific icon is animated. However now I'd like to make it a little bit dynamic by building the sequence dynamically. The reason is that the propStore isn't under my control, and users adding new images to the animation sequence require me to make changes to the Qml :(

我应该怎么做？

我的第一个想法是向 anim动态添加组件。动画，但这是行不通的（它似乎是 SequentialAnimation 的只读属性。）

My first thought was to dynamically add components to anim.animations, but that doesn't work (it seems to be a read-only property of SequentialAnimation.)

我的下一个想法是将 ListModel 添加到外部组件中，并添加到其 Component.onCompleted 插槽中，我追加了形状为 {image： animN} 的对象（我在 propStore 。）然后使用 ListModel 填充 Repeater 。但是， SequentialAnimation 似乎不接受 Repeater 对象。

My next thought was to add a ListModel to the outer component, and in its Component.onCompleted slot I append objects of the shape { image: "animN" } (I get the "animN" strings using introspection on propStore.) Then I use the ListModel to populate a Repeater. However, the SequentialAnimation doesn't seem to accept a Repeater object.

推荐答案

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

You can't append directly to anim.animations, but you can reaffect it to a new value. Build a JS array from anim.animation, append a dynamically created animation to it, then reaffect it to anim.animations.

这是一个简单的示例。

Here's a simple example.

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)
        }
    }
}

这篇关于Qml：将内容动态添加到SequentialAnimation的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！