Qt 列表视图滚动动画

我想为QML

ListView

实现一个滚动动画。下面是一个示例图像：

有谁能建议我实施这个计划吗

谢谢。

提供了许多有趣的示例，介绍了如何为

列表视图

设置动画，这些操作包括

填充

（组件创建时初始项的转换）、

添加

、

删除

（自解释）以及其他操作

给定一个

列表视图

，您可以为要设置动画的每个操作定义一个元素

转换

。可以通过简单地组合基本动画来创建（或多或少）您感兴趣的复杂行为，从而创建复合动画（另请参见实际示例）

这里是

列表视图的定义（第一个链接的文档提供了一些漂亮的图像）：

最后，请注意，可以通过使用着色器并结合元素上的动画和代理/代理元素上的变换来获得某些行为。一个很好的例子是，条形项目上的着色效果（请参见
[ShaderEffect][5]
）与
列表视图上的简单
转换相结合

编辑
提供自定义滚动，如示例中所示，需要考虑
项在
列表视图中的位置。工作解决方案的关键是找到一种方法来计算视图可见部分中
项的当前位置
，并使用该值来计算适当的转换
ListView
源于
Flickable
，它有几个用于此目的的有用属性

但是，
项
的
y
属性是指
列表视图
中内容的总高度。要使其位置为可见区域的起点，我们可以使用属性。在这种情况下，一幅画抵得上千言万语：


y
和
contentY
之间的差异提供了一个可用于计算所需转换因子的值（可能与
列表视图的
高度相关）。事实上，随着
列表视图
的翻转，这两个值及其差异会发生变化，从而改变特定
项
的转换因子

这种转变只涵盖了问题的一部分。一旦轻弹/移动结束，
项
s动画必须“完成”，以使所有可见的
项
s可用。为此，我们可以利用及其
when
属性，仅在需要时（即当或结束时）激活完成动画

鉴于所有这些（无聊的）介绍，让我们考虑第二个动画（更简单的一个）。在这里，我们可以使用以获得所需的效果。
列表视图中的
委托
代码如下所示：

ListView {
    id: list
    model: 100
    spacing: 10

    delegate: Rectangle {
        id: itemDelegate
        property int listY: y - list.contentY       // stores the difference between the two values
        width: parent.width
        height: 50
        border.color: "lightgray"
        color: "red"

        Binding {
            target: itemDelegate
            property: "scale"
            value: 1 - listY / list.height / 2      // the "scale" property accepts values in the range [0, 1]
            when: list.moving || list.flicking || list.dragging     // ...when moved around
        }

        Binding {
            target: itemDelegate
            property: "scale"
            value: 1                                // flick finished --> scale to full size!
            when: !(list.moving || list.dragging)   // not moving or dragging any more
        }

        Behavior on scale {
            NumberAnimation { duration: 100; to: 1}
            enabled: !(list.flicking || list.dragging) // active only when flick or dragging ends!
        }
    }
}

第一个
绑定
在
列表
的基础上定义缩放因子，而第二个
绑定只在
列表视图
不移动时才将缩放设置为
1
。最后的
行为
是平滑过渡到完全缩放的
项目
所必需的

第三种效果可通过以下类似方式获得：

