.
大家好你们好,
这不是一个问题,只是在有人对此感兴趣时显示代码。
我使用了 Corona Share Your Code 站点中介绍的 FLIPBOOK 项目,并对其进行了一些更改。(http://developer.coronalabs.com/code/flipbook-module-realistic-page-curling-effect)。
main.lua 文件:
-----------------------------------------------------------------------------------------
--
-- main.lua
--
-----------------------------------------------------------------------------------------
local Flipbook = require 'flipbook'
local nrPages = 6
local myFirstFlipbook = Flipbook:newFlipbook(nrPages, "mainshadow2.png" )
for x=1,nrPages do
local grp1 = display.newGroup()
--grp1:setReferencePoint( display.TopLeftReferencePoint )
local rct1 = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
--grp1.isVisible = false
local txt1 = display.newText("Meu texto "..x.." ...", 2, display.contentHeight - 20, native.systemFont, 16)
txt1:setTextColor(0, 0, 0)
local img1 = display.newImageRect( "background"..x..".png",display.contentWidth/5*4,display.contentHeight/5*4 )
img1.x = display.contentWidth/2
img1.y = display.contentHeight/2
grp1:insert(rct1)
grp1:insert(img1)
grp1:insert(txt1)
local grp2 = display.newGroup()
--grp4:setReferencePoint( display.TopLeftReferencePoint )
local rct2 = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
--grp1.isVisible = false
local txt2 = display.newText("Meu texto "..x.." ...", 2, display.contentHeight - 20, native.systemFont, 16)
txt2:setTextColor(0, 0, 0)
local img2 = display.newImageRect( "background"..x..".png",display.contentWidth/5*4,display.contentHeight/5*4 )
img2.x = display.contentWidth/2
img2.y = display.contentHeight/2
grp2:insert(rct2)
grp2:insert(img2)
grp2:insert(txt2)
myFirstFlipbook:addPage( grp1 )
myFirstFlipbook:addMirror( nrPages, grp2 )
end
和flipbook.lua 文件:
-----------------------------------------------------------------------------------------
--
-- flipbook.lua
--
-----------------------------------------------------------------------------------------
local Flipbook = {
mask = graphics.newMask( "mask1.png" ),
mask2 = graphics.newMask( "mask2.png" ),
currentPage = 1,
pages = {},
backPages = {},
displayGroup = display.newGroup(),
control = 2
}
Flipbook.__index = Flipbook
function Flipbook:newFlipbook(nrPages, newBackShadow, newBasicShadow, newCurlShadow) --Create a new flipbook
local tempFlipbook = setmetatable({},self)
-- Adds a shadow for where the curled page overlaps itself
tempFlipbook.backShadow = display.newImage( newBackShadow )
tempFlipbook.backShadow.isHitTestMasked = false
tempFlipbook.backShadow.y = display.contentHeight / 2
tempFlipbook.backShadow.isVisible = false
tempFlipbook.displayGroup:insert( nrPages + 1, tempFlipbook.backShadow )
-- Adds event listener
tempFlipbook.displayGroup:addEventListener( "touch", tempFlipbook )
----
return tempFlipbook
end
function Flipbook:addPage( newPageGroup ) -- Add a new page to your flipbook
local tempPageImage = newPageGroup
tempPageImage:setMask( self.mask )
tempPageImage.maskX = display.contentWidth
tempPageImage.isHitTestMasked = false
tempPageImage:setReferencePoint( display.CenterReferencePoint )
table.insert( self.pages, tempPageImage ) -- Adds new page to pages index
self.displayGroup:insert( 1, tempPageImage ) -- Adds new page to display group
end
function Flipbook:addMirror( nrPages, newPageGroup )
local tempPageImageMirror = newPageGroup
tempPageImageMirror.isVisible = false
tempPageImageMirror:setMask( self.mask2 )
tempPageImageMirror:setReferencePoint( display.CenterReferencePoint )
table.insert( self.backPages, tempPageImageMirror ) -- Adds new page to pages index
self.displayGroup:insert( nrPages + 1, tempPageImageMirror )
end
function Flipbook:updateCurlEffect( handleX, handleY, originY ) -- Updates the curl effect assets
local hX = 0
if (handleX > display.contentWidth) then
hX = display.contentWidth
elseif (handleX < 0) then
hX = 0
else
hX = handleX
end
local controlX = 0
if (hX > display.contentWidth / 2) then
controlX = (( hX - display.contentWidth / 2) / (display.contentWidth / 2))
else
controlX = (( display.contentWidth / 2 - hX ) / (display.contentWidth / 2))
end
if controlX < 0.0001 then
controlX = 0.0001
end
if controlX > 0.9999 then
controlX = 0.9999
end
--print(alphaX)
self.pages[self.currentPage].maskX = hX
if (hX > display.contentWidth / 2) then
self.backPages[self.currentPage+1].isVisible = false
self.backPages[self.currentPage]:setMask(self.mask2)
self.backPages[self.currentPage].isVisible = true
self.backPages[self.currentPage].xReference = 0
self.backPages[self.currentPage].x = (display.contentWidth - hX)
self.backPages[self.currentPage].maskX = display.contentWidth / 2
self.backPages[self.currentPage].xScale = controlX
if (self.control > 1) then
self.backShadow:scale(-1,1)
self.control = 1
--self.backShadow.xReference = display.contentWidth / 2
self.backShadow.x = display.contentWidth + 21
self.backShadow.maskX = 0
end
else
self.backPages[self.currentPage].isVisible = false
self.backPages[self.currentPage+1].isVisible = true
self.backPages[self.currentPage+1]:setMask(self.mask)
self.backPages[self.currentPage+1]:toFront()
self.backPages[self.currentPage+1].xReference = 0
self.backPages[self.currentPage+1].x = hX
self.backPages[self.currentPage+1].maskX = display.contentWidth / 2
self.backPages[self.currentPage+1].xScale = controlX
if (self.control < 2) then
self.backShadow:scale(-1,1)
self.control = 2
--self.backShadow.xReference = display.contentWidth / 2
self.backShadow.x = -21
self.backShadow.maskX = 0
end
end
self.backShadow.alpha = controlX
--self.backShadow.sizeX = display.contentWidth
end
function Flipbook:setAssetsVisible( isVisibleBoolean ) -- Curl effect assets visibility switch box
if isVisibleBoolean then
self.backPages[self.currentPage].isVisible = isVisibleBoolean
self.backShadow.isVisible = isVisibleBoolean
self.backShadow:toFront()
self.backPages[self.currentPage]:toFront()
else
--for k,v in pairs(self.backPages) do
for k=1, #self.backPages do
self.backPages[k].isVisible = isVisibleBoolean
end
self.backShadow.isVisible = isVisibleBoolean
end
end
function Flipbook:touch( event )
if event.phase == "began" then
if event.xStart > 5 * display.contentWidth / 6 and self.currentPage < # self.pages
or event.xStart < display.contentWidth / 6 and self.currentPage > 1 then
if event.xStart < display.contentWidth / 6 then
self.currentPage = self.currentPage - 1
self.pages[self.currentPage].isVisible = true
end
display.getCurrentStage():setFocus( self.displayGroup )
self.isFocus = true
self:setAssetsVisible( true )
else
return false
end
end
if self.isFocus then
self:updateCurlEffect( event.x, event.y, event.yStart )
if event.phase == "ended" or event.phase == "cancelled" then
self:updateCurlEffect( display.contentWidth, 0, 0 )
if math.abs(event.x - event.xStart) > display.contentWidth / 6 then
if event.xStart > 5 * display.contentWidth / 6 and self.currentPage < # self.pages then
self.pages[self.currentPage].isVisible = false
self.currentPage = self.currentPage + 1
end
self:setAssetsVisible( false )
display.getCurrentStage():setFocus( nil )
self.isFocus = nil
else
if event.xStart < display.contentWidth / 6 and self.currentPage > 1 then
self.pages[self.currentPage].isVisible = false
self.currentPage = self.currentPage + 1
end
self:setAssetsVisible( false )
display.getCurrentStage():setFocus( nil )
self.isFocus = nil
end
end
return true
end
end
return Flipbook
对于文件 backgroundX.png,我使用了 FLIPBOOK 项目中的文件。
对于 mainshadow2.jpg,我使用了一个 75% alpha 的黑色孔图像,基于 FLIPBOOK 项目的 mainshadow.jpg 大小。
希望能帮助到你。
此致。
亚历山大·弗洛雷斯·德·阿尔梅达