Corona SDK中ScrollView滚动的距离来触发元素。

2015-5-27 20:35:22
收藏：0
阅读：74
评论：1

我有一个“逻辑”类型的问题，我正在使用Corona SDK。

我正在使用ScrollView小部件，想知道是否可以创建一个函数或其他东西来设置一个“y”量，当滚动到或超过时触发一个元素（顶部导航栏）淡入或淡出，具体取决于滚动方向。

以我的示例为例：

您拥有您的ScrollView并向下滚动（y）30px。该元素为alpha = 0，开始淡入，当您到达40px时，它为alpha = 1。向上滚动相同但相反，alpha = 1在40px，alpha = 0在30px。

如果可以使元素（顶部导航栏）在从任何方向滚动到设置“y”量时淡入或淡出，而不是一次性全部淡入或淡出，那将很不错。因此，如果您只滚动35px，则元素为alpha = 5。

！[输入图像说明]（https://i.stack.imgur.com/njNH9.png）

点赞
用户752543
用户752543

以下内容来自 Corona SDK 的示例:

local widget = require( "widget" )

-- ScrollView 监听器
local function scrollListener( event )

    local phase = event.phase
    if ( phase == "began" ) then print( "ScrollView 被触摸" )
    elseif ( phase == "moved" ) then print( "ScrollView 被滑动" )
    elseif ( phase == "ended" ) then print( "ScrollView 被释放" )
    end

    -- 如果滚动到了边界...
    if ( event.limitReached ) then
        if ( event.direction == "up" ) then print( "到达顶部边界" )
        elseif ( event.direction == "down" ) then print( "到达底部边界" )
        elseif ( event.direction == "left" ) then print( "到达左侧边界" )
        elseif ( event.direction == "right" ) then print( "到达右侧边界" )
        end
    end

    return true
end

-- 创建 Widget
local scrollView = widget.newScrollView
{
    top = 100,
    left = 10,
    width = 300,
    height = 400,
    scrollWidth = 600,
    scrollHeight = 800,
    listener = scrollListener
}

-- 创建图片并将其插入 ScrollView
local background = display.newRect(160, 240, 320, 480)-- display.newImageRect( "assets/scrollimage.png", 768, 1024 )
background:setFillColor(1, 0, 0)
scrollView:insert( background )

可以看到 ScrollView Widget 有一些达到其边界时的事件。

local widget = require( "widget" )

-- ScrollView 监听器
local function scrollListener( event )
    if event.phase == "moved" then
        local x, y = event.target:getContentPosition()
        if y > 40 then
            print("****")
        end
    end
    return true
end

这是一个简化的示例。这里使用了 :getContentPosition() 方法，它返回 ScrollView 的 x 和 y 位置。

当您向下滚动 ScrollView 时，ScrollView 中的内容会向上移动，y 位置会变为负数。对于下拉刷新，您可能会寻找一个正数，表示 ScrollView 被拉下到其容器顶边缘之下。如果要找到 ScrollView 内容接近容器顶部时的位置，您应该寻找负数。

这里是一个示例，它在 0、-40 和 -80 像素处定义了一些路径点。当到达新的路径点时，它会打印路径点的索引。

local waypoints = {0, -40, -80}
local currentWayPoint = 0

-- ScrollView 监听器
local function scrollListener( event )
   if event.phase == "moved" then
        local x, y = event.target:getContentPosition()
        local newWayPoint = -1
        for i = 1, #waypoints do
            local waypoint = waypoints[i]
            -- print(waypoint, y, i)
            if waypoint > y then
                newWayPoint = i
            end
        end
        if newWayPoint ~= currentWayPoint then
            currentWayPoint = newWayPoint
            print( currentWayPoint )
        end
    end
    return true
end

这里，如果您向下拖动，则终端应该显示 -1，如果您拖动到每个路径点值之前并向上拖动，则应该显示 1、2 和 3，这些路径点之间的间隔为40像素。您可以添加一个 if 语句来检查路径点值是否改变，然后执行某些操作。

2015-03-04 19:10:21

作者:

用户4620842

用户4620842
推荐文章