circle 애니메이션 효과(원을 따라 움직이는 애니메이션 효과)

Question

시작 좌표, 끝 좌표, 이동방향(시계방향, 반시계방향)을 입력하면 다음과 같이 이미지가 원을 따라 움직이는 애니메이션 효과를 적용하고 싶습니다.

삼각함수를 통해 좌표를 구하기는 했는데, 이미지가 원형으로 움직이는 방법을 도저히 모르겠습니다..

좋은 답변 부탁드립니다.

Answer 1

저 원이 어떻게 쓰이냐에 따라 개발방법이 많이 바뀝니다..

단순하게 360도 무한으로 끝없이 회전하는 용도인지

사용자 입력으로 회전하는 각도라던가 시간이라던가 바뀐다던지.

또 저 원 이미지가 유저한테 클릭가능하게 할것인지 등등..

 

단순 무한회전정도라면 TweenAnimation 정도로 처리 가능하지만,

그게 아니라면 위에서 말씀하신것처럼 삼각함수를 통해서 구해야되죠

 

검색하시면 많이 나오겠지만

x = (float)(cx + (r * Math.sin((float)Math.toRadians(angle))));
y = (float)(cy + (r * Math.cos((float) Math.toRadians(angle))));

 

이런식으로 각도만 넣게 되면 x,y 좌표를 구하는 코드를 작성하신후에

View.setX( x좌표)

View.setY( y좌표)

이렇게 애니메이션 보다는 위치를 바꿔주는 코드를 쓰는게 편할거에요

 

위치점 기준으로 시계방향으로 60도 돌린다고 하면, 위에 코드를 통해서 x,y좌표가 나오겠죠

그 좌표를 setX, setY하면 해당위치로 이동합니다.

 

하지만 한번에 이동시키는게 아니라 0도부터 60도까지 돌아가는 모션을 넣어야 하므로

 

무한반복하는 Thread를 While문을 통해서 하나 돌려줍니다

angle을 0부터 0.1씩 증가시키면서 60이 될때까지 넣어주면서 setX, setY를 하면 되겠죠

angle = 0;

while(angle이 60도 될때까지 반복)

angle = angle+0.1f;

x = (float)(cx + (r * Math.sin((float)Math.toRadians(angle))));
y = (float)(cy + (r * Math.cos((float) Math.toRadians(angle))));

 

0.0부터 60도까지 0.1씩 증가하니 총 루프가 600번정도 돌아가겠죠

속도는 sleep을 통해서 잡아주시면 됩니다.

 

속도와 최종각도에 따라서

증가시키는 각도를 0.1이 아니라 0.01로 해도 되고 0.3정도로 해도 되고 맞춰주시면 됩니다