SwiftUI 애니메이션: 목록 셀, 모양 스프링, 버튼 효과

SwiftUI 애니메이션의 핵심 공식은 애니메이션이 포함된 상태 부울과 제어 및 활성화를 위한 삼항 연산자를 포함합니다.

### SwiftUI 애니메이션 예제: 목록 셀, 스프링이 있는 도형, 버튼
* 📋 첫 번째 예시는 탭하면 체크 표시가 튀어나오는 목록 셀에 애니메이션을 적용하는 것을 보여줍니다. 이는 **상태 부울(`isSubscribed`)과 애니메이션으로 부울을 토글**하고 애니메이션 효과를 제어하는 **삼항 연산자**를 사용하여 구현합니다.
* 🔄 두 번째 예시에서는 **도형(원)을 탭하면 스프링 효과로 애니메이션이 적용**됩니다. 여기에도 상태 부울, 애니메이션, 삼항 연산자의 공식이 적용되며 **스프링 애니메이션 매개변수(반응 및 감쇠 비율)를 사용자 정의**할 수 있습니다.
* 🔘 세 번째 예시는 버튼을 탭하면 **버튼이 커지고 불투명도가 변하는 애니메이션**을 보여줍니다. 이전 예제와 마찬가지로 애니메이션이 있는 상태 부울과 삼항 연산자 패턴을 따르지만 애니메이션을 여러 번 반복하는 `repeatForever` 수정자가 추가되었습니다.
* 💡 SwiftUI 애니메이션의 핵심 공식은 **상태 부울 정의, `withAnimation`을 사용하여 부울 토글, 애니메이션 효과를 제어하기 위한 삼항 연산자** 적용 등 세 부분으로 구성됩니다.
* 💻 첫 번째 예는 **목록 셀의 체크 표시 애니메이션**을 사용하고, 두 번째 예는 **스프링 효과가 있는 도형 애니메이션**을, 세 번째 예는 **탭하면 커지고 불투명도가 변경되는 버튼 애니메이션**을 보여줍니다.
* 🎨 사용자 지정 옵션에는 **애니메이션 유형(예: 스프링 또는 이지 인/아웃), 지속 시간, 스프링 애니메이션의 반응 강성 및 감쇠 비율**과 같은 특정 매개 변수를 조정하는 것이 포함됩니다.
* 🔄 '**withAnimation' 함수**는 SwiftUI에서 변경 사항을 애니메이션화하는 데 중요한 역할을 하며, 해당 범위 내의 모든 상태 변경 사항을 자동으로 애니메이션화합니다.
* 🔍 고급 애니메이션의 경우 개발자는 **트랜지션, 일치하는 지오메트리 효과, 복잡한 효과를 위한 여러 애니메이션 결합** 등 SwiftUI의 애니메이션 기능을 살펴보는 것이 좋습니다.

hey guys let's go over three quick examples of how to use animations with swift ui so here i have a new xcode project and what i want to do first is basically make this look pretty and i'm going to do that with a z-stack and put a linear gradient with a background of like blue turning into black with the start point of top leading to bottom trailing just to kind of get the ball rolling here and then we're going to go dot edges ignoring safari.all all right uh the first example we're going to do is like a list cell and i think one of the best ways to do this is a check mark bouncing so if we were to do like an h stack with text and then have a spacer and then have an image at the end of system name dot checkmark.circle dot fill so you can see we have black text we have a black check mark we have a lot of work to do so we're gonna font dot system make this bigger 24 then we're going to do dot foreground

color is dot green. There we go. Then we're going to give it some padding. And then on this h stack, I think we should give it some padding as well. Yeah, bring those in. And then give it a cool background. So we can go background, uh, dot ultra thin material in a rounded rectangle to give it that like glass morphism type of look. 20 style duck continuous. Cool. Let's change this text to subscribed to Logan Koshanka because we want this to be like a task that you can check or uncheck. And this is a great task to do. We could change this to bold. Actually, this brings me to my first point. And when you do animations in SwiftUI, there's essentially a formula with three parts. Number one is that you need a state boolean. So what we're going to do is come up to the top here and go at state private var is subscribed. We're going to set it to false by default. Then what you need to do is use with animation to toggle that boolean. So we will use this by the check mark.

