티스토리 뷰

정말 오랜만입니다

글쓰는거 참 어렵습니다;

이번에는 아주 간단한 애니메이션에 대해 알아보겠습니다


30. 애니메이션에 대해 알아보자 (Tween Animation)

30-1 애니메이션?


이 강좌에서 알려드릴 애니메이션은 Tween Animation이라는 이름을 가진 애니메이션 입니다

트윈 애니메이션 이라고 하는데요


버튼이 움직이거나, 사라지거나, 위치가 바뀌거나, 커지거나

이런 효과를 띄울수 있습니다



사용되는 속성이 적지 않고 이해하기 어려운 부분이 많습니다

다음 강좌가 올라올때까지 예제소스를 숨겨두지 말고 바로 오픈하고 있으니 글 한번 보시고 바로 소스를 보시는걸 추천드립니다


참고로 이 트윈 애니메이션은 간단한 애니메이션입니다;

나중에는 그래프 애니메이션등등등... 머리아파요 ㅠㅠ




30-2 메인 레이아웃 투척


30대 강좌에서 레이아웃을 공부하는것은 무의미 하므로 투척합니다



메인 레이아웃에는 버튼 5개를 만들어 주시면 됩니다

이 강좌에서 배울 애니메이션은 4가지이고, Set이라는건 두가지 이상의 효과를 동시에 사용할때 사용합니다


더보기





30-3 res/anim


애니메이션을 정의한 xml파일은 res/anim폴더에 들어있습니다


[Development/App] - #3 App의 구조와 동작 원리 강좌에서 res폴더 내부를 관찰할때 설명했던 부분입니다

혹시 까먹으신분 있으실까봐...


기본적으로 프로젝트를 만들면 이 폴더는 없습니다

따로 만들어 주시면 됩니다



res/anim에는 5가지의 xml 파일을 만들꺼예요


먼저 투명도를 조절하는 alpha부터 관찰해 봅시다




더보기



정말 간단합니다



저 <alpha> 태그에 정의된 대로 애니메이션이 표시될 겁니다



먼저, 어떤 속성들이 존재하는지 확인해 보겠습니다

  • android:duration : 지속시간 입니다, 1000이 1초이며, x초동안 애니메이션을 재생하라 라는 뜻입니다
  • android:fromAlpha : 처음 투명도 값입니다, 0.0부터 1.0까지의 범위이며, 0.0이 완전투명이고, 1.0이 불투명 입니다
  • android:toAlpha : 끝날때 투명도 값입니다


종합해 보면, 10초동안 처음에 완전 투명에서 불투명으로 투명도를 바꿔라 라는 뜻입니다




<alpha>에서 3개의 속성만 사용할수 있을까요?

그건 아닙니다


아래에 공통적으로 쓰이는 몇가지 속성을 입력해 두겠습니다

  • android:startOffset : 애니메이션을 시작하기 전 대기시간 입니다
  • android:repeatCount : 반복 횟수 입니다 -1은 무한반복
  • android:repeatMode (restart, reverse) : 반복 모드입니다 restart는 애니메이션을 처음부터 반복, reverse는 애니메이션을 반시계방향으로 다시 실행
  • android:interpolator : 애니메이션 효과가 지속되는 동안 빠르게, 또는 느리게 효과가 진행되도록 만듭니다
  • android:fillAfter : 애니메이션 효과가 끝난뒤에 상태를 유지할지 결정합니다, 기본은 false


이중 android:interpolator에 들어가는 속성에 대해 자세한 설명을 더보기 처리 해두었습니다


더보기





다음은 회전을 담당하는 rotate입니다


더보기


여기서도 처음 보는 속성들이 몇개 보입니다


  • android:fromDegrees : 시작하는 회전각도
  • android:toDegrees : 끝의 회전각도
  • android:pivotX : 회전축의 X 좌표
  • android:pivotY : 회전축의 Y 좌표


이부분이 좀 이해하기 어렵습니다...


android:fromDegrees와 android:toDegrees는 직접 값을 변경해 보시면서 알아가시는게 확실히 와닿습니다


아래 두개의 설명을 더 자세하게 드리면

View가 회전할때 회전의 중심이 되는 중심 축을 설정합니다


이때 단위를 "정수", "%", "%p"를 사용할수 있는데요

정수의 경우는 절대 좌표이고, %는 애니메이션을 적용할 View를 기준으로 한 비율, %p는 View를 감싸는 부모 View를 기준으로 한 비율입니다


이해가 안됩니다...


제가 이해한것이 맞다면 이렇게 표현될것입니다



50%, 50%는 딱 중간이겠지요?



즉 중간을 기준으로 0도부터 360도 까지 회전한다 라는 뜻입니다




3번째로 크기를 담당하는 Scale입니다



더보기


으어어어어어어어어


머리아프네요


  • android:fromXScale="1.0" : 처음의 가로 크기입니다 1.0은 원래 크기이고요
  • android:fromYScale="1.0" : 처음의 세로 크기입니다
  • android:pivotX="50%" : 크기를 변경할때의 중심점 입니다 X좌표이고, 설명은 위와 같습니다
  • android:pivotY="50%" : Y좌표이고, 위와 같습니다
  • android:toXScale="2.0" : 끝의 가로 크기입니다 2.0은 1.0의 두배이므로 두배로 크기를 키우는 애니메이션을 볼수 있습니다
  • android:toYScale="2.0" : 끝의 세로 크기입니다, 위와 같습니다





다음은 위치변경 입니다



