안드로이드 앱에서 상황에 따라서는 일반 이미지보다 움직이는 이미지 즉, 애니메이션을 사용해야 좀 더 효과적인 경우가 종종 있는데... 바로 앞글에서 녹음기 어플을 만들면서 녹음을 할 때 구형 테이프가 돌아가면서 녹음이 되는 듯한 느낌을 주면 좋을 거 같다고 생각을 했었고 그 효과를 한 번 만들어볼 생각이다.
윗 글을 참고해보면 녹음 버튼을 클릭했을 때 실제로는 녹음은 되고 있지만 화면에 아무런 변화가 없기 때문에 제대로 작동을 하고 있는지 눈으로 확인할 수 없는 아쉬움이 있었다. 그래서 버튼을 누르면 아래 영상처럼 테이프의 바퀴가 돌아가도록 애니메이션 효과를 만들어보고자 한다.
▲ 이런 효과를 만들기 위해서는 서로 다른 사진 두 장이 있어야 하고 그 둘을 계속 바꿔주면 마치 움직이는 듯한 효과를 낼 수 있는 것이다.
나는 저 톱니바퀴의 위치만 다르게 해서 두 장의 사진을 준비했다.
▲ 위 두 장의 사진을 보면 톱니바퀴의 위치가 살짝 다르다는 걸 알 수 있다. 그리고 이 둘을 반복해서 보이도록 하면 앞 영상에서 확인했던 결과를 만들어 낼 수 있는데 일단 앱 인벤터에 업로드하자.
▲ 애니메이션 효과를 만들기 위해서 Image 컴포넌트를 추가했으며 Source에 tape.png와 tape2.png라는 이미지들을 업로드 한 상태이다. 그리고 이 이미지의 교체 타임을 설정하기 위해서 Clock 컴포넌트도 추가를 해야 하는데...
▲ clock 컴포넌트는 Sensors 목록에 포함되어 있다.
▲ 그리고 TimerEnabled는 해제를 했는데 이 옵션을 설정해놓으면 앱이 실행됨과 동시에 계속해서 애니메이션이 돌기 때문에 상황에 따라서 실행 여부를 결정하기 위해서 일단은 해제를 했다. 또 이미지가 바뀌는 시간인 TimerInterval은 500으로 해서 0.5초마다 바뀌도록 했다. 이제 [녹음 시작] 버튼을 클릭하면 애니메이션이 실행되고 [녹음 정지] 버튼을 누르면 멈추도록 코딩을 할 차례이다.
▲ 먼저 두 장의 사진에 index를 주기 위한 변수를 0으로 초기화했으며 images라는 변수에는 두 개의 그림을 리스트로 만들어서 넣었다.
▲ 그리고 Clock 컴포넌트를 선택해서 When Clock.Timer가 실행될 때 즉 Enabled 상태가 됐을 때 각각의 사진의 번호에 해당하는 index 값을 무조건 1 또는 2가 나오도록 세팅을 했으며 그 값에 따라서 이미지를 바꾸도록 하고 있다. 여기서 사용된 함수 [modulo of]는 어던 값을 나누고 나서 나머지 값을 의미한다. 시간이 흐를수록 0.5초 단위로 index의 숫자는 높아지는데 아무리 높아져도 예제에서는 2로 나누도록 했으므로 그 값 즉, 나머지는 무조건 0 아니면 1이 될 것이다. 그리고 그 값에 1을 더하도록 했으므로 결과값은 이미지의 번호에 해당하는 1 또는 2가 된다.
이제 녹음 버튼을 누르면 Clock.Timer가 Enabled가 되도록 코딩을 할 차례이다.
▲ 이 예제는 지난번 녹음기 어플 소스 코드에 추가를 하는 것이기 때문에 혹시 이 글을 보고 있는 분들이 있다면 앞에서 연결한 앞글 참고해야 이해가 될 것이고 녹음 시작 버튼인 Button4가 클릭됐을 때는 set Colock1. TimerEnabled to true. 상태로 블록을 넣어서 애니메이션이 실행하도록 했으며 녹음 정지 버튼인 Button5를 눌렀을 때는 그 값을 false로 만들어서 정지하도록 하고 있다. 이제 만들어진 앱을 안드로이드에서 실행하면 맨 앞에서 봤던 동영상과 같은 결과를 얻게 된다.
이렇게 해서 앱 인벤터로 간단한 애니메이션 효과를 만들어보는 과정을 정리했는데 사용할 부분이 많을 거 같으지 잘 정리해놨다가 응용해보도록 하자.