Transitions로 기본적인 Animation 적용하기

Applying Basic Animation with Transitions

Posted on June 12, 2012. Written by Jonathan Beebe

Corona SDK는 Spritesheet API 를 통해 진보된 animation 효과를 제공하고 있습니다.   하지만 그 외에도 display objects에 대해 기본적인 애니메이션 효과를 제공하도록 하는 기능들도 유용하게 사용 하실 수 있습니다. 객체를 계속 회전시킨다던지 투명도를 주었다 뺐다 하던지 한 곳에서 다른 곳으로 이동을 시킨다던가 아니면 위 세가지를 모두 합쳐서 어떤 효과를 낸다던가 하는 일을 코로나의 transition library 를 통해서 구현하실 수 있습니다.

이 글은 주로 이 transition.to()함수에 대해 다룰 겁니다. 코로나의 transition library를 사용할 때 가장 많이 사용해야 할 함수죠. 대략적으로 정리하자면 transition.to() 는 두개의 파라미터를 사용합니다. 애니메이션 효과를 줄 객체와 그리고 회전, 투명도 x,y 값의 combination으로 구성되는 ending property 들의 조합인 table로 구성돼 있습니다. 그리고 이 transition에 걸릴 시간과 옵션으로 이 transition이 끝났을 때 호출될 함수도 넣을 수 있습니다. 이 transition이 시작되면 이 객체의 현재 value들은 여러분이 정해준 값으로 "tweened" 됩니다.

여러분이 코로나를 이용해 게임등의 앱을 개발하면서 충분한 시간을 투자할 수 없는 상황이라면 아마도 이 함수를 사용하실 겁니다. 이 함수는 아주 많이 유용하거든요. 여러분도 아시게 되겠지만 이 함수는 사용하기에 아주 많이 쉽기도 하거든요.

Fading an Object

아주 기초적인것 부터 시작하겠습니다. 우리는 객체를 생성할 거고 이 객체가 점차 투명해져서 사라지도록 만들 겁니다. 여러분들도 이미 아시겠지만 display object의 alpha 프로퍼티가 그 객체의 opacity를 담당하고 있습니다. 그래서 그 프로퍼티를 transition.to() 함수에 pass 해서 1.0에서 0 이 되도록 만들 겁니다. (1.0은 투명도가 전혀 없는 상태고 0은 완전 투명해서 안 보이는 상태입니다.)

아래 예제를 보세요. 우리는 이렇게 객체가 사라지는 시간을 3초로 정할겁니다. (3000 milliseconds)

local obj = display.newImage( "image.png" )

-- center the object
obj.x = display.contentWidth*0.5
obj.y = display.contentHeight*0.5

-- fade object to completely transparent
transition.to( obj, { time=3000, alpha=0 } )

위 코드는 객체를 생성하고 "tweens" 해서 그 alpha 프로퍼티를 1.0에서 0으로 3초동안에 변화 시키도록 하는 겁니다. 아주 간단합니다. 이제 저 객체가 완전히 투명해져서 안 보이게 되면 그 객체를 완전히 remove 해 버리죠. 이 transition이 끝났을 때 실행 될 함수를 call 할 수 있습니다. 그걸 하려면 onComplete 파라미터를 사용하시면 됩니다.

local obj = display.newImage( "image.png" )

-- center the object
obj.x = display.contentWidth*0.5
obj.y = display.contentHeight*0.5

local function removeObject( object )
    object:removeSelf()
    obj = nil   -- nil out original reference (upvalue)
end

-- fade object to completely transparent
transition.to( obj, { time=3000, alpha=0, onComplete=removeObject } )

NOTE: 저 객체의 transition이 첫번째 argument에서 onComplete 리스너 함수까지 어떻게 진행되는지 그리고 구현하는것이 얼마나 쉬운지 보세요. 이것을 활용해서 여러 transition들에 대해 이 한가지의 listener를 만들어서 사용하실 수 있습니다. 또는 저 객체가 out of scope 일 때도 그 리스너를 사용하셔도 됩니다.

Moving Objects

transition.to() 함수의 아주 유용한 부분중의 하나는 한번에 tweening 하는데 한가지만의 프로퍼티만 사용하라는 법이 없다는 겁니다. 우리 첫번째 예제를 조금 바꿔서 그 객체를 좌상단에서 우 하단으로 움직이면서 투명해지도록 해 보죠.

local obj = display.newImage( "image.png" )

