![QML 闪烁动画](https://linux22.com/image/980798/QML%20%E9%97%AA%E7%83%81%E5%8A%A8%E7%94%BB.png)
我需要一个图标的闪烁动画,到目前为止我做了以下事情:
Icon{
id: bigLike
name: "like"
color: "white"
opacity: 0
width: parent.width / 2.5
height: parent.height / 2.5
anchors.centerIn: parent
PropertyAnimation { id: animationOne; target: bigLike;alwaysRunToEnd: true; property: "opacity"; to: 1; duration: 1000 }
PropertyAnimation { id: animationTwo; target: bigLike;alwaysRunToEnd: true; property: "opacity"; to: 0; duration: 1000 }
}
这里我开始动画:
animationOne.start()
animationTwo.start()
但什么也没有发生。
将参数更改为如下内容后:
PropertyAnimation { id: animationOne; target: bigLike;alwaysRunToEnd: true; property: "opacity"; to: 1; duration: 1000 }
PropertyAnimation { id: animationTwo; target: bigLike;alwaysRunToEnd: true; property: "opacity"; to: 0.5; duration: 1000 }
动画播放后,它将不透明度更改为 0.5,而不是先将其更改为 1。
因此看起来问题在于动画计算最终结果并播放它。
问题是如何实现闪烁动画?
答案1
我找到了一种解决方法,虽然它可能不是最好的方法,但它确实有效。
首先,动画应该改为
PropertyAnimation { id: animationOne; target: bigLike;alwaysRunToEnd: true; property: "opacity"; to: 1; duration: 500
onStopped: animationTwo.start()}
PropertyAnimation { id: animationTwo; target: bigLike;alwaysRunToEnd: true; property: "opacity"; to: 0; duration: 300 }
这样我们就可以确保第二个动画(淡入淡出动画)在第一个动画完成后开始。
当启动动画时我们只需要启动第一个动画:
animationOne.start()