CODEWITHSUNDEEP
qtqml
Sherafati
Sherafati

Reputation: 216

How can I animate a button's color so it changes from right to left?

I have this simple Rectangle and i want to animate it's color change in a way that the new color fills in from right to the left of it.

Rectangle{
    width:100
    height:150
    color:"green"
}

What should I do? What kind of Animation or Transition do I need in this case?

Upvotes: 0

Views: 427

Answers (1)

Adriano Campos
Adriano Campos

Reputation: 1199

First draw a simple Rectangle with the original color, "green" in this example:

Rectangle{
    width:100
    height:150
    color:"green"
}

Then draw another rectangle on top but with width equal to 0 and the new color, "red" in this example:

Rectangle{
    id: newColorRect
    width:0
    height:150
    color:"red"
}

Finally with a animation you can animate the color change, changing the width of the newColorRect rectangle.

PropertyAnimation {
    id: colorAnimation
    target: newColorRect
    properties: "width"
    to: 100
    duration: 1000
}

Component.onCompleted: {
    colorAnimation.start()
}

Upvotes: 1

Related Questions