-- set starting position (top-left of screen)
obj.x, obj.y = 0, 0

local function removeObject( object )
    object:removeSelf()
    obj = nil   -- nil out original reference (upvalue)
end

-- some variables to be used in the transition
local end_x = display.contentWidth
local end_y = display.contentHeight

-- fade object to completely transparent and move the object as well
transition.to( obj, { time=3000, alpha=0, x=end_x, y=end_y, onComplete=removeObject } )

Easing Library

코로나의 Easing Library 는 transition.to() 함수와 함께 쓰여서 transition 프로퍼티를 통해 transition의 behavior 를 하는데 다루는 데 사용되어 질 수 있습니다. 디폴트로 이 transition 프로퍼티는 easing.linear로 세팅돼 있습니다. 이것은 transition이 처음부터 끝까지 같은 공간에서 꾸준히 tween 되는 상태를 말합니다.

각 transition 프로퍼티 behaves를 설명하는 것은 약간 어렵습니다. 백문이 불여일견이라고 샘플 앱에서 Transition1과 Transition2 예제를 보실것을 권장합니다. 이 샘플은 아래 경로에 있습니다.

• /SampleCode/Graphics/Transition1
• /SampleCode/Graphics/Transition2

이 샘플 예제를 보시고 다른 transition type들을 적용하면서 실행해 보세요. 이렇게 하는게 가장 쉽고 확실하게 배우는 길입니다. 그리고 여러분이 배운 Corona의 transition library에 대한 모든 것을 확실히 다져 주세요.

Canceling Transitions

In the event you need to stop a transition mid-way through, you can do so by using the transition.cancel() function. However, this function requires that you store a reference to an id of the specific transition you need to cancel.

여러분이 transition이 일어나는 중간에 이를 stop 시킬 필요가 있다면 여러분은 그렇게 하실 수 있습니다. transition.cancel() 함수를 사용하시면 됩니다. 이걸 이용하시려면 해당 transition의 id를 사용하셔야 합니다.

그러니까 이 transition을 cancel 하기 이전에 그 transition의 id를 variable에 store 할 필요가 있습니다. 아래 첫번째 예제를 약간 바꾼 샘플이 있습니다. 해당 transition 아이디를 transition_id 라는 변수에 대입을 했습니다.

local obj = display.newImage( "image.png" )

-- center the object
obj.x = display.contentWidth*0.5
obj.y = display.contentHeight*0.5

-- fade object to completely transparent
local transition_id = transition.to( obj, { time=3000, alpha=0 } )

Now, we can cancel the transition at any time by passing that stored id as the first parameter to transition.cancel(). In the following example, we’ll cancel the transition after 1.5 seconds.

local obj = display.newImage( "image.png" )

-- center the object
obj.x = display.contentWidth*0.5
obj.y = display.contentHeight*0.5

-- fade object to completely transparent
local transition_id = transition.to( obj, { time=3000, alpha=0 } )

timer.performWithDelay( 1500, function()
    if transition_id then
        transition.cancel( transition_id )
        transition_id = nil
    end
end, 1 )

위에서도 언급했는데요. 우선 transition을 cancel 하기 이전에 그 transition이 존재해 있어야 합니다. 여러분이 실전에서 코딩을 하실 때는 반드시 해당 transition이 선언돼 있는지 확인하시기 바랍니다.

그리고 여러분이 transition.cancel()을 call 할 때는 그 transition id를 저장하기 위해 사용한 변수를 nil-out 시키시기 바랍니다. 그렇게 하지 않으면 skeleton table이 남겨져 있게 됩니다. (마찬가지로 object:removeSelf() 한 이후에도 반드시 그 변수를 nil-out 시켜 주세요.)

WARNING: Do not remove currently transitioning objects!

만약 현재 tweened 되고 있는 객체가 remove 된다면 여러분의 앱은 crash를 일으킬 겁니다. 이것은 scene change 할 때 종종 일어나는 현상인데요. scene change를 하기 전에 transition.cancel()을 현재 active 상태에 있을 법한 변수에 적용하는 것이 에러가 일어날 가능성을 미리 방지하는 방법일 겁니다. 이 부분은 exitScene 이벤트 리스너에서 수행하는것이 가장 이상적입니다. 좀 더 자세한 사항은 Storyboard Scene Events Explained를 확인하세요.

Corona의 transition library에 대한 좀 더 많은 정보는 Transitions API reference 페이지를 참조하세요. 좀 더 많은 정보들이 있습니다.