animation - GridView 委托(delegate)转换不起作用

Question

我有以下QML GridView:

GridView
{
    id: ueProductGridView

    antialiasing: true

    clip: true

    Layout.fillWidth: true
    Layout.fillHeight: true

    cellWidth: 200
    cellHeight: 200

    delegate: Rectangle
    {
        id: test

        width: 192
        height: 192

        color: "red"

        Text
        {
            anchors.fill: parent

            text: index
        }

        transform:
        [
            Rotation
            {
                id: plateRotation

                angle: -90
                axis { x: 0; y: 1; z: 0 }
                origin.x: -200
                origin.y: 0
            }
        ]   // transform

        SequentialAnimation
        {
            id: addAnimation


            PauseAnimation
            {
                duration: Math.random()*2000
            }

            NumberAnimation
            {
                target: plateRotation
                property: "angle"
                to: 0
                duration: 1000
            }
        }

        SequentialAnimation
        {
            id: removeAnimation


            PropertyAction
            {
                target: test
                property: "GridView.delayRemove"
                value: true
            }

            NumberAnimation
            {
                target: test
                property: "scale"
                to: 0
                duration: 1000
            }

            PropertyAction
            {
                target: test
                property: "GridView.delayRemove"
                value: false
            }
        }

        GridView.onAdd:
        {
            addAnimation.start();
        }   // onAdd

        GridView.onRemove:
        {
            removeAnimation.start();
        }   // onRemove
    }   // delegate

    Component.onCompleted:
    {
        model=10;
    }   // onCompleted:
}   // GridView

现在，为什么委托(delegate)动画不起作用，即为什么GridView为空？有关动画的代码取自tutorial在那里它起作用了。但是，如果我注释/删除有关动画的所有代码，则 delegate 在 GridView 中可见，并且一切正常:

GridView
{
    id: ueProductGridView

    antialiasing: true

    clip: true

    Layout.fillWidth: true
    Layout.fillHeight: true

    cellWidth: 200
    cellHeight: 200

    delegate: Rectangle
    {
        id: test

        width: 192
        height: 192

        color: "red"

        Text
        {
            anchors.fill: parent

            text: index
        }
    }   // delegate

    Component.onCompleted:
    {
        model=10;
    }   // onCompleted:
}   // GridView

Answer 1

与从 View 中插入/删除元素相关的动画是不同 State 之间的 Transition(例如，参见 add )，并且确实称为 ViewTransition。您确实应该深入研究documentation这种类型的页面:它充满了很好的示例，并详细描述了如何实现添加/删除动画。

当您定义 ViewTransition 时，其中引用的任何属性(如果没有不同的目标)都会引用委托(delegate)属性。因此，如果您在 GridView 中写入:

add: Transition {
    NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 }
    NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
}

您是说每次将新委托(delegate)添加到网格时，其opacity 以及scale 属性都应该进行动画处理。顶级动画(如本例所示)并行运行，因此委托(delegate)会同时缩放并可见。

现在，如果您想要为嵌套属性设置动画，例如旋转角度，最简单的方法就是为其别名在代表内部。这样，它就可以像任何其他委托(delegate)属性一样以完全相同的方式进行处理，从而产生更清晰、更简单的代码。

应该注意的是，示例中的动画不起作用，因为它们与 add Transition 关联。这种Transition在模型初始化期间不使用，而是使用populate使用Transition。来自文档:

This property holds the transition to apply to the items that are initially created for a view.

It is applied to all items that are created when:

The view is first created

The view's model changes

The view's model is reset, if the model is a QAbstractItemModel subclass

最后，给一个建议。如果您对元素的添加和删除进行动画处理，尤其是动画速度较慢时，那么将 View 对其他元素进行的调整进行动画处理也很重要。以优雅的方式对它们进行动画处理可以大大改善视觉感受。因此，当您提供 add 和 remove transition 时，还要考虑添加 addDisplaced和一个removeDisplaced 转换。

下面是代码的修改版本，显示了上面讨论的所有要点:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: window
    width: 600
    height: 400
    visible: true

    ListModel {
        id: model
         ListElement { code: "0" }
         ListElement { code: "1" }
         ListElement { code: "2" }
         ListElement { code: "3" }
         ListElement { code: "4" }
         ListElement { code: "5" }
    }

    GridView {
        id: ueProductGridView
        anchors.fill: parent
        antialiasing: true

        clip: true
        cellWidth: 200
        cellHeight: 200

        delegate: Rectangle {
            width: 192
            height: 192

            color: "red"
            property alias angle: rot.angle     // alias!
            Text {
                anchors.centerIn: parent
                text: code
                font.pixelSize: 30
            }

            transform: Rotation {
                id: rot
                angle: -90
                axis { x: 0; y: 1; z: 0 }
                origin.x: -200
                origin.y: 0
            }

            MouseArea {
                anchors.fill: parent
                onClicked: ueProductGridView.model.remove(index)
            }
        }   // delegate

        add: Transition {
            NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 500 }        //since is already at 1.0 we should enforce the start from 0
            NumberAnimation { property: "scale"; easing.type: Easing.OutBounce; from: 0; to: 1.0; duration: 750 }
        }

        addDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.InBack }
        }

        remove: Transition {
            NumberAnimation { property: "scale"; from: 1.0; to: 0; duration: 200 }
        }

        removeDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 200; easing.type: Easing.OutBack }
        }

        populate: Transition {
            NumberAnimation { properties: "angle"; to: 0; duration: 500 }
        }
    }
    Component.onCompleted:{ ueProductGridView.model= model }
}