더보기



  • android:fromXDelta="0%p" : 처음 애니메이션이 시작될때 View의 X 위치입니다 0%p이므로 원래 위치
  • android:fromYDelta="0%p" : 처음 애니메이션이 시작될때 View의 Y 위치입니다 0%p이므로 원래 위치
  • android:toXDelta="20%p" : 끝날때 X위치입니다 가로이므로 부모 View의 20%만큼 오른쪽으로 이동합니다
  • android:toYDelta="20%p" : 끝날때 Y위치입니다 세로이므로 부모 View의 20%만큼 아래로 이동합니다




이제 마지막으로 애니메이션을 묶을수 있는 Set에 대해 알아봅시다

이건... 그냥 <set> </set>으로 여러 애니메이션들을 묶어주시면 됩니다 ㅋㅋㅋ




더보기




작동 영상을 확인해 보겠습니다






간단하다고 했지만 설명하면 이게 뭔말인지 모르실겁니다

저도 아직 완벽하게 이해한부분이 아니므로 틀린부분이 있을수 있습니다


많은 지적 부탁드립니다



java로 애니메이션을 만드는 방법은 자세한 글이 있어 소개해 드립니다

http://blog.naver.com/jolangma/150115948509


글이 없을경우???




ExampleTweenAnimation.zip



머리가 아파서 횡설수설한거같네요;


예제소스 뜯어보시며 값 하나씩 수정해 보시면 더 정확히 아실수 있을겁니다


저작자 표시 비영리 변경 금지
신고
댓글
  • Favicon of http://basixblog.tistory.com Basix 어...음....
    어렵네요 ㅋ
    2014.07.26 15:56 신고
  • Favicon of http://개발자.개.발 개발자 이미지뷰 파싱을 어떻게 하는지 알려주실 수 있으신가요...........? 2014.07.31 01:28 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 이미지뷰 파싱이요? 구체적으로 어떤 파싱을 말씀하시는건지.. 2014.07.31 08:23 신고
  • Favicon of http://개발자.개.발 개발자 Ftp서버에 image파일 올려놓고
    Java에서 불러와서 Imageview로 설정하는..
    2014.07.31 11:31 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) ftp서버에 있는 파일을 다운로드해서 저장한다음 불러와야 할꺼예요
    다운로드된 파일이 있으면 그파일을 쓰고 아니면 인터넷에서 받아오는거죠
    인터넷에 있는 이미지 받아와서 이미지뷰에 띄우는거 어디서 본적이 있습니다 지금은 밖이라 곤란하고.. 나중에 링크 발견하면 다시 알려드리겠습니다
    2014.07.31 18:48 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) http://blog.naver.com/heutwo/80155003415
    http://blog.naver.com/since201109/150151394348
    http://blog.naver.com/skyloveyjs/220049117885

    위 링크를 참고해 주세요
    첫번째 링크가 가장 쓸모있을거 같습니다
    2014.07.31 21:14 신고
  • Favicon of http://개발자.개.발 개발자 덕분에 해결했습니다~~! 2014.08.01 11:36 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 축하드립니다~~ 2014.08.02 17:36 신고
  • Favicon of http://고.다.텐 고다테노닌 혹시 시간되시면 온라인회원가입..로그인강좌를 써주실 수있으신가요 2014.08.03 19:18 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 온라인 회원가입/로그인에 대해서는 저도 잘 모르겠습니다..
    서버가 있어야 할거 같은대 모르겠내요;
    2014.08.03 20:05 신고
  • 강좌가 정말 상세하고 이해하기 좋게 되있어요.... 제가 일반 책들보면서 공부하면 너무 대충넘어가서 모르겠는부분을 여기오면 나와있네요... 특히 스레드/핸들러랑 프리퍼런스 정말 좋았어요! 영어로 검색해도 저렇게 친절하게 써놔준곳이 없었는데...
    혹시 책추천좀 해주실수있으신가요..ㅠㅠ 이렇게 자세하게 나와있는책들이요..ㅠ
    2015.09.28 11:50 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 음.. 저는 Do it 안드로이드라는 책을 얻어서 몇번 봤었는데요 책의 분량한계상 자세하게 설명되지 못한 부분이 더 많아서 보다가 요즘은 바로바로 인터넷에서 검색해서 찾아봅니다.
    기본적 지식이 없을때는 책이 있는게 확실히 좋지만 일단 기본만 쌓이면 그뒤로는 책을 살펴보질 않네요 ㅋㅋ..
    원리를 알 수 있는 가장 쉬운 방법이 직접 해보는거라 앱 개발 글 쓰기전에 사용할 수 있는 모든 속성을 써보면 확실히 도움이 되더라고요 ㅎㅎ
    2015.10.03 17:48 신고
  • abc 애니메이션 반복할 때 끊기는 느낌이 있어서 어떻게 해야 되나 찾아보다가 여기서 겨우 찾았네요ㅠ(interpolator)

    감사합니다!
    2016.09.27 14:14 신고
  • 슐매 Xml 속에 수치를 정하는데
    이것을 스크립트내에서 바꾸거나 할 수 없을까요??
    2017.04.01 12:54 신고
  • Favicon of http://itmir.tistory.com Mir(whdghks913) 애니메이션을 자바로 구현하는 방법이 있습니다.
    우리가 xml에 정의된 TextView를 java에서 findViewById를 통해서 View로 받아온 뒤, TextView로 바꿔주고 세부 사항을 변경할 수 있는 것처럼
    마찬가지로 xml에 정의된 Animation을 java에서 가져와 값을 변경할 수 있는 방법이 있을 거라고 생각합니다.
    2017.04.02 17:20 신고
  • 효과 글 잘 읽었는데요 애니메이션 효과에서 삼각형에서 사각형으로 서서히 이동하면서 변하는 애니메이션 효과가 있나요? 2017.04.10 07:39 신고
  • 안드로이드입문 대단하셔요, 많은 참고 되었습니다. 2017.04.28 10:07 신고
댓글쓰기 폼