QML列SmoothedAnimation未按预期进行操作

Question

当我更改计时器中的cluster_Odo_0.position时，我可以使数字从赃物滚动到顶部。但是，当交易进行到9时，我能够看到所有数字都从9爬到零。如何使从9突然改变为0，以使中间数字不可见？

如何使SmoothedAnimation工作，

main.xml：---

    GuageNumbers{
        id: cluster_Odo_0
        x : 448
        y : 174
    }

Timer {
    interval: 1000
    repeat: true
    running: true
    onTriggered: {
        if(cluster_Odo_0.position == 9)
            cluster_Odo_0.position = 0;
        else
            cluster_Odo_0.position ++
    }
}

GuageNumbers.qml文件：---导入QtQuick 2.0

Item {
    id: container
    //anchors.centerIn: parent
    width: 20
    height: 20
    clip: true
    property int position: 0
    Column {
        id: image
        y: -container.position * 20
        Repeater {
            model: 10
            delegate: Rectangle {
                width: 20
                height: 20
                color: "#00000000"
                Text {
                    anchors.fill: parent
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: index
                    font.pixelSize: 16
                    color: "orange"
                }
            }

        }

        Behavior on x { SmoothedAnimation { velocity: 50;duration: 500; loops: Animation.Infinite; } }
                Behavior on y { SmoothedAnimation { velocity: 50;duration: 600; loops: Animation.Infinite; } }
        focus: true

        //spacing: 1
    }
}

Answer 1

另一种解决方案是将乐队移动到持续时间为0的初始位置，我认为代码可以更好地描述这一点：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 400
    height: 300

    Rectangle {
        width: 42
        height: 52
        anchors.centerIn: parent
        border { width: 1; color: "#999" }
        Rectangle {
            width: 40
            height: 50
            anchors.centerIn: parent
            clip: true
            gradient: Gradient {
                GradientStop { position: 0.0; color: "white" }
                GradientStop { position: 0.5; color: "lightgray" }
                GradientStop { position: 1.0; color: "white" }
            }

            Column {
                id: container
                property int pos: 0
                y: -pos * 50
                x: 0
                Repeater {
                    model: 11
                    delegate: Text {
                        text: index % 10
                        width: 40
                        height: 50
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.pixelSize: 24
                        color: "orange"
                    }
                }
                Behavior on y {
                    SequentialAnimation {
                        NumberAnimation {
                            id: bouncebehavior
                            duration: 900
                            easing {
                                type: Easing.OutBack
                                amplitude: 10.0
                                period: 1.5
                            }
                        }
                        ScriptAction {
                            script: container.goBack();
                        }
                    }
                }
                function goBack()
                {
                    if(container.pos == 10)
                    {
                        bouncebehavior.duration = 0;
                        container.pos = 0;
                        bouncebehavior.duration = 900;
                    }
                }
            }
        }

        Timer {
            interval: 1000
            repeat: true
            running: true
            onTriggered: {
                container.pos ++
            }
        }
    }
}