going to come down here and go dot on tap gesture, and we're going to say with animation and do this subscribe dot toggle. And with this animation, you can customize it. You can go dot ease in out. You could set a duration of 0.5. How's that or 1.0? So part 3 of that formula is to use a ternary operator to essentially control and activate that animation. So what do we want to animate? Let's say we can do so. First of all, we can use an opacity on the text, and we could say is subscribed question mark. So if they are, we're going to make the opacity one, so full. And if not, we're going to make it 0.5, so we're going to have a little bit of gray to it. So we could test that by coming here, tapping it, and see looks good, right? Now we can come to our system name for the image and say is subscribed. If they are, then we're going to use this check mark. And if not, we're just going to use circle.

for foreground color that's another example. We can do is subscribe dot green else dot black see cool. Then we can do a uh another one. I like to do is dot scale effect. And is subscribed you can make it 1.25. It's its normal size if not we'll make it one. So it'll not only will it turn green. It'll get bigger so it kind of comes out cool. So that's all I had for the first one. That's the simplest uh example. I think the second example. We're going to use a uh shape with with a spring. So what we're going to do here is we're going to embed. We have to embed everything in a v stack actually. And let's give this a spacing of like 50 just to be safe. Uh give ourselves some space. We're gonna come down here to circle. We're going to say dot frame. Let's make the width of 100 height 100. We're going to go foreground style is a linear gradient along with the colors is the easiest one.

to use. And we just want this to look good, you know. We want this to be cyan and green to match our background. And then we'll go top trailing to bottom leading. I was wondering why this was on top. We need to put this inside of our v stack. So go ahead and cut that. And looks like I gotta refactor my code a little bit. That's what we want right there. Okay, so essentially here we're going to start out by doing the same thing, which we're going to use our formula. So first part, state private var animating circle is equal to false. And you can name these anything, but basically we can come down and say onTap gesture with animation. And for this one, we're going to use spring. And we're going to say animating circle.toggle. So that's part two of our formula, right? The problem is this isn't going to do anything if we tap it because we didn't set up a ternary operator. We did not do

our third step so let's go ahead and do that now. We can move the circle with offset. We can say, uh, animating circle for x. If it is animating, it's, you know, going to be moved by 30. If not, by zero. Animating circle for y is going to be up 100. If not, it stays. We can do dot scale effect animating circle. If yes, we can make it twice the size. If not, we'll make it the same size. I feel like that's probably enough for now. So with the spring cool right now, I want to show you guys how to customize this spring animation. So you can look this up on Apple and read their documentation. But I basically have a cheat sheet here. So response, this is going to be your stiffness with zero being the most stiff. For damping fraction, this is going to be your bounciness, zero being your most bouncy. And for blend duration, um, no one seems to know what it does. The definition is incredibly confusing and I couldn't find anything on it. So if

you find out comment and tell me, because I have no idea. Anyway, I think the two most important ones are response/stiffness and your damping fraction/bounciness. So, for response, let's go 0.9, and for damping fraction, let's go to 0.5, and blend duration, we're going to set to 0 because it shouldn't even be there. All right, so let's try this slight bounce at the end, right? So then, if we set this to 0.1 and try it, look how bouncy that is. If we set this to 0.9 and try it, it barely goes, it's very smooth. So, you can play with these as much as you want. And then, for response stiffness, if we go 0.1, it's just quick and no bounce. If we go 0.9, it's kind of like a smooth gradual ease in and out type of deal. So, that's example two. And spring, like I said, I encourage you guys to play with these parameters and kind of see what you like, because

you can go um you can have a very deep dive into that spring one all right so for the third one we are going to use a button example and we're going to give ourselves some space here. We're going to make a button and pick the one with action and label and just hit enter. This will be our action, this will be our label, and for the label let's do that first. Let's make a text that just says animate and let's make it pretty. So we can go bold, we can go .frame(width: 200, height: 50), we can do foreground color .indigo for the text, and then we can say .background(linearGradient( colors: [.mint, .white], startPoint: .bottomLeading, endPoint: .topTrailing)) just to mix it up, you know, cool. That looks good. Clip shape rounded rectangle corner radius of 20 style continuous. We're going to give it a little shadow, just a basic one with a radius of three. All right, so what's step one? State var state boolean so state private var

