11. Animating View Properties

Animating View Properties

 

바로 이전의 animation은 Auto layout의 값을 바꾸는 형식으로 구현하였다. 

이재 Auto layout 값이 아닌 View 의 속성 값으로 Animating하는 방법을 알아보자

그렇다면 View.asdfasdf() 이런 식으로 구성되겠지~

 

animating할 View의 속성들은 3가지 카테고리로 나뉜다.

 

1. 

 

2. 

 

3. alpha(투명도)

 

 

 

 

여기서 주의사항!!!!

position과 size의 경우 auto layout과 겹쳐서 문제가 생길 수 있다.

왜냐하면 Auto layout을 지정한 View를 auto layout에서 벗어나게 animating을 하게되면 시스템은 해당 auto layout으로 다시 돌아오게 만든다.

그렇기에 우리가 View 속성을 이용해서 animating 시킬 때는 조심해야 한다.

 

 

 

 

그래서 지금부터 구현할 것은 우선 ImageView의 경우는 기존과 똑같은 방식으로 구현할 것이다.

 

여기서 Label의 경우는 큰사이즈 우측에서 정사이즈 중앙에 위치하도록 할 것인데, animation option을 회전하도록 하여 구현할 것이다. 

 

 

 

 

 

해당 라인을 살펴보면 우선 View(label) 의. Transform 속성의 값을 바꿔서 애니메이션 효과를 내려고 한다. 

위치는 x축은 view 의 width크기만큼 옮기고 y축은 변화가 없다.

크기는 3배인 상태에서 줄이는 방향이기에 3배크기로 지정해둔다.

회전을 예비하여 180도 회전된 상태로 내비둔다. 

그리고 투명도를 0으로 하여 투명하게 설정한다. 원래의 값이 될때는 1로 설정하면 된다.

 

정리하면 viewDidLoad에서 prepareAnimation()이 호출되기에 메모리에 로드되었을고 viewDidLoad 메소드가 호출되면 view의 넓이만큼 오른쪽에서 크기가3배이며 180도 회전된 상태로 있는 것이다.  투명한상태로~

 

그렇다면 viewDidAppear() 에서 호출되는 showAnimation() 에서는 본래의 위치에 제대로 두도록 구현하고 animation 효과를 주면 끝나겠지!

 

 

 

showAnimation() 을 구현해보자 

 

 

 

 

 

기존의 Spring을 활용한 Animation을 구현하였는데, 여기서 animations안에 원하는 속성의 값 변경이 이루어 지면 되는 것이다. 같이 넣으면 animate가 동시에 동작하기에 좀더 부드럽게 효과를 주기위해 따로 구현하였다.