스트리밍은 대부분의 브라우저와
Developer 앱에서 사용할 수 있습니다.
-
스프링 애니메이션 만들기
애니메이션으로 앱에 생기를 불어넣는 방법을 알아보세요! 스프링의 장점을 활용해 근사한 애니메이션 만드는 방법과 앱에서 스프링 애니메이션을 활용하는 방법을 배워 보세요.
챕터
- 1:36 - Why springs
- 8:33 - How springs work
- 17:29 - How to use springs
리소스
관련 비디오
WWDC23
-
다운로드
♪ ♪
안녕하세요 저는 제이컵입니다 저희가 빌드하는 UI는 갈수록 동적으로 진화하며 모든 곳에 변화와 동작이 들어갑니다 다들 이 점을 좋아하죠 인터페이스가 한층 생생하게 느껴지고 무슨 일이 일어나는지 더 쉽게 이해할 수 있는 데다 UI와 상호작용하는 게 즐겁다는 기분이 드니까요
이런 동적 상호작용을 구성하는 요소는 여럿입니다 먼저, 장면이 바뀌는 효과인 전환이 있고 기기와의 직접적인 상호작용인 제스처도 있으며 마지막으로 애니메이션도 있습니다 화면 속 객체가 움직이거나 커지거나 시각적 속성이 바뀌는 거죠 이 모든 요소가 합쳐져 부드러운 상호작용형 UI가 만들어집니다 오늘은 훌륭한 애니메이션을 빌드하는 법을 들여다보겠습니다 애니메이션 간의 차이는 미묘하지만 애니메이션이 알맞게 쓰인다면 사용자도 그걸 느끼죠 그래서 앱의 애니메이션을 우아하고 자연스럽게 만드는 법을 설명해 드릴 텐데요 단 한 가지 도구만을 예로 들어 설명하겠습니다 강력하고 쓸모가 많으면서 재미있기까지 한 도구죠 바로 스프링입니다 먼저 스프링이 왜 애니메이션과 잘 어울리는지 설명하고 스프링의 작동 방식을 자세히 설명한 다음 마지막으로 앱에 스프링을 활용하는 법을 이야기하겠습니다 왜 스프링은 애니메이션에 유용할까요? 그 질문에 답하려면 일단 어떻게 해야 훌륭한 애니메이션을 만들 수 있는지 설명해야 하죠 애니메이션이 몇 개만 있는 예시를 살펴봅시다 단순한 토글이 있군요 이 토글을 파헤쳐 보죠
애니메이션을 사용하는 이유는 여러 가지이지만 가장 중요한 이유는 연속성이 더 잘 느껴지기 때문입니다 객체가 한 지점에서 시작했다가 갑자기 다른 지점에 나타나면 부자연스러운 느낌도 들고 때론 어지럽기도 하죠 객체가 한 지점에서 다른 지점으로 이동하는 모습이 보이는 게 훨씬 더 자연스럽습니다
문제는 위치만이 아닙니다 객체의 속도가 갑자기 바뀌어도 부자연스러운 느낌이 드니까요 예를 들면 이 토글 버튼은 시작점과 끝점에서 갑자기 속도가 바뀌기 때문에 위화감이 느껴지죠 그래서 애니메이션의 위치와 속도를 끊김 없이 이어지게 하는 게 우리의 목표입니다 몇 가지 애니메이션을 살펴보고 그 애니메이션이 이 조건에 맞는지 알아봅시다 이 토글도 완성된 애니메이션을 보여주는 유용한 예시이지만 저는 버튼의 움직임에만 집중해서 한 애니메이션에서 일어나는 일을 더 쉽게 파악해 보겠습니다 먼저 Ease in과 Ease out부터 보겠습니다 이들은 베지어 곡선 애니메이션에 해당하기 때문에 애니메이션의 움직임이 곡선과 지속 시간의 조합으로 결정되죠 이 객체의 움직임을 살펴보면 갑자기 튀는 움직임이 보이지는 않는데 정말 그런지 확인하려면 이 애니메이션의 움직임 차트를 점검하면 됩니다
앞으로 이런 차트를 몇 개 살펴보게 될 테니 차트에 뭐가 보이는지 얘기해 보도록 합시다 가로축은 시간을 나타내고 아래쪽 선은 애니메이션의 초기 위치를 나타내며 위쪽 선은 애니메이션의 목표 위치를 나타냅니다 애니메이션을 반복해 재생하면 이 곡선을 반복해서 따라가게 되죠 이제 애니메이션을 다시 시작해 보면 차트의 곡선에 튀는 구간이 없는 걸 알 수 있는데 이건 위치가 끊김 없이 이어진다는 뜻입니다 또한 속도도 나타나도록 차트를 갱신해서 살펴보면 속도에도 튀는 구간이 없다는 걸 확인할 수 있습니다 속도 역시 끊김 없이 이어진다는 뜻이죠
반면 직선형 애니메이션의 움직임을 살펴보면 애니메이션의 시작과 끝에 날카로운 모서리가 있고 속도가 갑자기 튀어오르는 걸 알 수 있습니다 직선형 애니메이션이 유용한 특수한 경우도 있기는 합니다 로딩 스피너가 그 예죠 하지만 그런 경우를 제외하면 직선은 신중하게 써야 합니다 특히 움직임에 실감이 없고 대체로 어색한 느낌이 든다면 주의해야 하죠
다음으로 스프링 애니메이션에 끊김이 없는지 확인합시다 우리가 원하는 대로 위치와 속도가 여기서도 끊김 없이 이어지네요 지금까지는 Ease in, Ease out과 스프링 애니메이션이 가장 좋은 선택이었지만 이때까지 우리가 본 건 애니메이션이 정지 위치에서 시작한 사례뿐이었죠 이번에는 제스처를 애니메이션과 함께 쓰면 어떻게 되는지 보겠습니다 움직이는 버튼을 iPad로 가져가 손가락으로 드래그해 봅시다
둘 중 한 지점에 버튼을 놓을 수도 있지만 중간 지점 어딘가에서 제스처를 끊고 버튼을 한쪽으로 밀어낼 수도 있죠
Ease in, Ease out 애니메이션은 끝까지 움직이기는 하지만 제스처가 끝날 무렵에 움직임이 덜컥 멈춥니다
이런 유형의 애니메이션은 미리 정해진 곡선에 불과해서 초기 속도를 나타낼 방법이 없기 때문입니다 버튼을 2차원의 어느 위치로든 자유롭게 드래그할 수 있게 하면 이 현상은 더욱 심해지죠
스프링 애니메이션을 적용해 다시 해 봅시다 스프링은 초기 속도와 무관하게 시작할 수 있기 때문에 제스처가 끝나자마자 애니메이션이 이어지는 순간 자연스러운 느낌을 줄 수 있습니다
2차원으로 드래그해도 잘 작동하고요
이제는 제스처의 속성이 바뀔 때마다 SwiftUI가 자동으로 속도를 추적하기 때문에 따로 수고를 들이지 않아도 이런 동작을 만들 수 있죠 따라서 정적인 경우든 초기 속도가 있는 경우든 끊김 없이 이어지는 애니메이션은 스프링뿐입니다 다음으로 볼 스프링의 장점은 움직임의 형태입니다
스프링의 움직임이라는 말을 들으면 아마 이런 걸 상상하실 테죠
하지만 스프링에는 탄력 있는 애니메이션만 있는 건 아닙니다 물론 스프링은 탄력 있게 움직일 수 있고 그것도 유용하게 쓰일 순 있지만 그게 우리가 스프링을 쓰는 주된 이유는 아닙니다 스프링에 탄력을 주는 게 좋은 경우를 나중에 살펴보긴 하겠지만 탄력 없는 스프링도 멋지답니다 탄력이 없는 이런 스프링은 iOS 전반의 애니메이션에 쓰이고 있죠 중요한 게 탄력만이 아니라면 스프링의 움직임에는 어떤 장점이 있는 걸까요? 이 단순한 스프링 애니메이션을 다시 살펴보면서 애니메이션이 어떻게 끝나는지 집중해서 봐 주세요 애니메이션이 아주 천천히 점진적으로 멈춥니다 객체가 어느 한 지점에서 급작스럽게 끝나지 않죠 실제로 움직이다가 멈추는 사물에서 볼 법한 움직임에 훨씬 가깝습니다 이 애니메이션이 더 자연스럽게 느껴지는 이유가 있습니다 스프링 애니메이션은 스프링에 달린 사물이 실세계에서 동작하는 모습을 토대로 하기 때문에 우리가 보기에 더 자연스럽고 그럴듯하게 움직이거든요 스프링 애니메이션에서는 각 속성이 끝나는 시간이 각기 다르다고 들으셨을 텐데 그건 사실입니다 타이밍 커브 애니메이션에 익숙한 사람에게는 이상하게 느껴질 수 있죠 모든 애니메이션은 동시에 시작하고 끝나야 하지 않나요? 정답은 '아니요'입니다 애니메이션은 우리에게 익숙한 실세계에서 사물이 움직이는 모습과 비슷해야 하죠 대체로 사물이 움직이다가 멈추는 시점은 제각각입니다 사물은 마찰력을 받아 느려지기 때문에 움직이고 멈추는 시점이 완벽하게 맞아떨어지지 않거든요 속성이 여럿 있는 애니메이션이라면 여기서 한층 더 나아가는 게 유용하기도 합니다 iOS에서 앱이 실행될 때 나타나는 애니메이션을 봐 주세요 언뜻 보면 단일하고 일정한 애니메이션처럼 보이지만 애니메이션을 느리게 해서 보세요 다양한 스프링이 어우러지고 서로 다른 시작 시점과 종료 시점이 어우러지면서 놀랍도록 멋지고 자연스러운 애니메이션을 연출하죠
이제 스프링이 애니메이션에 얼마나 좋은 도구인지 알았으니 이제는 스프링을 좀 더 자세히 살펴보고 스프링의 작동 원리와 최선의 활용법을 알아봅시다 스프링 애니메이션을 사용한다는 것은 스프링에 달린 객체의 움직임을 모델링한다는 뜻입니다 물리학으로 설명하자면 움직임을 규정하는 속성은 사물의 질량 스프링의 강성 시스템의 감쇠 등 세 가지인데 감쇠란 주위 환경이 객체에 가하는 마찰력을 측정하는 척도입니다 그다음으로는 애니메이션의 초기 위치를 객체의 초기 위치로 설정하고 애니메이션의 목표 위치를 스프링이 멈추는 위치로 설정합니다 객체가 그 위치로 끌려갈 테니까요 이제 객체를 놓아주어 애니메이션을 시작합니다 스프링 시스템을 설정할 때 사용한 속성이 움직임의 유형을 결정하고 속성을 바꾸면 애니메이션도 그에 따라 바뀝니다
따라서 스프링 애니메이션을 만들 때는 질량, 강성, 감쇠라는 속성을 똑같이 사용해 여러분이 사용할 스프링을 설정하면 됩니다 이 방법으로 물리 시스템을 자연스럽게 모델링할 순 있지만 직관적으로 스프링 애니메이션을 설정하기는 쉽지 않죠 실제로는 질량이 있는 사물도 강성을 띤 스프링도 없고 이런 설정값을 지어내 곡선을 바꾸긴 쉽지 않으니까요 그래서 저희는 스프링을 좀 더 쉽고 편하게 설정할 수 있는 방법을 다듬었습니다 사용하는 매개변수는 단 두 개인데요 바로 지속 시간과 탄력입니다 원리는 생각하시는 그대로입니다 지속 시간을 늘리면 애니메이션이 더 오래 가고 탄력을 늘리면 애니메이션에 탄력이 생기죠 저희는 이 방법을 Apple의 디자인과 엔지니어링 활동 전체에 도입해 스프링을 지원하는 저희의 모든 프레임워크에서 사용할 것입니다
스프링 매개변수를 이리저리 조작하다 보면 곡선의 모양이 다양하게 바뀌는 게 보입니다 탄력이 0보다 크면 목표보다 높이 솟구치는 탄력 있는 스프링이 생기고 탄력이 0이면 매끄러운 곡선이 생기며 목표를 향해 길고 완만한 꼬리를 그리죠 또 이런 스프링도 있는데요 흔한 유형은 아니지만 탄력값을 음수로 정하면 목표를 향해 완만하게 긴 꼬리를 그리기는 하지만 탄력이 0일 때보다 좀 더 납작한 스프링이 생깁니다 스프링 물리학에서 이것들은 각각 저감쇠 스프링 임계감쇠 스프링 및 과감쇠 스프링이라 불리지만 전 이것들을 각각 '탄력 있는', '매끄러운' '납작한' 스프링이라 부르죠 알아차리셨겠지만 탄력값은 %로 나타내는데요 탄력 있는 스프링의 탄력은 최대 100%이고 납작한 스프링의 탄력은 0과 -100% 사이입니다 이제 스프링에 대해 좀 더 깊이 알아보죠 때로는 스프링이 부담스럽게 느껴지고 스프링의 움직임이 어려워 보일 수 있지만 나눠서 살펴보면 이 움직임은 사실 단순한 여러 요소의 조합에 불과합니다 제 경우, 곡선을 만들어내는 수학적 원리를 이해함으로써 스프링에 대해 좀 더 자신감을 갖게 됐기 때문에 수학에 대해서도 설명해 드리겠지만 수학이 전혀 이해되지 않아도 걱정하지 마세요 수학은 몰라도 되니까요 수학은 저희가 대신 다 해드리겠습니다
먼저 탄력 있는 곡선을 봅시다 보시다시피 스프링이 솟구치는 모습이 마치 복잡한 사인파 또는 코사인파의 진동을 닮았죠 그리고 스프링의 탄력을 최댓값인 100%로 설정하면 코사인파와 똑같이 위아래로 진동하며 움직이는 걸 알 수 있습니다
물리학적으로 해석하자면 이 스프링에는 마찰력이 작용하지 않기 때문에 스프링은 느려지지 않고 끝없이 진동할 뿐 목표 위치에 실제로는 절대 도달하지 못합니다 예상하셨다시피 수학적 원리는 아주 단순합니다 이건 코사인 곡선일 뿐이고 시간을 지속 시간으로 나누었을 뿐이기에 탄력값을 이렇게 설정하면 지속 시간은 곡선의 주기와 정확하게 정비례하게 됩니다 탄력을 줄이는 것은 물리학적으로 설명하면 스프링에 마찰력이나 감쇠를 가하는 것과 마찬가지라서 스프링의 움직임이 갈수록 느려지죠 진동도 여전히 발생하고요 사실 원래의 코사인 곡선도 그대로 있습니다 위에 겹쳐서 그리면 더 확실하게 알 수 있죠 곡선의 방정식은 이전과 동일합니다 단지 상수가 달라지고 수평으로 약간 이동했을 뿐 곡선의 탄력은 이렇게 설명할 수 있지만 이것 외에도 설명에 필요한 것이 있습니다 원래의 곡선에서 진동의 크기는 시간이 흐르면서 점차 작아지죠 즉, 감쇠하는 건데요 아까 빠진 부분이 바로 이겁니다 추가로 생겨나는 이 곡선이 바로 지수적 감쇠 곡선인데 이게 움직임을 설명하는 마지막 구성 요소입니다 즉, 서서히 멈추는 느낌을 주는 요소죠
복잡해 보였던 곡선은 사실 이 두 가지 구성 요소를 곱한 결과물일 뿐입니다 이 곡선을 감쇠 코사인파 또는 감쇠 사인파라고 하죠 만족스러운 설명이지만 차트를 자세히 살펴보면 좀 이상한 점이 눈에 띌 겁니다 왜 이 코사인 곡선은 처음에 밑으로 살짝 꺼지는 걸까요? 이건 앞에서 이야기한 것과 관계가 있습니다 바로 속도 보존입니다 기억하시겠지만, 기본 사례에서는 속도를 처음에 0으로 보존해야 했죠 그러니 두 구성 요소 곡선을 곱한 곡선의 속돗값은 0에 가깝게 평평하게 나와야 할 텐데 보시다시피 우리의 감쇠 곡선은 위쪽으로 경사져 있습니다 코사인 곡선이 처음에 평평했다면 초기 속도도 위쪽을 향했겠죠 그래서 코사인 곡선은 처음에 아래로 기울어야 합니다 그래야 감쇠 곡선이 상쇄되어 시작 지점이 평평해질 테니까요 스프링이 어떤 초기 속도에서도 작동하는 건 이 때문입니다 코사인 곡선을 움직이고 크기를 조정해서 정확한 출발점을 잡아 주니까요
전에 설명했다시피 초기 속도는 제스처가 끝나면서 애니메이션이 시작할 때의 속도에서 생겨날 수도 있지만 또 다른 곳에서 생겨날 수도 있습니다 iPad에서 살펴보죠 여기서는 탭하여 버튼을 움직이면서 목표 위치에 버튼 이미지를 흐릿하게 띄울 수 있습니다 좀 더 느린 스프링을 사용해서 어떤 일이 벌어지는지 더 쉽게 파악할 수 있고요 때로는 애니메이션이 채 끝나기도 전에 새 애니메이션이 시작하며 목푯값이 바뀌기도 합니다 이런 경우 스프링 애니메이션은 목표가 재설정됐을 때의 속도를 초기 속도로 설정하여 새 목적지로 나아가며 동일한 속도가 보존됐기 때문에 애니메이션 중간에 끼어들어도 매끄럽고 자연스러운 느낌이 유지되죠
이게 바로 속도 보존과 탄력 스프링의 작동 원리입니다 이제 스프링의 탄력을 줄이면 진동의 주기는 점차 멀어지고 탄력이 0까지 줄어들면 진동이 완전히 사라져서 아래쪽으로 멀어지는 직선만 남고 이 직선을 감쇠 곡선과 곱합니다 그러면 방정식은 훨씬 더 단순해지죠 직선의 기본 방정식을 구해서 앞에서 본 지수적 곡선에 곱하면 결과물인 곡선이 나오는 겁니다
납작한 곡선 즉, 탄력이 음수인 스프링도 원리는 비슷하지만 직선 대신 지수 함수 두 개를 더한 함수를 사용합니다 이런 스프링은 비교적 드물지만 지수적 감쇠만으로 이 스프링을 표현할 수 있기에 감쇠하는 속도를 모델링할 때 유용하게 사용할 수 있습니다 스크롤 뷰가 좋은 예입니다
애니메이션에 스프링을 쓸 때 이 점이 궁금하실 수 있겠군요 스프링 애니메이션이 끝나려면 실제로 얼마나 걸릴까요? 아까 살펴봤다시피 이 질문은 다소 미묘합니다 스프링은 지수적으로 감쇠하기 때문에 엄밀히 말하면 움직임이 차츰 작아질 뿐 움직임 자체는 영원히 계속되니까요 물론 스프링 애니메이션이 영원히 계속되면 곤란하니 애니메이션을 끝낼 시점을 선택해야죠 UI에 눈에 띄는 변화를 일으키지 못하는 시점 말입니다 스프링 애니메이션을 끝내도 될 만큼 움직임이 작아지는 때를 정착 시간이라고 부르는데 스프링을 설정할 때 정하는 매개변수인 지속 시간과는 다른 개념입니다 정착 시간은 여러 요인에 좌우되기 때문에 다소 예측하기 어려운 반면 지속 시간이라는 매개변수는 지각된 시간이고 예측 가능하게 설정되며 다른 매개변수가 바뀌어도 바뀌지 않게 고정되는 매개변수입니다 정착 시간은 예측하기 어렵기 때문에 사용자향 변화를 주려면 정착 시간이 나오길 기다려서는 안 됩니다 스프링이 거의 완성됐을 때 UI를 바꾸고자 한다면 SwiftUI에 새로 생긴 완료 핸들러 지원을 사용하세요 이 기능은 정착 시간이 아니라 지각된 지속 시간을 기준으로 하거든요 스프링의 작동 원리를 모두 파악했으니 이걸 코드에 사용하는 법을 설명하겠습니다 스프링은 애니메이션을 만들기에 너무나 좋은 도구라서 SwiftUI 애니메이션에서는 이제 스프링이 기본값입니다 스프링을 시작하려면 withAnimation을 호출하기만 하면 되죠 스프링을 명시적으로 사용하기도 더 쉬워졌습니다 iOS에서 사용하는 스프링값을 바탕으로 스프링 프리셋 몇 가지를 추가했는데 어떤 스프링 매개변수를 쓸지 확실히 모르겠다면 프리셋을 활용해 느낌이 좋은 걸 만들 수 있을 겁니다
애니메이션이 필요할 때 프리셋을 직접 사용함으로써 이것들을 코드에 사용할 수 있습니다 하지만 스프링 애니메이션은 필요한 상황에 정확히 맞게 조정하는 것이 중요하기 때문에 프리셋을 출발점 삼아 애니메이션을 조정할 수도 있습니다 프리셋의 지속 시간을 다르게 지정해도 되고 탄력을 늘리거나 줄여도 됩니다 탄력을 얼마나 추가할지 상댓값을 입력하면 되죠 프리셋은 여러분의 앱에 스프링을 적용하기에 아주 좋은 방법입니다 하지만 이 이상으로 나아가고 싶다면 아예 새로 맞춤형 스프링을 만들어도 됩니다 .spring 애니메이션으로요 스프링의 지속 시간과 탄력을 완벽하게 지정할 수 있는 방법이죠 탄력값은 -1.0에서 1.0 사이입니다 UIKit와 Core Animation에서 같은 매개변수를 사용해 스프링 애니메이션을 만들 수도 있습니다
이걸로도 부족하다면 다른 스프링 도구도 있답니다 저희가 SwiftUI에 스프링 모델 타입을 추가해서 스프링을 나타내는 모델을 만들 수 있게 했거든요 스프링 매개변수도 포함해서요 그러면 다양하게 지정할 수 있는 매개변수들을 프로그램을 이용해 변환할 수 있죠 질량, 강성, 감쇠 같은 매개변수를 정해 스프링 모델을 직접 만들어 곧장 스프링 애니메이션으로 활용해도 됩니다 하지만 매개변수를 직접 변환하고 싶으시다면 탄력과 지속 시간을 질량, 강성, 감쇠로 변환하는 방정식 세 가지는 다음과 같습니다 매개변수를 변환하는 데 그치지 않고 스프링 모델로 자기만의 고급 스프링 동작을 빌드해도 되고요 스프링의 메서드를 호출해 내장된 스프링 평가 공식을 직접 가져올 수 있습니다 예컨대 value를 호출해 스프링 위치를 가져올 수 있죠 목표물, 즉 스프링이 향하는 대상을 입력한 다음 스프링을 평가하고자 하는 시간을 입력합니다 속도 메서드에 동일한 값을 입력해 시간에 따른 스프링의 속도를 평가할 수도 있습니다 이렇게 하면 여러분의 코드에 스프링을 손쉽게 쓸 수 있어서 시뮬레이션을 하거나 이 세션에서 쓴 것과 같은 차트값을 얻는 데에도 도움이 됩니다 심지어 이걸로 커스텀 애니메이션을 만들 수도 있죠 스프링 모델을 호출한 다음 입력값이나 출력값을 조절해 스프링 애니메이션을 맞춤화할 수 있으니까요 맞춤형 애니메이션 만드는 법을 자세히 배우고 싶다면 'SwiftUI 애니메이션 살펴보기'를 확인하세요 마지막으로 설명하고 싶은 것은 스프링에 사용할 매개변수를 정하는 방법입니다 애니메이션에 어울리는 값을 정하려면 대체로 먼저 지속 시간의 값을 정해 마음에 드는 속도감을 찾는 게 좋습니다 그걸 정했다면 탄력값을 조절해서 애니메이션의 성격과 느낌을 선택하면 됩니다 탄력값을 다르게 하면 질적으로 느낌이 달라질 겁니다 탄력을 0으로 하면 변화가 매끄럽고 점진적으로 느껴지고 15% 정도로 작게 하면 탄력이 세게 느껴지진 않지만 긴 꼬리가 짧아져서 좀 더 활기찬 느낌이 들죠 탄력값을 30% 정도로 더 크게 잡으면 탄력이 눈에 띄게 세지는 느낌이 듭니다 더 나아가 탄력값을 아주 높게 설정할 수도 있지만 0.4가 넘는 높은 값을 쓸 때는 신중해야 합니다 UI 엘리먼트에 쓰기엔 너무 과장된 느낌이 들 수 있거든요 그러면 실제로 사용하는 탄력값은 얼마여야 할까요? 확신이 없다면 탄력이 0인 스프링을 쓰세요 탄력값을 지정하지 않아도 탄력이 0이 되죠 그러면 여러 용도로 두루 쓸 수 있는 다목적 스프링이 만들어집니다 그런 다음 애니메이션에 장난기를 더하고 싶다면 탄력을 좀 더 추가하면 되죠 애니메이션에 물리적인 느낌을 더하고 싶을 때도 탄력을 추가하면 좋습니다 제스처가 끝날 때 쓰는 애니메이션처럼요 또한 일관성을 유지하시기 바랍니다 여러분 앱의 성격을 잘 생각해 보세요 진지한 앱인가요 장난스러운 앱인가요? 느긋한 느낌인가요 속도감 있는 느낌인가요? 이 점을 명심하면 주변 UI의 느낌과 일치하는 스프링값을 정하는 데 도움이 됩니다 애니메이션에 스프링을 적용하는 방법을 간단히 살펴봤는데 기억하세요 스프링에 탄력이 넘쳐야만 멋진 애니메이션이 만들어지는 건 아닙니다 출발점으로 삼기에 좋은 스프링 프리셋도 새로 생겼지만 한 걸음 더 나아가고 싶다면 지속 시간과 탄력을 이용해 맞춤형 스프링도 만들 수 있죠 무엇보다도 중요한 것은 이제 스프링만의 독특한 장점이 무엇인지 다들 아셨으니 다들 스프링 애니메이션을 적극 활용해 매끄럽고 쓰기 즐거운 앱을 만들었으면 합니다 감사합니다 ♪ ♪
-
-
18:00 - Spring Preset
withAnimation(.snappy) { // Changes }
-
18:15 - Spring Preset with Custom Duration
withAnimation(.snappy(duration: 0.4)) { // Changes }
-
18:21 - Spring Preset with Custom Bounce
withAnimation(.snappy(extraBounce: 0.1)) { // Changes }
-
18:37 - Custom Spring
withAnimation(.spring(duration: 0.6, bounce: 0.2)) { // Changes } // UIKit UIView.animate(duration: 0.6, bounce: 0.2) { // Changes } // Core Animation let animation = CASpringAnimation(perceptualDuration: 0.6, bounce: 0.2)
-
18:57 - Spring Model
let mySpring = Spring(duration: 0.5, bounce: 0.2) let (mass, stiffness, damping) = (mySpring.mass, mySpring.stiffness, mySpring.damping)
-
19:16 - Spring Model Animation
let otherSpring = Spring(mass: 1, stiffness: 100, damping: 10) withAnimation(.spring(otherSpring)) { // Changes }
-
19:26 - Spring Parameter Conversion
mass = 1 stiffness = (2π ÷ duration)^2 damping = 1 - 4π × bounce ÷ duration, bounce ≥ 0 4π ÷ (duration + 4π × bounce), bounce < 0
-
19:35 - Evaluating Spring Model
let mySpring = Spring(duration: 0.4, bounce: 0.2) let value = mySpring.value(target: 1, time: time) let velocity = mySpring.velocity(target: 1, time: time)
-
20:15 - Custom Spring Animation
func animate<V: VectorArithmetic>( value: V, time: Double, context: inout AnimationContext<V> ) -> V? { spring.value( target: value, initialVelocity: context.initialVelocity, time: effectiveTime(time: time, context: context)) }
-
20:34 - Spring with No Bounce
withAnimation(.spring(duration: 0.5)) { isActive.toggle() }
-
21:07 - Spring with Small Bounce
withAnimation(.spring(duration: 0.5, bounce: 0.15)) { isActive.toggle() }
-
21:14 - Spring with Large Bounce
withAnimation(.spring(duration: 0.5, bounce: 0.3)) { isActive.toggle() }
-
-
찾고 계신 콘텐츠가 있나요? 위에 주제를 입력하고 원하는 내용을 바로 검색해 보세요.
쿼리를 제출하는 중에 오류가 발생했습니다. 인터넷 연결을 확인하고 다시 시도해 주세요.