5차 세미나
- Shape, font
- Lottie
- Animation
Shape, font
안드로이드에는 Shape Drawable이라는 것이 있습니다. XML로 쉽게 Drawable 객체를 생성하는 것인데, 배경 이미지를 만들 때 사용하면 편리합니다. 실제 비트맵을 사용하지 않아도 되므로, apk의 용량도 줄여주고 개발자가 쉽게 모양을 바꾸고 사용할 수 있어서 이점이 있습니다.
다양한 속성이 있지만, 이러한 부분들은 제가 알려주는 것보다는 검색해서 찾아보고 직접 사용하는 것이 도움이 될 것 같아서 정리가 잘된 블로그를 하단에 링크를 걸어드리겠습니다.
(1). Shape의 유형
- rectangle : 포함하는 뷰를 채우는 사각형으로 이는 기본 Shape입니다.
- oval : 포함하는 뷰의 치수에 맞는 타원형 Shape입니다.
- line : 포함하는 뷰의 너비에 걸쳐 있는 가로선. 이 Shape을 사용하려면 <stroke>요소를 통해 선의 너비를 정의해야 합니다.
- ring : 고리형 Shape 입니다.
(2). Shape의 내부 요소
- <solid> : Shape에 단색을 채울 때 사용합니다.
- <gradient> : Shape에 그라데이션을 줄 때 사용합니다.
- <corners> : Shape이 사각형일 때, 둥근 모서리를 만들 때 사용합니다. [오른쪽,왼쪽,위쪽,아래쪽 모두 개별적으로 corner 속성을 줄 수 있습니다.]
- <stroke> : Shape의 윤곽선의 두께, 색상을 지정할 때 사용합니다.[dashGap, dashWidth 요소를 통해 점선도 구현 가능]
이제 만든 xml 파일을 적용하려는 View의 background에 지정해주면 적용됩니다. :)
(3). font 적용
font 적용은 안드로이드 버전이 업그레이드 될수록 간단해지고 있습니다.
- 먼저, res 폴더 밑에 font라는 디렉토리를 만들어주세요.[Resource Type을 선택하면 됩니다.]
- font 디렉토리에 다운받은 font를 넣어줍니다.
- EditText나 TextView의
fontFamily를 통해 다운받은 폰트를 설정해주면 끝입니다.
Lottie
Lottie는 모션 제작 툴인 AfterEffects에서 디자이너가 작업한 모션 그래픽을 Bodymovin 플러그인을 사용하여 json 파일 형태로 내보내고 이를 파싱하여 모바일 및 웹에서 네이티브로 렌더링하는 라이브러리입니다. AfterEffects에서 제작된 결과물이 개발자의 추가 작업 없이 디자이너 혹은 모션 제작자의 의도대로 웹이나 앱에서 렌더링되어 보여지기 때문에 간편하게 이쁜 인터렉션을 적용할 수 있습니다.
Lottie 적용하기
- res 폴더에 New -> New Resource Directory를 클릭하고 Resource Type을 raw로 설정하고 OK 버튼을 눌러줍니다.
- https://www.lottiefiles.com/에서 다운 받은 애니메이션 json 파일을 raw 폴더에 넣어주세요.
- app:lottie_rawRes 옵션에는 다운로드 받은 json 파일을 넣어주면 됩니다.
- app:lottie_loop 옵션은 반복것인지 아닌지를 결정할 수 있습니다.[false]
- app:lottie_autoPlay 옵션은 자동으로 움직이게 할것인지 아닌지 결정합니다.
- 해당 옵션들은 XML에서 설정해도 되고 code로 설정해도 됩니다.
또한, 애니메이션 리스너를 달아서 다양한 이벤트[애니메이션이 시작될 때, 종료될 때, 반복될 때 등등]를 처리할 수 있습니다. 이러한 상태를 캐치할 수 있어야 다양한 구현이 가능하겠죠?
- Lottie를 클릭하면 애니메이션을 시작합니다.
- 애니메이션이 종료되었을 때 onAnimationEnd 함수를 구현해서 화면을 전환합니다.
Animation
애니메이션의 종류는 정말 다양합니다. Frame Animation, Tween Animation, Property Animation 등등이 있는데, 이번 세미나에서는 Tween Animation을 배워보았습니다.
- Tween Animation : 애니메이션 대상에게 애니메이션 연산을 주어 그 결과를 연속적으로 디스플레이 하는 방식을 말합니다.
그러면 애니메이션의 재사용과 쉬운 편집을 위해서 XML로 정의하도록 하겠습니다.
- 앞서 만든 font나 raw 디렉토리처럼 res 디렉토리에 New -> New Resource Directory 클릭 후 Resource Type을 anim로 설정한 후 OK를 누릅니다.
- 그리고 xml 파일을 생성하면 됩니다.
애니메이션 xml 파일을 구성하는 속성
(1). alpha [투명도]
- fromAlpha : 시작 투명도
- toAlpha : 종료 투명도
- [1.0일 때가 원래 투명도를 의미합니다.]
(2). scale [확대/축소]
- pivotX/pivotY : 회전 기준점으로부터 고정점 위치
- fromXScale/fromYScale : 효과 시작 크기[1.0일 때 원래 크기]
- toXSclae/toYScale : 효과 끝 크기
(3). rotate [회전]
- pivotX/pivotY : 회전 기준점으로부터 고정점 위치ㅣ
- fromDegress : 몇 도부터 인지
- toDegress : 몇 도까지 인지
- duration : 얼마 만에 회전시킬 것인지
(4). translate [위치 이동]
- fromXDelta/fromYDelta : 시작 지점
- toXDelta/toYDelta : 끝 지점
속성에 공통으로 들어갈 수 있는 옵션
- interpolator : 애니메이션 효과 중 빠르게 혹은 느리게 효과를 줄 수 있습니다.
- repeatCount : 반복 횟수
- repeatMode : 반복 모드[reverse, restart]
- fillAfter : 애니메이션 효과 후 상태 유지 [기본값은 false]
- startOffset : 애니메이션 시작 전 대기 시간
interpolator 값 정리
- accelerate_interpolator : 점점 빠르게
- decelerate_interpolator : 점점 느리게
- accelerate_decelerate_interpolator : 점점 빠르게 가다가 느리게
- anticipate_interpolator : 시작 때 당기기
- overshoot_interpolator : 종료 때 늘리기
- bounce_interpolator : 종료 위치에서 튕기도록
실습 코드는 github에서 확인할 수 있습니다.
