Xcode 기능 - 애니메이션 : 숨기기, 보이기(투명도 조절) / animation disappear, appear

이번에는 숨기고 보이게 하는 방법에 대해 알아볼께요

다른말로는 투명도를 조절하는 방법에 대해 알아볼께요!

 

 

이번에도 간단하답니다!

먼저 결과영상부터 볼께요

 

 

 

이렇게 보이게, 사라지게 할 수 있답니다

 

1) ViewController

먼저 ViewController에 대상이 연결되어 있어야 합니다 (생략)

 

그리고 이전글인 위치 이동 애니메이션처럼 이전상태와 이후상태가 필요합니다

그래서 먼저 이전 투명도 설정을 하겠습니다

 

2) 이전 투명도 설정하기

투명도라는 것은 대상의 본연 색을 1을 기준으로 얼만큼 뚜렷하게 보이느냐 정도라 생각하시면 됩니다.

다시말해 보이는것을 사라지게 하고싶다면?

투명도 1.0 -> 투명도 0.0

 

안보이는데 보이게 하고싶다면?

투명도 0.0 -> 투명도 1.0

 

이런 원리랍니다. 간단하죠?

 

예시 영상의 상세내역칸을 기준으로 설명하기 위해

투명도 0.0 -> 투명도 1.0 으로 설명할께요!

 

 

이처럼 ViewDidLoad() 함수 내에 이전 투명도를 설정하시면 됩니다

< 투명도 설정하기 / set alpha >

self.viewDetail.alpha = 0

투명도 = alpha 랍니다

간단하죠?

 

3) 투명도 변화 애니메이션

다음은 간단합니다! alpha 값만 애니메이션에서 변경하면 끝입니다!

 

다른 코드가 많지만 일단 하나만 볼께요

< 투명도 조절 애니메이션: 보이기 / translation alpha animation >

UIView.animate(withDuration: 지속시간, animations: {

    대상.alpha = 1

})

UIView.animate(withDuration: 0.5, animations: {
    self.viewDetail.alpha = 1
})

이렇게 alpha 값만 조절하여 손쉽게 보이고 사라지게 만들 수 있답니다!

 

 

 

그러면 예제 영상처럼 다시 사라지게 하려면?

< 투명도 조절 애니메이션: 숨기기 / translation alpha animation >

UIView.animate(withDuration: 0.5, animations: {
    self.viewDetail.alpha = 0
})

간단하죠?

 

 

 

이제 간단간단한 애니메이션에 대해 소개를 했습니다

여기서 제가 안다룬 애니메이션이 하나 더 있습니다 바로

크기조절하는 애니메이션 입니다

 

※ 크기조절 애니메이션

위의 코드들과 방법이 동일하니 코드만 알려드릴께요

self.viewDetail.transform = CGAffineTransform(scaleX: 1, y: 1)

먼저 이전 크기를 설정합니다 (원래크기의 경우 따로 설정 안해도 됩니다)

 

UIView.animate(withDuration: 0.5, animations: {
    self.viewDetail.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
})

이렇게 하면 1 -> 1.5로 가로 세로가 각각 커지게 됩니다.

간단하죠?

 

 

 

자 그러면 마지막으로 아래 영상처럼 만드려면 어떻게 해야할까요?

 

1) 결과버튼 누를시

- 1) 결과 창을 보이게 한다 (alpha : 0 -> 1)

- 2) 결과 내용의 위치를 아래로 이동시킨다 (translation y +방향으로 이동)

- 3) 두가지 버튼들을 보이게 한다 (alpha : 0 -> 1)

- 4) 두가지 버튼들을 아래로 이동시킨다 (translation y +방향으로 이동)

- 5) RESET 버튼을 아래로 이동시킨다 (translation y + 방향으로 이동)

 

2) Detail 버튼 누를시

- 1) 상세 창을 보이게 한다 (alpha : 0 -> 1)

- 2) 상세 내용의 위치를 아래로 이동시킨다 (translation y +방향으로 이동)

- 3) 세가지 버튼들을 아래로 이동시킨다 (translation y +방향으로 이동)

 

3) Detail 버튼 다시 누를시

- 1) 상세 창을 사라지게 한다 (alpha : 1 -> 0)

- 2) 상세 내용의 위치를 위로 이동시킨다 (translation y -방향으로 이동)

- 3) 세가지 버튼들을 위로 이동시킨다 (translation y -방향으로 이동)

 

4) RESET 버튼 누를시

- 1) 결과 창을 사라지게 한다 (alpha : 1 -> 0)

- 2) 결과 내용의 위치를 위로 이동시킨다 (translation y -방향으로 이동)

- 3) 두가지 버튼들을 사라지게 한다 (alpha : 1 -> 0)

- 4) 두가지 버튼들을 위로 이동시킨다 (translation y -방향으로 이동)

- 5) RESET 버튼을 위로 이동시킨다 (translation y -방향으로 이동)

 

굉장히 복잡해 보이지만 차근차근히 하나씩 이해가 될겁니다 :)

 

위치이동 애니메이션은 아래 링크를 참고하시면 됩니다!

fdee.tistory.com/entry/Xcode-기능-애니메이션-위치-이동시키기-animation-translate-location

Xcode 기능 - 애니메이션 : 위치 이동시키기 / animation translate location