动画中的ListView卡 [英] Animate snap in ListView

问题描述

我想动画啪的效果时， 的ListView 捕捉到特定项目。

I would like to animate the "snap" effect when a ListView snaps to a specific item.

我启用了噼噼啪啪的 SNAPMODE：ListView.SnapOneItem 属性。目前，它只是去加速到当前项目，并停止，但它会很好，如果我能得到它做一个反弹效应，当它停止。

I enable "snapping" with the snapMode: ListView.SnapOneItem property. Currently it just de-accelerates to the current item and stops, but it would be nice if I could get it to make a "bounce" effect when it stops.

，我怎么能做到这一点任何想法？

Any ideas about how I can do this?

Flickable 拥有的 反弹 属性，但是这似乎为捕捉一个的ListView中的元素<到不行/ code>。

Flickable has a rebound property, but this seems to not work for the snapping on elements inside a ListView.

推荐答案

由于您使用 SnapOneItem ，你可以一次移动完成后，即一旦插入一个反弹效应< A HREF =htt​​p://qt-project.org/doc/qt-5/qml-qtquick-flickable.html#movementEnded-signal相对=nofollow> movementEnded 信号被发射。在每个项目上国际海事组织应用动画将是在此情况下矫枉过正。更好的将是动画 contentY 的 ListView控件的属性。

Since you used SnapOneItem, you can insert a bounce effect once the movement is finished, i.e. once movementEnded signal is emitted. IMO applying an animation on each item would be overkill in this case. Better would be to animate the contentY property of the ListView.

以下是（不知道这是否是您正在寻找确切的疗效），它产生一个反弹的可能方式：

The following is a possible approach which produces a bounce (don't know if this is the exact effect you are searching for):

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
            }
        }
    }
}   

当你从一个拖动或移动发布的项目反弹产生。在振幅和周期属性可以调整，以获得更强的或较轻的效果（同样适用于价值到属性）。

When you release the items from a drag or movement the bounce is produced. The amplitude and period properties can be adjusted to obtain a stronger or lighter effect (the same applies for the value of to properties).

如您所见，如果列表是通过移动incrementCurrentIndex（）没有真正发生移动，即 movementEnded 信号不发射。在这种情况下，你可以利用这一点发生了 CURRENTINDEX 的价值的变化。我已经修改了例子，这种做法与previous之一来组合和展示我所插入的使用率定时调用 incrementCurrentIndex （）功能。

As you've seen, if the list is moved via incrementCurrentIndex() no real movement occurs, i.e. the movementEnded signal is not emitted. In such a case you can exploit the change of value that occurs for the currentIndex. I've modified the example to combine this approach with the previous one and to show the usage I've inserted a Timer to call incrementCurrentIndex() function.

的！list.movi​​ng 检查添加，以避免重复动画时列表中移动，并保证在本例中的一致性，因为定时器同时拖动列表可产生不一致的跳跃。显然，其他更具体的限制，可以添加，根据您的要求。

The !list.moving check is added to avoid double animations when the list is moved and to guarantee consistency in the example, since the Timer can generate inconsistent jumps while the list is dragged. Clearly, other more specific constraints can be added, depending on your requirements.

这篇关于动画中的ListView卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！