본문 바로가기

카테고리 없음

Android Animation [kotlin]

반응형

안녕하세요 윌리엄입니다 ~~

 

오늘은 애니메이션에 대해 다뤄 보려고 하는데요

가장 많이 사용하고 또한 기본이 되는 

 

1.회전 (rotate)

2.크기 (scale)

3.투명도 (alpha)

4.이동 (translate)

 

이 4가지를 소개 하도록할께요!

 

 

들어가기전에

이 코드는 anim 폴더에서 작성해야 하는것은 알고계시죠?

 

그럼 하나씩 속성을 알아보도록 할께요

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    //애니메이션 완료후 바뀐 효과 유지
    
    //회전
	<rotate
	//시작 각도와 끝나는 각도 (180도 회전하고자 할때 코드)
    	android:fromDegrees="0"
    	android:toDegrees="180"
    	android:pivotX="50%"      //기준 점 x,y의 중간
    	android:pivotY="50%"
    	android:duration = "200"  //지속 시간 0.2초
        />
    
    //크기
     <scale
        android:duration="2000"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromXScale="0.8"   //(to Scale 생략!단지 0.8서부터만 시작해도 원래 크기로 가므로
        android:fromYScale="0.8"      커지는 느낌)

        />
    
    //투명도
    <alpha
        android:duration="2000"
        android:fromAlpha="1"
        android:toAlpha="0" />
        
    //이동
    <translate
        android:duration="2000"
        android:fromYDelta="0%"   //0에서 y축500으로 x는 변화 없음
        android:toYDelta="500%"
       />

    
</set>

 

구초 

        <set>

              <rotate/> 

              <scale/>

              <alpha/>

              <translate/>

        </set>

 

 

대부분 "from A to B" 구문 처럼 사용하시면 돼요! 

 

그런데 제가 조금도 강조 하고 싶은 부분은 Translate 부분인데요

위에서 적은

 android:fromYDelta="0%"  

 android:toYDelta="500%"  //최대의 변화를 보기위해 500(일반적으로 100% 사용)

 

여기서 결과는 아이콘이 하단으로 내려가게 됩니다!!

 

저는 "이게 올라가야 정상"이라고 생각했는데 적용이 안돼서 고민을 많이 했는데요

그럼 기준점에 문제가 있지않을까?

 

translate의 기준은 어디로 움직이는것인가?라는

생각을 했고 

 

찾아 본결과!!

 

이러한 그림을 발견했습니다~~

y축의 + 방향이 기존과 반대

따라서 아래서 위로 움직이고 싶다면

 android:fromYDelta="500%" 

 android:toYDelta="0%"

 

이렇게 하시면됩니다!

x축은 기존에 알고 계시던대로 하시면 됩니다!

 

저는 이것을 fab(Floating Action Button) 에 적용 했는데요

 

상단 두개의 아이콘은 InVisible로 설정후

 

fab.setOnclickListener{

  // Change Icon's to visible

 // startAnimation

}

 

버튼 클릭과 동시에 나오도록 했습니다!^^

 

 

각 애니메이션을 초기화
fab 버튼 눌렀을때 리스너

 

클릭할때마다 바뀌는 Boolean 형 clicked를 통해 애니메이션의 작동

 

 

 

개인적으로 애니매이션은 UI에 생동감을 주는 중요요소 라고 생각을 하는데요

하지만 만드는것은 기본의 반복과 활용이면 충분하다고 생각하기에 

기본에 충실히 활용하면 더 좋은 UI가 나오지 않을까 생각합니다

 그럼 오늘도 화이팅!!!!

 

https://github.com/ByounJeongyoung

 

반응형