오늘은 버튼을 누르면 다음 화면이 나오는 기능을 알아보겠습니다.
기본적으로 이 기능은 API 내에 있는 Animation - transitions 를 사용합니다.
(저는 실제 앱 개발에서는 director.lua 클래스를 사용하고 있지만 이 클래스도 기본적으로 transitions 기능으로 구성 돼 있습니다. director.lua 클래스 사용법도 조만간 정리할 예정입니다.)
transitions에는 아래와 같은 네가지 메소드가 있습니다.
transition.to() : handle = transition.to( target, params )
예) transition.to( square, { time=1500, alpha=0, x=(w-50), y=(h-50), onComplete=listener1 } )
transition.from() : handle = transition.from( target, params )
예) transition.from( square, { time=1500, x=(w-50), y=(h-50), onComplete=listener } )
transition.dissolve() : transition.dissolve( src, dst, duration, delayDuration )
transition.cancel() : transition.cancel(tween)
예) local trans1 = transition.to(currentTarget, { time=400, y=upperLimit, transition=easing.outQuad})
transition.cancel(trans1)
위 그림은 화면을 클릭하면 다음 화면으로 바뀌는 앱입니다.
압축파일은 아래에 있습니다.
소스코드를 분석해 보겠습니다.
-- Views Handler App
-- Developed by Carlos Yanez
-- Hide Status Bar
display.setStatusBar(display.HiddenStatusBar)
-- Add Default View
defaultView = display.newImage('defaultView.png')
-- Swap View Function
lastView = {}
local function swapViews(current, new, from)
lastView = current
if(from == 'down') then
transition.from(new, {y = new.height * 2, onComplete = removeLastView})
elseif(from == 'up') then
transition.from(new, {y = -new.height, onComplete = removeLastView})
elseif(from == 'left') then
transition.from(new, {x = -new.width * 2, onComplete = removeLastView})
elseif(from == 'right') then
transition.from(new, {x = new.width * 2, onComplete = removeLastView})
end
end
-- Remove Last View
removeLastView = {}
function removeLastView()
lastView:removeSelf()
end
-- Change View Event Function
local modes = {'up', 'down', 'left', 'right'}
local changeView = {}
local changed = false
function changeView:tap(e)
if(changed == false) then
secondView = display.newGroup()
bg = display.newImage('secondViewBg.png')
button = display.newImage('button.png', 40, 223)
secondView.insert(secondView, bg)
secondView.insert(secondView, button)
secondView:addEventListener('tap', changeView)
swapViews(defaultView, secondView, modes[math.random(1, 4)])
changed = true
else
defaultView = display.newImage('defaultView.png')
defaultView:addEventListener('tap', changeView)
swapViews(secondView, defaultView, modes[math.random(1, 4)])
changed = false
end
end
-- Listener
defaultView:addEventListener('tap', changeView)
처음에 statusBar 없애고 defaultView.png를 display합니다.
그리고 lastView 테이블을 선언합니다.
다음엔 swapViews함수가 있습니다. 이 함수는 current,new,from 이렇게 세 인자값을 받습니다.
함수 안에서 하는 일은 아래와 같습니다.
1. 아까 선언했던 lastView 테이블에 current를 넣습니다.
2. from이 down,up,left,right인지 체크가호 그에 따라 new의 좌표를 바꿔줍니다.
transition이 끝나면 removeLastView 함수를 실행합니다.
다음은 removeLastView 테이블을 선언합니다.
removeLastView함수가 있고 이 함수는 lastView:removeSelf() 를 수행합니다.
다음 단계를 보면요
modes 테이블에 up,down,left,right를 넣습니다.
changeView 테이블을 선언하고 changed를 false로 선언합니다.
다음엔 changeView함수가 있습니다. tap 이벤트 리스너에서 호출될 함수입니다.
이 함수에서 하는 일은 다음과 같습니다.
1. changed가 false이면 secondView 라는 새 그룹을 만들고 secondViewBG.png를 display합니다.
2. button.png를 적당한 위치에 display합니다.
3. secondView그룹에 bg와 button을 insert합니다.
4. secondView그룹에 tab이벤트 리스너를 달고 탭이 이뤄지면 changeView를 호출합니다.
5. swapViews를 호출합니다. 인자로는 defaultView,secondView,modes 중 랜덤하게 선택된 값을 넘겨 줍니다.
6. changed=true로 바꿉니다.
7. changed가 false가 아니면 defaultView에 defaultView.png를 넣습니다.
8. tap 이벤트 리스너를 달고 탭이 일어나면 changeView를 호출합니다.
9. swapViews 함수를 호출하고 4개 인자를 전달합니다.
10. changed를 false로 선언합니다.
그리고 맨 마지막 줄엔 defaultView에 탭 이벤트 리스너를 달고 탭 이벤트가 일어나면 changeView 함수를 호출합니다.
이렇게 하면 버튼을 누를 때마다 화면이 전환되는 효과를 줄 수 있습니다.
화면전환도 위,아래,좌,우 측으로 화면이 이동하면서 바뀝니다.
보시면 아시겠지만 실제로는 다른 화면이 두개 있는 것이 아니라 객체들의 위치를 바꾸면서 화면 전환 효과를 주는 겁니다.
안드로이드의 Activity개념과는 다릅니다.
이 transition기능을 이용해서 다양한 화면 이동 효과를 내 보세요.
'Corona SDK > Corona SDK TIPs' 카테고리의 다른 글
드래그 하기 기초 (0) | 2011.11.25 |
---|---|
화면 전환 클래스(director.lua) 사용하기 와 랜덤 화면 전환 (2) | 2011.11.24 |
Sprite sheet로 애니메이션 표현하기 (주사위 놀이) (2) | 2011.11.23 |
ui 버튼이용 하기 ui.newButton (0) | 2011.11.18 |
화면에 시간 표시하기 (스탑와치) (0) | 2011.11.17 |
앱 항상 켜 있게 하기 (system.setIdleTimer( enabled )) (0) | 2011.11.15 |
Animation Speed Control 은 movieClip보다 Sprites로 (0) | 2011.11.14 |
특정 영역에 들어가면 객체의 색 바꾸기 (Sensor) (0) | 2011.11.12 |
SlideView 구현하기 (5) | 2011.11.04 |
Sprite Sheets 이용해서 애니메이션 구현하기 (0) | 2011.10.28 |
We desperately need a speed control as the animation just play crazy
앱을 쌈박하게 만들기 위해서는 애니메이션 스피드 조절 기능이 완전 필요합니다.
What is the best way to control the speed of the animation?
Would it be a case of using a timer and calling something like
myAnim:nextFrame()
애니메이션의 스피드 조절하는 가장 좋은 방법이 뭐지요?
myAnim:nextFrame() 함수를 타이머를 이용해서 부르는 것이 방법이 될까요?
@Paul – your suggestion would probably work well in some cases, although if you had more than a few clips onscreen, you’d want to test it on target devices to see the performance. I don’t think timers are necessarily that expensive, but they might add up if you had a lot of functions constantly polling the system time.
The movieclip library is primarily designed for a Flash-like model, in which there’s a global framerate for everything. For greater timing control, or for complex animation cases, we’d recommend using Game Edition and the sprite-sheet feature.
In addition to using texture memory much more efficiently (one big image rather than lots of little ones), that feature includes an animated-sprite API that lets you set different animation speeds for different sprites, or even for different sequences within the same sprite. Also, it’s a time-based API rather than frame-based, so the total animation time will remain the same even on slower devices that need to drop frames — the engine automatically handles all this under the hood.
@Paul - 당신의 방법이 잘 적용되는 케이스도 있을 거예요. 아마 무비크립이 적거나 특정한 디바이스에서만 테스트를 원한다면 더 그럴거예요. 하지만 내 생각엔 타이머는 앱을 좀 헤비하게 만들것 같네요.
무비클립은 플래쉬를 모델로 디자인 된 겁니다. 기본적으로 전체 frame rate가 있고 이것이 모든 무비클립에 동일하게 적용됩니다. 좀 더 타이밍 콘트롤을 하고 싶거나 복잡한 애니메이션을 원한다면 Game Edition과 Sprite sheet를 사용하기를 권장합니다.
더군다나 sprite API는 메모리도 효율적으로 운용할 수 있어요. 그리고 각 애니메이션 마다 다른 스피드를 줄 수도 있구요. 스프라이트 애니메이션은 time base 입니다. movieclip은 프레임 베이스이구요. 그래서 사양이 낮은 기계에서도 각 애니메이션별 스피드 차이는 동일하게 나타날 겁니다.
@Chan, You should use the Sprite library instead of the Movieclip library because it gives you better control over the animations. You do have a onComplete listener with Sprites.
@Chan, 무비클립 라이브러리 보다는 스프라이트 라이브러리를 이용해야 애니메이션의 속도 컨트롤이 더 수월합니다. 그리고 스프라이트에는 onComplete리스너도 있습니다.