반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리


반응형
모바일 애플리케이션으로 E-Book을 구현하거나 하다 보면 책장 넘기는 효과를 주면 훨씬 더 실감나는 E-Book 앱을 만들 수 있습니다.

오늘은 이 책장 넘기는 효과 주는 방법에 대해 공부하겠습니다.
오늘 소개하는 코드는 아주 기본적인 기능만 있습니다.

이 코드에다 여러분이 여러 효과를 주시면 더욱 더 그럴싸한 e-Book을 만들 수 있을 겁니다.

페이지 넘김 효과를 주기 위해서는 두가지 방법으로 이 효과를 구현할 수 있습니다.
첫번째는 frame-based animation을 구현하는 겁니다.. 그러기 위해서 스크린 만한 이미지들이 필요합니다.  즉 아이폰, 아이패드에 맞는 이미지들이 따로따로 있어야 합니다. 그것도 폰을 세웠을 때와 눕혔을 때 모두 다 따로따로 있어야 합니다.

두번째는 optical illusion을 통해 하나의 이미지, bitmap mask 그리고 transitions를 통해 구현하는 방법입니다.

두번째 방법이 훨씬 좋겠죠? 오늘 제공될 소스코드에는 이 두번째 방법을 소개해 드릴겁니다.



Step 1. Preliminary Work

페이지 넘김 효과를 사용하기 위해서는 몇개의 이미지들이 필요합니다.

이 두 이미지는 각각 page1.jpg,page2.jpa입니다.
이것 말고 책장 넘기는 효과를 줄 이미지들도 필요합니다.


이제 이미지가 마련 됐으면 코딩을 해 보겠습니다.

-- hide the status bar
display.setStatusBar( display.HiddenStatusBar )

local page1 = display.newImageRect( "page1.jpg", display.contentWidth, display.contentHeight )
page1:setReferencePoint( display.TopleftReferencePoint )
page1.x, page1.y = display.contentWidth*0.5, display.contentHeight*0.5

local page2 = display.newImageRect( "page2.jpg", display.contentWidth, display.contentHeight )
page2.x, page2.y = display.contentWidth*0.5, display.contentHeight*0.5
page2:toBack() -- make sure 2nd page is underneath the first one

local curlPage = display.newImageRect( "curlPage.png", display.contentWidth, display.contentHeight )
curlPage.x, curlPage.y = display.contentWidth*0.5, display.contentHeight*0.5
curlPage.isVisible = false

-- group to hold the page that will be turned (as well as the "curl" page)
local turnGroup = display.newGroup()

이 4개의 이미지를 불러오는 코드 입니다.
두번째 페이지는 첫번째 페이지 밑으로 가게 했습니다. 그리고 curlPage는 inVisible을 false로 했구요.
이 코드만 실행하면 책 겉장만 보일겁니다.

Step 2. Page Curl Functions

다음은 페이지 넘김 효과를 줄 함수들입니다.

-- The following function will turn the page "back"
local function gotoPrevious( curlPage, time )
local time = time or 500

curlPage.isVisible = true
local hideCurl = function()
curlPage.isVisible = false
turnGroup:setMask( nil )
end
transition.to( turnGroup, {maskX=display.contentWidth*0.5+100, time=time } )
transition.to( curlPage, { rotation=45, x=display.contentWidth+(display.contentWidth*0.10), y=display.contentHeight + (display.contentHeight*0.25), time=time, onComplete=hideCurl })
end

-- The following function will turn the page "forward"
local function gotoNext( currentPage, curlPage, time )
-- add "pages" to page turning group
turnGroup:insert( currentPage )
turnGroup:insert( curlPage )

-- mask should match dimensions of content (e.g. content width/height)
local curlMask = graphics.newMask( "mask_320x480.png" )
turnGroup:setMask( curlMask )

-- set initial mask position
turnGroup.maskX = display.contentWidth * 0.5+100
turnGroup.maskY = display.contentHeight * 0.5

