How to make rotation animation turns 90 degrees on each click?

Question

I have a function called turnWheel:

turnWheel : function() {
    var el = this.getContainerElement().getDomElement();
    qx.bom.element.Animation.animate(el, {
        duration: 300, 
        timing: "linear", 
        keep: 100, 
        origin: "50% 50%",
        keyFrames : {
          0: {rotate: "0deg"},
          50: {rotate: "45deg"},
          100 : {rotate : "90deg"}
        }
    });
}

But when I execute turnWheel, it turns an image for 90 degrees. But if I execute again, the image goes back to original place and rotates the same 90 degrees. What I want to achieve is, the image turns 90 degrees on each click, and moves on to the next 90 degrees on 2nd click, and so on.

What did I miss?

Answer 1

You can calculate the rotation on every call of the method either reading the former value of the rotation or simply by storing a external counter. Check out the playground sample if created to show you a working solution:

http://tinyurl.com/ox653l5