☰

QML 闪烁动画

tag-icon • tag-icon application-development ubuntu-sdk qml animations
QML 闪烁动画

我需要一个图标的闪烁动画，到目前为止我做了以下事情：

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()

相关内容