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.