问题
I have a ListView and I want to create an fade-in effect for populate ViewTransition. But it not works as expected. It seems that initial opacity of the delegate is 1.0 and so I need to set from property of the animation.
But it looked like a flashing. So I need to set initial opacity value of my delegate to 0.0.
Now I have a new problem... when I flick the list, delegates default opacity is 0.0 and so they are invisible.
So my question: Can anybody create a perfect fade-in animation for populate property of the ListView?
Thank you
import QtQuick 2.9
Rectangle {
id: root
property alias model: list.model
ListView {
id: list
width: 300; height: 500
model: sampleModel
spacing: 30
footer: Item { width: 1; height: 30 }
populate: Transition {
id: _popuTrans
SequentialAnimation {
PauseAnimation {
duration: 100*_popuTrans.ViewTransition.index
}
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200 }
PropertyAction { property: "opacity"; value: 1.0 }
}
}
delegate: Component {
Column {
width: parent.width
spacing: 13
opacity: 0.0
Rectangle {
width: parent.width*0.84
height: 1
color: colorPalette.altBackgroundColor
anchors.horizontalCenter: parent.horizontalCenter
}
Row {
width: parent.width
spacing: width*0.07
Text {
id: valueTxt
font { pointSize: 13 }
color: "black"
width: parent.width*0.64
text: model.body
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignRight
}
Text {
id: keyTxt
font { pointSize: 15; weight: Font.Medium }
color: "black"
width: parent.width*0.29
text: model.title
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignRight
}
}
}
}
}
ListModel {
id: sampleModel
ListElement {
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
}
ListElement {
title: "وزن"
body: "1.3kg"
}
ListElement {
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
}
ListElement {
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
}
ListElement {
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
}
ListElement {
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
}
ListElement {
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
}
ListElement {
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
}
ListElement {
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
}
ListElement {
title: "وزن"
body: "1.3kg"
}
ListElement {
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
}
ListElement {
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
}
ListElement {
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
}
ListElement {
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
}
ListElement {
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
}
ListElement {
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
}ListElement {
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
}
ListElement {
title: "وزن"
body: "1.3kg"
}
ListElement {
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
}
ListElement {
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
}
ListElement {
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
}
ListElement {
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
}
ListElement {
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
}
ListElement {
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
}ListElement {
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
}
ListElement {
title: "وزن"
body: "1.3kg"
}
ListElement {
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
}
ListElement {
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
}
ListElement {
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
}
ListElement {
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
}
ListElement {
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
}
ListElement {
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
}ListElement {
title: "ابعاد"
body: "عرض: 123mm\nطول: 650mm\nارتفاع: 17mm"
}
ListElement {
title: "وزن"
body: "1.3kg"
}
ListElement {
title: "پردازنده"
body: "Qualcomm Snapdragon 835 3.1GHz"
}
ListElement {
title: "سیستم عامل"
body: "Microsoft Windows 10 Starter"
}
ListElement {
title: "رنگ‌ها"
body: "قرمز، نوک مدادی، سفید"
}
ListElement {
title: "اتصالات"
body: "2 x USB 3.1 Gen 1 Type-A\n1 x Audio jack: headphone / mic-in\n1 x Combo Nano SIM (tray with needle)\n1 x MicroSD card reader slot (supports up to 256GB)\n1 x HDMI\n1 x DC in"
}
ListElement {
title: "باتری"
body: "Li-ion 8345mAh Turbo Charge Capable"
}
ListElement {
title: "حافظه RAM"
body: "DDR4 2x8GB AData"
}
}
}
回答1:
The flashing is due to your PauseAnimation, the opacity stays at 1 during its entire duration. Here is a beautiful graph illustrating the delegate's opacity over time during the populate transition :
You need to set the opacity of the delegates to 0 before the PauseAnimation, and in the populate transition, not directly in the delegate (the transition is only applied to visible delegates, that's why delegates below the content area stay invisible).
In order to do this, remove the opacity: 0 in your delegate and just add a PropertyAction before the PauseAnimation in your transition:
populate: Transition {
id: _popuTrans
SequentialAnimation {
PropertyAction { property: "opacity"; value: 0.0 }
PauseAnimation { duration: 100*_popuTrans.ViewTransition.index }
NumberAnimation { property: "opacity"; from: 0.0; to: 1.0; duration: 200; easing.type: Easing.InOutQuad }
}
}
来源：https://stackoverflow.com/questions/49772386/qml-listview-populate-opacity-animation