QML ListView填充不透明度动画 [英] QML ListView populate opacity animation
问题描述
我有一个 ListView ，我想为 populate ViewTransition创建淡入效果。但是它没有按预期工作。似乎该委托的初始不透明度为1.0，因此我需要设置动画的 from 属性。
但它看起来像是在闪烁。因此，我需要将代表的初始不透明度值设置为 0.0 。
现在，我遇到了一个新问题...当我轻拂列表时，代表默认不透明度为 0.0 ，因此它们是不可见的。
所以我的问题是：任何人都可以为创建完美的淡入动画吗？填充ListView的属性？
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?
谢谢
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"
}
}
}
推荐答案
闪烁是由于您的 PauseAnimation ，在整个持续时间内，不透明度保持为1。这是一个漂亮的图表，显示了 population 过渡期间代表随时间的不透明性：
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 :
您需要在 PauseAnimation ，并且在 populate 过渡中，不能直接在委托中使用（过渡仅应用于可见的委托，这就是为什么内容区域下方的委托保持不可见的原因）。
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).
为此，请删除代理中的 opacity：0 ，然后添加 PropertyAction 在过渡中 PauseAnimation 之前：
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 }
}
}
这篇关于QML ListView填充不透明度动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
