动画中的ListView扣(Animate snap in ListView)

我想，当动画的“啪”的效果ListView捕捉到一个特定的项目。

我启用了“噼噼啪啪”与snapMode: ListView.SnapOneItem财产。目前，它只是去加速到当前项目，并停止，但它会很好，如果我能得到它做一个“反弹”效应，当它停止。

我如何能做到这一点任何想法？

Flickable有一个rebound性质，但这似乎不是一个内部元素的捕捉工作ListView 。

既然你使用SnapOneItem ，你可以插入一旦运动结束后，即一旦反弹效果movementEnded信号被发射。在每个项目上IMO应用动画会在这种情况下矫枉过正。更好的方式是，以动画contentY的财产ListView 。

下面是一个可能的方法产生一个反弹（不知道这是不是你正在寻找确切的疗效）：

ListView {
    id: list
    anchors.fill: parent
    spacing: 10
    snapMode: ListView.SnapOneItem
    model: 100

    delegate: Rectangle {
        width: parent.width
        height: 50
        Text {                // added text to distinguish items
            text: index
            font.pixelSize: 20
            anchors.centerIn: parent
        }
        color: index % 2 ? "lightGray" : "darkGrey"
    }

    onMovementEnded: {
        bounce.start()        // starts the animation when the movement ends
    }

    onCurrentIndexChanged: { 
        if(!list.moving)      // animation started only if the list is not moving
            bounce.start()
    }

    Timer {
        repeat: true
        interval: 2000     // enough time to let the animation play
        running: true
        onTriggered: {
            list.incrementCurrentIndex()
        }
    }

    SequentialAnimation {
        id: bounce
        running: false

        NumberAnimation {
            target: list
            property: "contentY"
            to: list.contentY - 10
            easing {
                type: Easing.InOutBack
                amplitude: 2.0
                period: 0.5
            }
            duration: 250
        }

        NumberAnimation {
            target: list
            property: "contentY"
            to: list.contentY
            duration: 800
            easing {
                type: Easing.OutBounce
                amplitude: 3.0
                period: 0.7
            }
        }
    }
}

当您从一拖或运动释放的项目的反弹产生。的amplitude和period特性可以被调节以获得更强的或更亮效应（这同样适用于的值to属性）。

编辑

正如你所看到的，如果列表是通过移动incrementCurrentIndex()没有发生真正的运动，即在movementEnded信号没有发出。在这种情况下，你可以利用出现的价值变化currentIndex 。我已经修改了例子，这种方法与前一个相结合，以示我已经插入了使用Timer来调用incrementCurrentIndex()函数。

该!list.moving检查被添加，以避免重复动画时列表中移动，并保证一致性，在本例中，由于Timer同时拖动列表中可以产生不一致的跳跃。显然，其他更具体的约束可以根据您的要求进行添加。