Making an animation.

['LinKin]

Hello guys,

I want to make an animation.

I've a circle in the middle, and some squares at the sides, the squares are the ones who will move.

So, in this animation, when you Scroll Up, the squares will move clockwise. And if you Scroll Down, they will move in the opposite orientation.

This is a .gif image to give you a better understanding on the animation.

(In this animation, squares are moving clockwise)

http://s13.postimg.org/px1qfzto7/anim.gif

The problem is.. How to do it? I can't find a good solution. I've thought about interpolateBetween but.. how to make the squares keep a circle's movement guide?

Thanks.

[.:HyPeX:.]

Oh its pretty easy, just look a bit at this, establish some values, etc.

  
local progress = 100 
function onMouseMove(int) 
progress = progress + (int) * 1 -- You can edit the number 1 multiplier to adjust speed 
if progress == 200 or progress == 0 then 
progress = 100 
end 
end 
addEventHandler("onClientMouseWheel", getRootElement(), onMouseMove) 
  
local Positions = { 
{--[[circle stuff]]}, 
{--[[rec1 tables of pos]] 
 {--[[Position 1]] }, 
 {--[[Position 2]] }, 
 {--[[Position 3]] }, 
 {--[[Position 4]] }, 
 {--[[Position 5]] }}, 
{--[[rec2 tables of pos]] 
 {--[[Position 1]] }, 
 {--[[Position 2]] }, 
 {--[[Position 3]] }, 
 {--[[Position 4]] }, 
 {--[[Position 5]] }} 
} 
function Rendering() 
if progress > 100 and progress < 150 then 
--[[ From position 1 to position 2 ( 1 not clockwise) ]]-- 
elseif progress > 150 and progress < 200 then 
--[[ From position 2 to position 3 ( 2 not clockwise) ]]-- 
elseif progress < 100 and progress > 50 then 
--[[ From position 1 to position 4 ( 1 clockwise) ]]-- 
elseif progress > 0 and progress < 50 then 
--[[ From position 4 to position 5 (2 clockwise) ]]-- 
end  
end 
addEventHandler("onClientRender", getRootElement(), Rendering) 
PD: Just remember to make some maths on the progress on each case to use it also with the interpolate: 
if progress > 150 and progress < 200 then 
local progress = progress - 150 
local progress = progress / 50 
local value = interpolateBetween(Positions[DxRec][posStart], 0,0, Positions[DxRec][PosEnd], 0,0, progress, "Linear") 
end 
--[[ Also note PosStart, PosEnd and DxRec should be integers to specify wich table are we talking about. 
  
  

[manawydan]

you can try with sin and cos.

just example:

local move  
local prog = 0 
local radius = 200 
local x,y= guiGetScreenSize() 
  
addEventHandler("onClientRender",root, 
function() 
if(move)and(move==1) then 
prog = prog +6 
elseif(move==-1) then 
prog = prog -6 
end 
dxDrawImage((x/2)+math.sin(math.rad(-prog))*radius,(y/2)+math.cos(math.rad(-prog))*radius, 100, 100,'teste.png',0) 
end) 
  
addEventHandler( "onClientMouseWheel", root, 
    function ( up_down ) 
     move = up_down    
    end 
)