-- prepare the page-to-be-turned and the curl image
currentPage:setReferencePoint( display.BottomLeftReferencePoint )
curlPage:setReferencePoint( display.BottomRightReferencePoint )
curlPage.rotation = 45
curlPage.x = display.contentWidth+(display.contentWidth*0.10)
curlPage.y = display.contentHeight + (display.contentHeight*0.25)
curlPage.isVisible = true

-- show pagecurl animation and transition away (next page should already be in position)
local time = time or 500
transition.to( turnGroup, { maskX=-display.contentWidth*0.75, time=time } )
transition.to( curlPage, { rotation=0, x=0, y=display.contentHeight+20, time=time} )
curlPage.yScale = curlPage.y * 0.2
end

소스코드를 좀 살펴 볼까요?

처음에 나오는 함수는 gotoPrevious 함수 입니다.
인수로 curlPage와 time을 받습니다.
그리고 로컬 변수 time에 값을 넣고 curlPage를 보이도록 바꿉니다.
이 함수의 로컬 함수 hideCurl에서 curlPage를 안 보이도록 하고 setMask를 해제하는 로직을 넣어 둡니다.
transition.to로 turnGroup에 움직이는 효과를 주고 또 curlPage도 움직이는 효과를 주고 이 효과가 끝나면 로컬 함수인 hideCurl을 불러와 curlPage를 안 보이도록 하고 setMask를 해제 하도록 합니다.

그 다음은 gotoNext 함수인데요 currentPage,curlPage,time을 인수로 받습니다.
이 함수 내용은 좀 기네요.
turnGroup에 인수로 받은 currentPage와 curlPage를 insert 합니다.

그리고 curlMask 로컬 변수에 graphcs.newMask로 mask_320X480.png를 세팅해 넣습니다.
graphics.newMask 는 http://developer.anscamobile.com/node/5248 API를 참조하세요.
그리고 이 curlMask를 turnGrooup에 insert 합니다.
maskX와 maskY 값을 할당해 주고요 이미지들의 레퍼런스 포인트를 bottomLeft BottomRight 로 주고 curlPage를 45도 회전시키고 이 curlPage의 위치를 설정해 줍니다.
그리고 이 curlPage.isVisible을 true로 세팅해 줍니다.
그 다음 time값을 세팅하고 transition.to로 움직임 효과들을 줍니다.

이렇게 하면 앞장으로 넘기고 뒷장으로 넘기는 효과를 주는 함수까지 완료 했습니다.

다시 간단히 정리하자면요.
gotoNext()
1. page-to-turn으로 insert하고 curl 이미지를 turnGroup에 넣는다.
2. 비트맵 마스크를 turnGroup에 적용한다.
3. 페이지와 curl  이미지의 레퍼런스 포인트를 bottom right으로 한다.
4. curl 이미지를 회전시키고 시작 위치를 잡아준다.
5. transition을 시작한다.

gotoPrevious()
1. curl 이미지를 visible하게 한다.
2. onComplete 리스너를 달아서 transotion이 끝나면 hiding 페이지를 하도록 하고 turnGroup에서 비트맵 마스크를 없앤다.
3. transition 애니메이션을 시작한다.

Step3. Initiate the Page Curl

timer.performWithDelay( 2000, function() gotoNext( page1, curlPage, 500 ); end )
timer.performWithDelay( 5000, function() gotoPrevious( curlPage, 500 ); end )

이 함수들을 실행하기 위해 2초후에 gotoNext함수를 부르고 5초후에 gotoPrevious 함수를 부릅니다.

그러니까 이 소스코드로는 손가락으로 책장을 넘기는 효과가 아니라 2초후에 책장이 넘어가고 5초후에 책장이 다시 넘어오게 될 겁니다.

제대로 구현하려면 여러분들이 touch나 tap 리스너를 달아서 이 책장 넘김 효과를 컨트롤 하셔야 합니다.

이 소스코드에 대한 원문 강좌는 아래 페이지에 있습니다.
http://blog.anscamobile.com/2011/12/how-to-create-a-page-curl-in-corona/

그리고 소스파일은 아래에 있습니다.

그럼 오늘도 즐코딩.....


반응형