Question

我正在尝试在PathView委托中为属性设置动画。

    Component {
        id: pathViewDelegate
        Item {
            Text {
                id: tempText
                color: "red"
                text: "test"
            }

            function intoView() {
                myAnimation.start()
            }

            SequentialAnimation {
                id: myAnimation
                PropertyAnimation {duration: 1000; target: tempText; properties: "color"; to: "green"}
                PropertyAnimation {duration: 1000; target: tempText; properties: "color"; to: "yellow"}
            }
        }
    }

我知道如何正确显示PathView（如线性轮播）的唯一方法是将currentItem裁剪到屏幕之外。换句话说，显示的项目在我的PathView中始终为currentIndex + 1。

    PathView {
        id: mainCarousel
        width: parent.width
        height: parent.height

        interactive: false
        highlightMoveDuration: 300

        clip: true

        model: pathViewModel
        delegate: pathViewDelegate

        path: Path {
            startX: -mainCarousel.width*0.5
            startY: mainCarousel.height/2

            PathLine { x: mainCarousel.width*0.5; y: mainCarousel.height/2 }
            PathLine { x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 }
        }
    }
}

因此，当我尝试使用“ mainCarousel.currentItem.intoView（）”实现一个函数时，它将对剪切在屏幕外的项目进行动画处理。我知道没有办法执行“ currentItem + 1”，但是还有其他解决方法吗？

编辑：完整的示例代码

ListModel {
    id: pathViewModel
    ListElement {header: "text 1"}
    ListElement {header: "text 2"}
    ListElement {header: "text 3"}
    ListElement {header: "text 4"}
}
Component {
    id: pathViewDelegate

    Item {
        width: mainCarousel.width
        height: mainCarousel.height

        Text {
            color: "red"
            text: header
        }

        function runAnimation() {
            myAnimation.start()
        }

        SequentialAnimation {
            id: myAnimation
            PropertyAnimation {property: "color"; to: "green"; duration: 1000}
            PropertyAnimation {property: "color"; to: "yellow"; duration: 1000}
            PropertyAnimation {property: "color"; to: "purple"; duration: 1000}
        }
    }
}
PathView {
    id: mainCarousel
    width: 500
    height: 500

    interactive: false
    highlightMoveDuration: 300

    clip: true

    model: pathViewModel
    delegate: pathViewDelegate

    path: Path {
        startX: -mainCarousel.width*0.5
        startY: mainCarousel.height/2

        PathLine { x: mainCarousel.width*0.5; y: mainCarousel.height/2 }
        PathLine { x: mainCarousel.width*(mainCarousel.count-0.5); y: mainCarousel.height/2 }
    }
}
MouseArea {
    id: telltaleMouseArea
    anchors.fill: mainCarousel
    onClicked: {
        mainCarousel.incrementCurrentIndex()
        mainCarousel.currentItem.runAnimation()
    }
}

显示的初始项目是“文本2”。最初，currentItem是“文本1”。在代码中，当单击MouseArea时，将对“文本2”进行动画处理，但它不在屏幕上。我只是想为可见的项目设置动画。

Answer 1

将动画更改为以下内容：

Text {
    color: "red"
    text: header

    SequentialAnimation on color{
        id: myAnimation
        ColorAnimation {
            to: "green"
            duration: 1000
        }
        ColorAnimation {
            to: "yellow"
            duration: 1000
        }
        ColorAnimation {
            to: "purple"
            duration: 1000
        }
    }
}

并确保您的currentItem与以下对象一起使用：startX: mainCarousel.width*0.5

进入PathView委托

1 个答案: