안녕하세요 윌리엄입니다 ~~
오늘은 애니메이션에 대해 다뤄 보려고 하는데요
가장 많이 사용하고 또한 기본이 되는
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의 기준은 어디로 움직이는것인가?라는
생각을 했고
찾아 본결과!!

이러한 그림을 발견했습니다~~
따라서 아래서 위로 움직이고 싶다면
android:fromYDelta="500%"
android:toYDelta="0%"
이렇게 하시면됩니다!
x축은 기존에 알고 계시던대로 하시면 됩니다!
저는 이것을 fab(Floating Action Button) 에 적용 했는데요
상단 두개의 아이콘은 InVisible로 설정후
fab.setOnclickListener{
// Change Icon's to visible
// startAnimation
}
버튼 클릭과 동시에 나오도록 했습니다!^^
개인적으로 애니매이션은 UI에 생동감을 주는 중요요소 라고 생각을 하는데요
하지만 만드는것은 기본의 반복과 활용이면 충분하다고 생각하기에
기본에 충실히 활용하면 더 좋은 UI가 나오지 않을까 생각합니다
그럼 오늘도 화이팅!!!!
https://github.com/ByounJeongyoung