ListView Загрузить элемент с анимацией по одному - PullRequest
Новая
       14

ListView Загрузить элемент с анимацией по одному

0 голосов
/ 03 октября 2019

У меня есть простой ListView с RotationAnimation при загрузке списка. По сути, у списка есть предопределенная модель или элементы списка. Я хочу загрузить каждый элемент с RotationAnimation, что у меня есть один за другим. Например, первый элемент отображается с анимацией, а через несколько миллисекунд (0,5 мс) следующий элемент отображается с анимацией. Что у меня сейчас есть, так это весь список будет отображаться с анимацией, включая уже все элементы. Можно ли как-то делать то, что я хочу?

Это то, что у меня сейчас есть, когда весь список отображается с анимацией 

ListView {
    width: 240; height: 320
    model: ListModel {
        ListElement{
            name:"One"
        }
        ListElement{
            name:"Two"
        }
        ListElement{
            name:"Three"
        }
    }
    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "Transparent"
        Text {
            anchors.centerIn: parent
            text: name
        }
        Component.onCompleted: seqAnim.start();
                transform: Rotation { id:rotate; origin.x: width; origin.y: height; axis { x: 0.3; y: 1; z: 0 } angle: 0}
                SequentialAnimation {
                            id: seqAnim
                            running: false
                            RotationAnimation { target: rotate; from: 180; to: 0; duration: 3000; easing.type: Easing.OutBack; property: "angle" }
                        }

    }
}

То, что я хочу, это чтобы элементы ListElements отображались один за другим, вводяслева направо

1 Ответ

1 голос
/ 03 октября 2019

С такой статической моделью, которую вы использовали, вы получите анимацию всех элементов, поскольку это происходит в делегате.

С другой стороны, с динамической моделью (где элементы добавляются по пути),Позволяет получать анимацию для каждого элемента в отдельности.

Вам необходимо управлять (соответственно) тем, как элементы модели добавляются в модель на основе вашей практической модели.

Примером демонстрации концепции являетсядобавление элементов модели с таймером, так как вы упомянули, что вам нужен период между анимациями ... 

ListModel {
    id:lModel
    ListElement{
        name:"One"
    }
}
Timer {
    property int indexer: 0
    id:timer
    interval: 1000 ;running: true; repeat: true
    onTriggered: {
        if(indexer === 0)
            lModel.append({name:"Two"})
        else if (indexer === 1)
            lModel.append({name:"Three"})
        else timer.stop()
        indexer++
    }
}

ListView {
    width: 240; height: 320
    model: lModel
    delegate: Rectangle {
        width: 100; height: 30
        border.width: 1
        color: "Transparent"
        Text {
            anchors.centerIn: parent
            text: name
        }
        Component.onCompleted: seqAnim.start();
        transform: Rotation { id:rotate; origin.x: width; origin.y: height; axis { x: 0.3; y: 1; z: 0 } angle: 0}
        SequentialAnimation {
            id: seqAnim
            running: false
            RotationAnimation { target: rotate; from: 180; to: 0; duration: 3000; easing.type: Easing.OutBack; property: "angle" }
        }

    }
}
...