javascript - 如何在 qml 中为多个对象设置动画

标签 javascript jquery animation qml

我正在尝试使用顺序动画同时为多个对象设置动画。出于我的目的,我需要从顺序动画(和数字动画)减速的外部访问它。这工作正常,但在设置时一次只能为一个对象设置动画。如果我为每个对象定义一个数字动画,这将起作用 - 但我不想这样做,因为稍后我想在大小不同的循环内分配动画。所以我故意调用同一个数字的动画对象。有没有一种方法可以在不定义每个数字动画的情况下对一堆对象进行动画处理?这是一些代码:

   Component.onCompleted: {

   seq.access.target = rec1
   seq.access.property = "y"
   seq.access.to = 50
   seq.start()


   seq.access.target = rec2
   seq.access.property = "y"
   seq.access.to = 50
   seq.start()

}

Rectangle{
    id: rec1
    width: 50
    height: 50
    color: "red"
}
Rectangle{
    id: rec2
    x: 100
    width: 50
    height: 50
    color: "blue"
}

SequentialAnimation{
    id: seq
    property alias access: num
    NumberAnimation{id: num}
}

更新嗨,感谢您的回复。 GrecKo的解决方案已经解决了上述问题,但我还没有解决...我需要能够在循环中进行每个目标或目标设置。我认为通过让上面的代码工作,如果数组中的目标相同,它应该/将会工作:

...
property int i
Component.onCompleted: {

    var array = [rec1, rec2]

    for(i = 0; i < array.length; i++){

        seq.access.targets = [array[i]]
        seq.access.property = "y"
        seq.access.to = 50
        seq.start()

    }


}

Rectangle{
    id: rec1
    width: 50
    height: 50
    color: "red"
}

Rectangle{
    id: rec2
    x: 100
    width: 50
    height: 50
    color: "blue"
}
SequentialAnimation{
    id: seq
    property alias access: num
    NumberAnimation{id: num}

}

但是它不起作用。这就是我需要做的。谢谢

最佳答案

如果你想对多个对象应用相同的动画,可以使用 targets property为您的动画指定多个目标。

在您的示例中,您将像这样使用它:

Component.onCompleted: {
    seq.access.targets = [rec1, rec2]
    seq.access.property = "y"
    seq.access.to = 50
    seq.start()
}

关于javascript - 如何在 qml 中为多个对象设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37285842/

相关文章:

javascript - Createjs从indesign中导入文件并将其放置在 Canvas 上

javascript - 使用 JavaScript 操作多个(可预测的)命名 DIV

javascript - 根据 jquery 中选定的先前表单隐藏选项

jquery - Sequelize 关联 On 或 ON

jquery - 淡入淡出效果和叠加框

c++ - 使用 QPainter 流畅绘图

JavaScript - 变量未定义

javascript - 如何将多个d3.csv数据转换为数字?

javascript - jquery图像加载()和在IE中设置超时冲突

javascript - 停止由 $animate.addClass 启动的动画