How to run a animation Multiple Times?



  • @@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.


  • Moderators

    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



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


  • Moderators

    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



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

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


  • Moderators

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



  • 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



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


  • Moderators

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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.