问题描述
我有一个带有 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!