How to run a animation Multiple Times?

[Shrinidhi Upadhyaya]

@@How to run a animation Multiple Times?
Here is my code:
Rectangle {
id:browserrect
height: parent.height/15
width:parent.width/7
Image {
id: browserimg
source: "homescreen.jpeg"
height: parent.height/15
width:parent.width/7
Text {
id:browsertext
text:"Browsers"
font.bold: true
font.italic: true
font.pixelSize: 27
anchors.centerIn: browserimg
color:"white"
}
}
MouseArea {
id:browsermousearea
anchors.fill: browserrect
onClicked: {
browsertext.color="yellow"
gamestext.color="white"
browseranim.start();
games.visible=false
browser.visible=true
}
}
SmoothedAnimation {
id:browseranim
target:browser
properties: "x"
to:0
duration:500
}
Rectangle {
id:browser
height:500
width:500
x:2000
color:"red"
Image {
id:img
source:"homescreen.jpeg"
}
}
}@@
So whenever i click on the browser button the animation should occur.

[p3c0]

Hi,

-You can use "loops":http://qt-project.org/doc/qt-5/qml-qtquick-animation.html#loops-prop property to make it run that many number of times.-

Edited

[Shrinidhi Upadhyaya]

Hi,
I have tried the loops property but it does not work.

[p3c0]

Sorry loops won't work for SmoothedAnimation.
Check "this":https://bugreports.qt-project.org/browse/QTBUG-19430 for more details.
One way would be to restart animation when stopped as
@
onStopped: start()
@
Or use NumberAnimation

[Shrinidhi Upadhyaya]

The program crashes when i use @onStopped:start()

And when i use the number animation the animation does not occur.

[p3c0]

There should be some other problem. Also you have to reset the initial state of the element to be animated in SmoothedAnimation
For eg try the following example
@
Rectangle {
id: rect
width: 50
height: 50
color: "red"
x: 350
}

SmoothedAnimation { id: anim;
target: rect
from: 350
to:0
property: "x"
duration: 500
easing.type: Easing.InOutQuad
onStopped: { rect.x=350; start() }
}
@

And with NumberAnimation
@
Rectangle {
id: rect
width: 50
height: 50
color: "red"
x: 350
}

NumberAnimation { id: anim;
target: rect
from: 350
to:0
property: "x"
duration: 500
easing.type: Easing.InOutQuad
loops: Animation.Infinite
//onStopped: { rect.x=350; start() }
}
@

[Shrinidhi Upadhyaya]

Okk...But what happens here is that animation does not stop.Once you click the rectangle the animation occurs infintely.What i wanted is after you click it animation should occur and screen stays on.And again when i click the rectangle the animation should occur

[Shrinidhi Upadhyaya]

One thing you can do is when you click on the rectangle and the animation occurs after that you can move the rectangle back to its original position.

@@Rectangle
{
id:rect

mousearea {
onclicked {
anim.start()
rect.x=350 //original position
}
}
}@@

[p3c0]

I thought that you needed to run it infinitely. So does it work now ? If yes then mark it as solved.