列表视图中的并行添加和替换过渡

Question

在ListView中，当我添加新项目时，长添加过渡在该项目之前插入新项目会导致该项目取代并停止其添加过渡处理。如何解决此问题？

import QtQuick 2.0
import QtQuick.Controls 1.0
Item
{
    width: 500
    height: 500
    property ListModel model: ListModel {}
    Button
    {
        id: button
        text: "insert: " + model.count
        onClicked:
        {
            model.insert(Math.round(Math.random() * model.count), {"name": model.count});
        }
    }
    ListView
    {
        model: parent.model
        anchors.top: button.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        delegate: Text {
            text: name
        }
        add: Transition {
            NumberAnimation { properties: "opacity"; from: 0.0; to: 1.0; duration: 1000 }
        }
    }
}

Answer 1

这个问题在这个不错的教程中得到了明确的讨论，这确实是一本关于转换及其处理的好书。我强烈建议阅读它。

直接从处理中断的动画部分引用它：

每个新添加的项目都会经历一个添加过渡，但在过渡完成之前，将添加另一个项目，以替换以前添加的项目。因此，先前添加的项目上的添加过渡将被中断，而是在项目上启动置换过渡。由于中断，不透明度和比例动画尚未完成，因此生成的项目不透明度和比例低于 1.0。

因此，您需要的是位移的过渡。将以下代码添加到ListView应该可以解决您的问题：

displaced: Transition {
    NumberAnimation { properties: "opacity"; to: 1.0; duration: 1000}
}

可以省略duration。它可以帮助调整动画，以避免（或至少限制）加速。可能我们也可以写：

displaced: Transition {
        NumberAnimation { properties: "opacity"; to: 1.0; duration: 1000 * (1 - from)}
}