Rotating an object on click
Jul 07, 2020
By
Sam G
Hi everyone
I have a question about using states and spin animation to rotate an image. Its nice to have 4 states each rotated 90 degrees, but even better when you use the entrance animation to spin when you click on the item. I can get this working, but I cant work out how to time it right. Now the best i can do is have it jump between states 1 and 2 on the second time around which means the first 90 degree change is actually 180 degrees... I have tried playing with order of triggers and initial state to no avail...
9 Replies
I'm a little confused. When I click the triangle it seems to rotate around, although there is a jump on one of the clicks.
What do you want? A shape that when clicked rotates seamlessly? When you say, "but I cant work out how to time it right" what do you mean about the timing?
I was playing around with a single object that rotates 360 and you use the timeline to pause it. It needs some tweaking, but may give you some ideas.
https://360.articulate.com/review/content/4e0e1326-7992-466d-b066-4e895ccd9b09/review
Another idea to control the rotation is to use a dial. Convert the triangle to a dial with 360 rotation.
Then use triggers to set the value. You probably want something that adds one to the value and stops when it gets to X.
Played around with the dial idea.
https://360.articulate.com/review/content/84850cec-8b46-4490-baec-ba96bd81470d/review
Hi Tom
Yes, there is a two step jump on the second rotation I cant remove. It should rotate 90 degrees with each click (instead of 1 time 180 degrees)
I tried to dial too, that is the easiest way. Unfortunately I need the shape to also be dragged.... and dial and drag go crazy when put together...
I see what's happening. When you change the state and it rotates, the state remains in that place where it rotated. So when you change the state again, it doesn't start from where it is in it's initial state, it starts from a relative position.
Here's a way to solve the rotation. However, it requires resetting the slide. Which moves the object. I assume you could just create X number of states to account for rotations.
https://360.articulate.com/review/content/b140da25-edce-45e0-9dcb-2987d164d122/review
Hi Tom
I apologise for the delay in replying to you, since you did so much to try to work it out! Appreciate your video which explains the issue exactly. The idea is to use these shapes to make tangrams, so it would be difficult if the slide kept re-setting.
I'm wondering if the problem can be solved by getting state 1 to go back when going to state 2, but hiding it so we cant see it going back? Or resetting the state somehow? Or using layers so that they are all different objects not different states (but i can see that geting messey with the drag and drop, and it requires that layers can "run" even when they are hidden.
Or, how about the triangle can rotate 4 times, and then when you click again it goes in reverse? Would that solve it?
I am also going to experiment with using motion path 1 px circle instead of rotate animation.
This was a great solution for me, Tom - and just the 'trigger' I needed to get creative. I'll use your dial suggestion to convert my gear image to start a series of gears moving. Thanks.