iOS ) AnimationOptions - etc

안녕하세요 :) Zedd입니다.

금요일이다ㅣㅇㅎㅎㅎ

그럼 AnimationOptions의 마지막편..을 공부해봅시당

우리가 본 curve, transition, frame어쩌고 말고도 얘네가 있는데요...

얘네를 봅시당 

오늘 공부 할 것들은 curve, transition처럼 독립적인(?) 그런 옵션이 아니라, curve, transition옵션들과 같이 쓰이는 옵션들이라고 보시면 됩니다. 

layoutSubviews

엥..UIView에도 layoutSubviews 라는 메소드가 있죠!!!

근데 AnimationOptions인데.. layoutSubviews있네요.

얘의 정의를 봅시다.

commit 시간에 subView들을 배치하여 parent와 함께!! 애니메이션을 재생합니다. < 입니다.

이건 그냥 정의대로 보면 될듯..? 이건 언제가 제가 쓰게 되면 꼭 예제를 추가할게여

allowUserInteraction

유저 인터랙션을 허용하다..뭐 그런뜻..UIView의 isUserInteractionEnabled가 생각나는군요..왠지 얘랑 비슷할거같죠?

정의를 봅시당

사용자가 애니메이션을 보면서 view와 상호작용(interact)할 수 있게 합니다.

라는건데요.

이건 그냥 간단하게 예제로 보여드릴게요

테이블뷰를 만들고, 아래 버튼을 누르면

이렇게 setContentOffset을 zero로 줬어요! animation은 false로!

그리고 tableViewCell을 클릭하면 어떤 ViewController가 뜨게 해놨는데, 지금 보면 애니메이션 하는 동안 cell을 막 클릭해도 아무 반응도 없죠. 

이게 기본이에요! 하지만 나는 애니메이션 하는동안...cell 클릭하면 그에 맞는 행동들이 실행됐으면 좋겠어 하면 allowUserInteraction옵션을 사용하면 됩니다. 

한번 써봅시당

이렇게 allowUserInteraction옵션을 주고 실행시켜보면

이렇게 cell에 대한 action이 잘 동작하는 것을 볼 수 있죠

암튼 뭐 이런겁니당..

beginFromCurrentState

현재 상태에서 시작한다..? 대충 뭐 그런뜻 같은데요. 정의를 봅시다.

이미 진행중인 애니메이션과 관련된 현재 설정에서 애니메이션을 시작합니다.

다른 애니메이션이 실행중이 아니면 이 옵션은 효과가 없다고 해요.

어떤건지 봅시다!

왼쪽이 beginFromCurrentState 옵션이 있는거에요.

저 네모가 y좌표가 0부터 중간까지 왔다 갔다 하도록 애니메이션을 걸어놓고, 네비게이션 Item을 클릭하면 중간에 가도록 애니메이션을 걸어놨습니다.

beginFromCurrentState = 현재 상태에서 시작한다!!!! 

왼쪽을 잘보면, 내가 y좌표가 0부터 중간까지 애니메이션해!!! 해놓고 이제 슬슬 올라갈 쯤에 +버튼을 딱 눌렀더니

"지금 그 상태에서"애니메이션을 시작하는 것을 볼 수 있죠?

하지만 오른쪽처럼 beginFromCurrentState가 없으면 이미 실행중인 애니메이션들은 이 새로운 애니메이션이 시작하기 전에 끝날 수 있어요 (문서에는 If this key is not present, all in-flight animations are allowed to finish before the new animation is started라고 나와있어요.)

그래서 오른쪽 gif를 보면 내가 +를 누르자마자 지금 현재 애니메이션을 바로 완료하고 다음 애니메이션(+를 눌렀을 때 실행되는 애니메이션)을 실행하는 것을 볼 수 있습니다.

감이 안오실까봐 github에 프로젝트를 올려놨어요@!! 참고하시길 바랍니다~ 

repeat

쉬운거 나와땅

그냥 말그대로 repeat!! 반복하는거요.

애니메이션을 무한으로 반복하는거임 해봅시당

그냥 이렇게만 해주고 실행하면

계속 반복하는 것을 볼 수 있습니다.

transition도 계속 반복함 ㅎ_ㅎ

autoreverse

이름만 봐도....오토..리벌스...하면 감이 오시죠

자동으로 애니메이션을 앞뒤로 실행해주는 그런 옵션입니다. 그리고 반드시 repeat옵션과 같이 써야합니다. (must be combined with the repeat option)

