[英]Qml: Adding content dynamically to a SequentialAnimation
I have an Qml component with a SequentialAnimation
containing a static sequence of PropertyAction
components: 我有一个带有
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 }
}
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 :( 原因是
propStore
不在我的控制之下,用户向动画序列添加新图像需要我对Qml进行更改:(
How should I go about doing this? 我应该怎么做呢?
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
.) 我的第一个想法是向
anim.animations
动态添加组件,但这没有用(这似乎是SequentialAnimation
的只读属性)。
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
. 我的下一个念头,就是一个添加
ListModel
到外部组件,并在其Component.onCompleted
插槽I追加形状的对象{ image: "animN" }
我得到使用上的反省“animN”字符串propStore
。)然后我用ListModel
来填充Repeater
。 However, the SequentialAnimation
doesn't seem to accept a Repeater
object. 但是,
SequentialAnimation
似乎不接受Repeater
对象。
You can't append directly to anim.animations, but you can reaffect it to a new value. 您不能直接附加到anim.animations,但可以将其重新添加为新值。 Build a JS array from anim.animation, append a dynamically created animation to it, then reaffect it to anim.animations.
从anim.animation构建JS数组,将动态创建的动画附加到该数组,然后将其重新添加到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)
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.