ListView{
锚定。填充：父级
id:列表
间距：10
型号：100
代表：矩形{
id:itemDelegate
属性int listY:y-list.contentY
房地产房地产角度Z:（90*listY）/list.height//0-90度
变换：旋转{origin.x:width/2；origin.y:30；轴{x:1；y:0；z:0}角度：角度z}
//变换：旋转{On.x；0；Orth.y；30；轴{x：1；y：1；z：0 }角：angle z } p> a显示从内置的QML类型创建的模型的数据，如<代码> ListMead < /C> >和 XMListMasks> /Cube >，或C++中自定义的模型类，继承自<代码> QAcExtListMease>代码>。
视图有一个定义要显示的数据的模型和一个定义数据应如何显示的委托。委托是为路径上的每个项目实例化的。这些项目可以被轻弹以沿路径移动。
经过长时间的工作、研究和@BaCaRoZzo的大力帮助（感谢@BaCaRoZzo），我终于找到了正确的解决方案。只需使用
Component.onCompleted（）
事件处理程序来运行与每个代理关联的动画

这里是一个例子，享受吧

import QtQuick 2.3

ListView {
    anchors.fill: parent
    id: list
    model: 100
    cacheBuffer: 50

    delegate: Rectangle {
        id: itemDelegate
        Component.onCompleted: showAnim.start();
        transform: Rotation { id:rt; origin.x: width; origin.y: height; axis { x: 0.3; y: 1; z: 0 } angle: 0}//     <--- I like this one more!
        width: parent.width
        height: 50
        color: index % 2 === 0 ? "#EEE" : "#DDD"
        SequentialAnimation {
            id: showAnim
            running: false
            RotationAnimation { target: rt; from: 180; to: 0; duration: 800; easing.type: Easing.OutBack; property: "angle" }
        }
    }
}


导入QtQuick 2.3
列表视图{
锚定。填充：父级
id:列表
型号：100
缓存缓冲区：50
代表：矩形{
id:itemDelegate
Component.onCompleted:showAnim.start（）；
变换：旋转{id:rt；原点.x:宽度；原点.y:高度；轴{x:0.3；y:1；z:0}角度：0}//我知道ListView和ViewTransition。请注意，我想要滚动动画，而不仅仅是添加/删除/…替换动画。你能给我一些建议吗？对不起，我似乎完全没有抓住要点。关于这个问题的要点，我已经从功能上研究了同样的问题，我记得一个有趣的例子。我要去pos我会尽快找到链接（并重新编辑答案）。再次抱歉。@S.M.Mousavi对延迟表示抱歉。我的示例仅针对所选项目，因此没有逐渐过渡，我不在办公室，最后但并非最不重要的一点是，我在
y
方面遇到了一些问题（只是在深夜…更详细的故事，最后感谢Jens）.无论如何，我希望这种方法能满足你的需要。非常感谢。你让我对这个问题有了更好的看法。我为你和任何人分享了我的最终解决方案。我想给你一些分数，但似乎没有任何办法：（再次感谢你这样做。写答案很有趣，你的解决方案给了我一些好主意。+1
ListView {
    anchors.fill: parent
    id: list
    spacing: 10
    model: 100

    delegate: Rectangle {
        id: itemDelegate
        property int listY: y - list.contentY
        property real angleZ: (90 * listY)  / list.height       // 0 - 90 degrees
        transform: Rotation { origin.x: width / 2; origin.y: 30; axis { x: 1; y: 0; z: 0 } angle: angleZ}
        //transform: Rotation { origin.x: 0; origin.y: 30; axis { x: 1; y: 1; z: 0 } angle: angleZ}     <--- I like this one more!
        width: parent.width
        height: 50
        border.color: "lightgray"
        color: "red"

        Binding {
            target: itemDelegate
            property: "angleZ"
            value: 0
            when: !(list.moving || list.dragging)
        }

        Behavior on angleZ {
            NumberAnimation {duration: 200; to: 0}
            enabled: !(list.flicking || list.dragging)
        }
    }
}

import QtQuick 2.3

ListView {
    anchors.fill: parent
    id: list
    model: 100
    cacheBuffer: 50

    delegate: Rectangle {
        id: itemDelegate
        Component.onCompleted: showAnim.start();
        transform: Rotation { id:rt; origin.x: width; origin.y: height; axis { x: 0.3; y: 1; z: 0 } angle: 0}//     <--- I like this one more!
        width: parent.width
        height: 50
        color: index % 2 === 0 ? "#EEE" : "#DDD"
        SequentialAnimation {
            id: showAnim
            running: false
            RotationAnimation { target: rt; from: 180; to: 0; duration: 800; easing.type: Easing.OutBack; property: "angle" }
        }
    }
}