그렇다고는 하는데...안써도 한번은 ㄱㅊ 이게 무슨말인지는 예제를 통해 봐봅시다.

일단 repeat는 안넣고 autoreverse만 넣었어요!

이;렇게 한번은!!! 왔다 갔다 하게 됩니다. repeat를 안넣어서 그런거구요. repeat를 넣으면?

왔다갔다 하게 됩니당. 정말 유용한 옵션이죠ㅕ...

자 다음은 

overrideInheritedDuration

overrideInheritedCurve

요 2개를 같이볼게요. 

overrideInheritedDuration : 애니메이션이 제출(? submit)되었을 때, 지정된 원래의 duration을 사용하도록 애니메이션을 강제 실행합니다.

이 key가 없으면, 애니메이션은 애니메이션의 남은 duration을 상속합니다. (남은 duration이 있는 경우.)

overrideInheritedCurve : 정의는 위와 똑같고, duration이 curve로만 바뀝니다.

이게[ 도대체 뭐지..이것도 모를삘

아니다 알아따!!!!

위 그림에서 ignore nested duration이 많은 힌트가 되었씁니다..

이렇게 UIView.animate안에 UIView.animate를 또 넣어주었어요. 근데 지금 각각 duration이 많이 차이가 나는 것을 볼 수 있죠?

지금 이렇게 옵션을 아무것도 안 준 상태로 실행해볼게요.

느려..

그럼 이렇게 해줘볼게요.nested animate블록에 overrideInheritedDuration옵션을 줘봤습니당.

그럼 이렇게 nested UIView animate에 줬던 duration으로 움직이는 것을 볼 수 있습니다.

아니 근데 저는 

얘네가 ignore / nested / duration이니까..

이걸 이 nested에 있는 애들한테 주는게 아니라..바깥에 있는 애 한테 줘야하는게 맞지 않나..라는 생각이 들면서도..

정의를 보면

"애니메이션이 제출되었을 때 지정된 원래의 duration 값을 사용하도록 애니메이션을 강제 실행합니다." < 를 보면..nested에 넣는게 맞다는 생각이 들면서도..

근데 결과는 정의에서 말한듯이 됐으니 정의를 믿자.

그니까 nested가 0.5였죠? 그걸 사용하도록 강제로 실행하는 그런 옵션이었습니다.

그렇다면 curve를 봅시다.

아니 근데 갑자기 curve라니까 좀 그렇지 않음??

duration은 파라미터니까 그럴수 있찌만 curve는 도대체 뭐지..그 커브 시리즈인가..

실험해보니 그러네욥....뭐지./...

자 이렇게 줘봅시다. 당연히 커브옵션을 같이 줘야겠죠?

그럼 바깥의 animate option에는 아무것도 안줬으니까 기본적으로 머다????

curveEaseInOut임 ㅇㅇ 근데 안에는 curveEaseIn을 줬습니당.

curveEaseIn은 느리게 시작했다가 빠르게 되는가ㅓ죠? 그래서 저번 curve글에서 위에 챱 하고 달라붙었었자나요

그럼 과연 위에 챱 붙을것인가...

응 챱이야~

그럼

curveEaseIn을 빼봅시다. 그럼 기본적으로 curveEaseInOut이 들어갈테니...저 inheritedCurve가 아무효과가 없겠네요. 

챱이 아닌 안정적인...그런...느낌을 느낄 수 있을것인지

편-안

비교해봅시당

알겠죠

allowAnimatedContent

프로퍼티값을 동적으로 변경하고 view를 다시 그려서 view에 애니메이션을 적용 < 이게 정의입니다.

아나 이것도 모를삘인데

잘 안보이시나요..? 

뒤에 뭐라 적혀있냐면

transition에만 적용되는 옵션인가 보네요.

아니 내가 이 사실을 코드에 있는 주석으로 알아야 하다니.......문서가 뭔데요..ㅡㅡ

아니 근데 이것도 모르겠는데.. 

프로퍼티값을 동적으로 변경하고 view를 다시 그려서 view에 애니메이션을 적용 < 이게 애초에 UIView.animate에 들어가면 다 이런거 아녀..?

근데 기본은 view를 다시 안그리나..?

이것도 진짜 모르겠움..하 ㅠ

아악 저는 일단 문서 보고, 실험을 몇가지 해봅니다. 그리고 모르겠으면 구글에 검색하거나 구글에 검색해도 모르겠으면 github에 검색해보는 편이에요. 그럼에도 불구하고 모르겠으면...모르겠다고 적습니다.

근데 github을 보면..왜 여기에 allowAnimatedContent를 넣었지..? 하는 코드가 너무 많네요. 걍 animate에 넣은 코드가 너무 많음. transition에만 적용된다고 그랬는디....아니면 제가 잘못 이해한걸수도...???

흠..이건 패스...아시는 분은 댓글 달아주시면 감사하겠습니다.

showHideTransitionViews

show / hide / transition / views

보여주다 / 숨기다 / 트랜지션 / 뷰

정의는 view transition중에 view를 숨기거나 보여줍니다.

이 key를 사용 할 때, 두 view (both view 아니 갑자기 왜 both야)가 모두 상위 view의 계층 구조에 있어야 합니다. 

adding / removing 대신에 hidden state에서 전환

흠 이것도 이름에 transition이 들어가있으니 transition에만 적용이 되나..?

오 차이점 찾음!!!!!!!!zzzz이것도 모르는채로 넘어가는건가 했는데..

일단 both view & transition 에 힌트를 많이 받았어요!

transition에서 both view라고 할 수 있는건..

요 메소드를 말하는게 아닐까 싶었어요.

both view!!!

그래서 했더니 일단은..옵션이 있냐 없냐에 따른 차이점은 찾았어여ㅛzzz 어디에 쓸지는 모르겠음 ^^..

self.view는 아실테고, myView가 저 파란색 view에요!!!!!

그리고 옵션으로 transition어쩌고를 넣어줬습니다.

그럼 이제 showHide옵션을 넣어줘볼게요. 

요로케

없어져벌임

비교샷

네..사라졐ㅆ>..이것밖에 모르겠구요..

실험 한가지 더 해보면..

파란View가 myView고, innerView가 파란View안에 있는 흰색 view에요.

그리고 위 코드를 실행해보면

innerView가 사라집니다. 근데

저 showHide옵션만!!!!!! 제거 하고 실행해보면

에러나버림...

제가 이 transition메소드에 대해 잘 몰라요zzz 뭔가 얘네끼리의 계층관계가 있는데, 제가 아직 그걸 몰라서...정확한 이유는 모르겠네요.

하지만 하나 예상을 해보자면..

아나 안보이네?

암튼

보면 adding / removing하는 대신에!! 라고 적혀있죠? 그러니까 기본 동작이 adding / removing이라는 걸로 추측을 하면...

저 옵션이 없을때의 에러문구가 "Can't add self as subview"인것도 이해가 가죠.

from이랑 to를 바꿔보면 안되냐?? 

흠 그럼 저 showHide옵션이 있든 없는 에러는 안나는데, 저 옵션에 따른 차이점이 없습니당...

아니 근데 이 메소드가 제가 생각한거랑 다르게 동작하네요zzzz

난 myView랑 innerView를 넣어줬는데 왜 view가 움직이는지...???

나중에 이것두 공부해봐야겠슴

다음으로 넘어가 봅시다.

overrideInheritedOptions

그거 아시나요...?

이게 마지막이라는것을...

엇 근데 아까 

overrideInheritedDuration

overrideInheritedCurve

이넘들이랑 비슷하게 생겼군요..

정의는 animation type이나 옵션을 상속하지 않는 옵션입니다.

않는!!!

아니 그럼 이 옵션을 안넣으면 되잖;; 기본적으로 상속이 된다는 말인가..???

ㅠ퓨ㅠㅠㅠㅠ진짜 모르겠다

제 예상에는 

overrideInheritedDuration

overrideInheritedCurve

이게 지금 duration이랑 curve만 ignore하니까..options는 아마 모든 옵션을 다 무시하지 않을까? 했거든요

그러니까 이렇게 하면 autoreverse랑 repeat은 무시가 되는거죠. (내 예상)

근데 autoreverse랑 repeat은 아예 저 nested로 안들어가더라구요. 그니까 효과가 없음......저 옵션이 있든 말든..autoreverse랑 repeat이 안먹힙니다. center.y가 200으로 가고 다시 밑으로 내려가면서 계속 반복해야하는데 그냥 200으로 올라온뒤에 바로 멈춰버립니다.

흠...이것도..아시는 분 있으면 댓글좀..ㅎ

오늘 모르는게 굉장히 많은채로 마무리 하는 것 같아서 굉장히 찜찜하지만 뭐 모르겠는거 어쩌겠습니까..

그래도 새로운 사실을 많이 알아서 기분은 좋네요 XD