UI 꿀팁: 나선형 소용돌이
2017.08.25
by Ben Dietzkis, translated by pilgwon
소감이 어떠십니까?
집중의 이유
이 마술 조각을 발견했을 때 저는 Reddit을 탐색하고 있었습니다.
그것은 저를 매료시켰습니다. 저는 이것이 어떻게 작동하는지 정확하게 알아보기로 결정했습니다. 그리고 이 효과를 iOS에 복사해넣고 싶었습니다.
이런 기분이 들 떄는 (종종 Dribbble과 같은 곳을 탐색할 때 그런 기분이 듭니다.) 저는 마치 뼈다귀를 가진 강아지와 같아집니다. 그래서 저는 저의 목표를 완수할 때까지 멈추지 않을것입니다.
. . .
무심코 저는 처음엔 Keyframes를 사용하고 링의 위치에 따라 각자 움직이는 시간(듀레이션)을 달리 했습니다. 하지만 이것은 틀렸습니다. 저는 이 퍼즐의 결정적인 조각을 놓치고 있었고, 그것을 더 자세히 알아보는 것 대신에 Reddit 유저인 BestPseudonym 에게 설명을 들었습니다:
매 초, 삼각형의 점은 원래 자리로 돌아온다. 매 초마다 사각형의 점은 14분의 13만큼의 길을 간다. 오각형의 점은 14분의 12만큼 그것의 경로를 간다. 14분의 12는 7분의 6으로 볼 수 있고, 그래서 매 7초 마다 삼각형과 오각형의 점이 원래 자리에 모인다.
그것은 저의 마음을 날려 버렸습니다. 그것은 엄청나게 간단했습니다. 각자 움직이는 시간(듀레이션)은 분수였습니다. 가장 안쪽 모양의 듀레이션은 1, 그 다음 모양은 1.5 였습니다. 이 특징은 당신이 그리려고 하는 링의 개수에 따라 달라집니다. 2개의 사인 파를 생각해보세요. 하나는 다른 하나보다 반만큼밖에 빠르지 않습니다. 이론을 이해하셨나요?
저는 그것을 스피너 (액티비티 인디케이터)로 만들기로 결정했습니다. 왜냐하면, (저만 그럴 수 있지만) 저는 이 스피너라면 앱이 몇시간이고 로딩만 해도 보고 있을 수 있을 거 같다고 생각했기 때문입니다. 한 가지 문제는 도형을 그리는 것이 어려웠고 GIF로 첨부하는 것만큼 깔끔하게 나오지 않았습니다.
이젠 스피너 시간
제가 스피너를 만들기로 정했을때 저는 그것이 원형이었으면 좋겠다 생각했었습니다. 저는 원본과 최대한 비슷하게 만들기로 정했고, 그래서 저는 또 다른 접근 방법인 수학을 사용하기로 했습니다.
삼각법이 저에게 가장 좋은 친구인 것으로 판명되었고 그것은 7년넘는 시간동안 처음이었습니다. 반지름, 현재 시간 변화값과 컨테이너의 가운데 지점을 기준으로 x위치를 계산하기 위해 코사인하면 적절한 y위치를 사인으로 계산할 수 있다고 생각했습니다. 그 결과 제일 위의 GIF입니다.
또한 앱에서 직선이면서 수평인 불확정의 스피너를 앱에서 사용할 거 같으면, 같은 컴포넌트를 사용하고 거기서 Y 값만 빼면 된다고 생각했습니다. 아래가 그 결과입니다.
