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屋!