Circular animation

i want to reduce slowly the green circle. My idea is to make timer and the green circle will slowly become black. How can i make that happen? For now it’s 3 circles, the back, the green and the front which is the same color as the back.


I can give you some hints until I can provide a more complete solution, but basically:

Use Axure 8 for the Rotate action. Then you’ll need 2 green semi-circles and a black circle beneath and 1 black semi-circle as a mask. You’ll layer them, then rotate one green by 360 degrees. At 180 hide the second green one, we don’t need it anymore and show the black mask where the first green one started. Then as the green one rotates for the second 180 degrees it will slide under the black semi-circle mask.

It’s all an illusion :slight_smile:

1 Like

(i didn’t reload the page for a short time^^)

I want to do smth like this:

What do you mean “as a mask”?


I’ve attached an example. The first one is showing how it works. The second one is exactly the same but I broke apart the pieces so it’s a little easier to see what is happening. The third is exactly the same as the first but with one more piece to make it look more like your sketch.

Imagine if you had 4 pieces of paper like those shapes, how would you stack and move them to create the effect you’re looking for? That’s basically all I did. Just a simple illusion.

This is in Axure 8. You can’t do it in Axure 7 without a lot of frustration.
Untitled.rp (62.5 KB)

2 Likes

Actually i did it :smiley:

You can see it under “run” window
Untitled Document

Now about health window. As you can see i’m trying to slowly change to yellow, orange and finally red.
I’m losing it at times to make more smoother, but i can’t find what i need to increase/decrease.
Any hint?


Actually here is the file for a closer look

studio4.rp (840 KB)

Hi NickosD,

If you’re using 8.0, you can use the new “Set Opacity” action to slowly fade out the circular halves as they rotate. If you put shapes of the other colors (yellow, orange, red) under the green shapes and rotate them together with the green shapes, you can lower the opacity on each layer to create the illusion that the widget is changing color when in reality, its opacity is being set to 0 and revealing the color of the shape beneath it.

For example: As the green 2 shape rotates, its opacity slowly fades to 0, revealing the yellow shapes beneath. As the yellow ones rotate, they slowly fade to 0, revealing the orange ones, etc…

I’ve attached an edited version of your file that has the solution applied. Hopefully that helps!
studio4 EDIT.rp (65.6 KB)

1 Like

This is pretty close to something that I’m looking for, but ideally the circle would remain animated and kind of waver back and forth to indicate the tracking of say internet performance.

Add more rotate actions then use a set of looping events to keep firing a sequence of rotate actions to keep it going indefinitely.