QML Blinking animation

Question

I need a blinking animation for an icon, I did this so far:

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 }
                }

and here I start animatons:

animationOne.start()
animationTwo.start()

But Nothing happens.

After changing parameters to this:

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 }

the animation played and it changed the opacity to 0.5 without changing it to 1 first.

So it seems the problem is the animation calculate the final outcome and plays it.

The question is how to achieve the blinking animation ?

Answer 1

I found a workaround, although it may not be the best way to do it but it works.

first, animations should be changed to

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 }

this way we are sure that the second animation (fading animation) starts after the completion of first animation.

the when starting animations we need to just start the first one:

animationOne.start()