animating button equal to false. Step two, use with animation to toggle. So, with animation, we're going to do dot ease in out with a duration of one. And then we're gonna say animating button dot toggle. Then we have to give it for step three, our, you know, ternary operator. So we can do the opacity. Maybe we could say animating button, if yes, it is full-on visible. If not, it is only 70% visible. You can see it kind of faded away there. And then another we can do is dot scale effect with animating button, if yes, 1.5. If not, you know, 1.0. It's a regular size. And I think that's enough for now. Let's give our button some padding. And then if we play it, it grows and the full opacity shows. So you can see that effect. But I'm going to show you guys one more thing you can add on to this duration and say dot repeat forever, repeat count save repeat count of 10. So it will repeat 10 times when you do this.

animation in and out. Cool, right? So, if you wanted an effect to kind of emphasize to users, you could do that. So, just to recap: state boolean with animation ternary operator. That's all you really need to know, and I encourage you to explore more on your own. Thank you, guys, for watching.

Easy SwiftUI Animation Tutorial with 3 Examples

Logan Koshenka

SwiftUI에서 애니메이션을 사용하여 세련된 사용자 인터페이스 만들기

시각적으로 매력적인 디자인을 만들려면 Z 스택으로 시작하여 파란색에서 검은색 배경으로 선형 그라데이션을 적용하세요.

그런 다음 안전 영역 수정자를 무시한 점 가장자리를 사용하여 세련된 모양을 만듭니다.

목록 셀의 예에서는 텍스트, 스페이서 및 이미지와 함께 h-스택을 사용하여 체크 표시 바운스 효과를 만들고, 상태 부울과 애니메이션을 사용하는 공식에 따라 SwiftUI에서 애니메이션의 부울을 토글하는 공식을 따릅니다.

탭 제스처로 애니메이션 사용자 지정하기

제스처로 애니메이션을 사용자 지정할 수 있습니다(예: 도트 이지 인/아웃 사용 및 특정 기간 설정).

삼항 연산자는 구독 상태에 따라 불투명도 및 이미지를 변경하는 등 조건에 따라 애니메이션을 제어하고 활성화하는 데 사용됩니다.

또 다른 예는 스케일 효과를 사용하여 요소를 더 크게 만들고 색상을 변경하는 것입니다.

두 번째 예에서는 스프링 애니메이션과 선형 그라데이션이 있는 도형이 사용자 지정 간격이 있는 V 스택 내에 사용됩니다.

맞춤형 스프링 애니메이션을 위한 코드 리팩토링

이 과정에는 애니메이션을 위한 개인 변수를 설정하고, 스프링 애니메이션이 포함된 onTap 제스처를 만들고, 삼항 연산자를 사용하여 애니메이션 상태에 따라 원을 이동하고 크기를 조정하는 것이 포함됩니다.

스프링 애니메이션을 사용자 지정하려면 강성을 위한 반응, 탄력성을 위한 댐핑 비율, 불분명한 효과를 위한 블렌드 지속 시간을 조정해야 합니다.

애니메이션 파라미터에서 바운스 및 강성 조정하기

사용자는 반응, 강성 및 감쇠 비율이 애니메이션의 바운스와 부드러움에 미치는 영향을 탐색합니다.

이러한 매개변수를 조정하여 애니메이션의 동적 동작을 제어할 수 있습니다.

세 번째 예에서는 굵은 텍스트, 색상 그라데이션, 둥근 사각형과 같은 기능을 활용하여 특정 디자인과 애니메이션이 있는 버튼을 만듭니다.

애니메이션을 사용하여 버튼 상태 토글하기

이 과정에는 1초 길이의 '점 쉽게 들어가고 나오기' 애니메이션을 사용하여 버튼을 토글하는 것이 포함됩니다.

삼항 연산자를 사용하여 버튼의 상태에 따라 버튼의 불투명도 및 스케일 효과를 제어하여 페이드 및 크기 조정 효과를 만듭니다.

또한 "점 영원히 반복"과 반복 횟수 10을 사용하여 애니메이션이 10회 반복되도록 설정하여 강조할 수 있습니다.