Qml:将内容动态添加到 SequentialAnimation

本文介绍了Qml:将内容动态添加到 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) } } }