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.animations，但这不起作用(它似乎是 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 上使用自省得到animN"字符串.)然后我使用 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，但可以将其重新影响为新值.从 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.

这是一个简单的例子.

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屋！