基于cocos-lua实现的数字滚动效果

基于cocos-lua实现的数字滚动效果

简述： 项目中需要一个抽奖奖池的显示，基于此，设计一个具有图片滚动功能的控件。
效果：

实现思路：
1 创建数字对象（也可以是图片，使用id标记）

--变动数字
local function creat_one_change_num(x)
    local node = XUI.CreateLayout(x, 110, 30, 150)
    local num = XUI.CreateImageView(0, 0, ResPath.GetLuckTurnble("num_0"))
    local temp_num = XUI.CreateImageView(0, -55, ResPath.GetLuckTurnble("num_1"))
    node:addChild(num)
    node:addChild(temp_num)

    node.now_num = 0

    --关闭动画定时器
    node.CloseNumTimer = function ()
        if node.timer_quest then
            GlobalTimerQuest:CancelQuest(node.timer_quest)
            node.timer_quest = nil
        end
    end

    --滚动改变数字
    local change_scorll_num = function (sign_num, is_jump)
        if node.now_num == sign_num then
            node.CloseNumTimer()
            return
        end

        local end_callback = cc.CallFunc:create(function()
            num:loadTexture(ResPath.GetLuckTurnble("num_" .. node.now_num))
            node:setPositionY(110)
        end)

        --刷新数字
        if is_jump then
            node.now_num = sign_num
            temp_num:loadTexture(ResPath.GetLuckTurnble("num_" .. sign_num))
        else
            node.now_num = (node.now_num + 1) % 10
            temp_num:loadTexture(ResPath.GetLuckTurnble("num_" .. node.now_num))
        end

        node:runAction(cc.Sequence:create(cc.MoveTo:create(0.3, cc.p(x, 110 + 55)), end_callback))
    end

    --闪动改变数字
    local change_flash_num = function (sign_num, is_jump)
        print("cd------------>you should write one function")  
    end

    --设置数字 param: 1目标数字 2是否跳过中间数字 3变化方式(1 滚动 2闪动)
    node.SetNum = function (sign_num, is_jump, change_type)
        node.CloseNumTimer()
        local change_num_fun = change_type == 1 and change_scorll_num or change_flash_num 
        if not is_jump then
            node.timer_quest = GlobalTimerQuest:AddRunQuest(function() change_num_fun(sign_num, is_jump) end, 0.3)
        else
            change_num_fun(sign_num, is_jump)
        end
    end

    return node
end

2 创建遮挡层，加入数字

function LuckTurnbleView:CreateNumLayout()
    self.clip_layout = XUI.CreateLayout(310, 350, 400, 60)
    self.clip_layout:setClippingEnabled(true)

    --创建滚动数字
    local num_list = {}
    for i = 1, 7 do
        local num_obj = creat_one_change_num(45 + (7 - i) * 52)
        num_list[i] = num_obj
        self.clip_layout:addChild(num_obj)
    end

    --设置数字
    self.clip_layout.setGoldNum = function (gold_num, is_jump, change_type)
        is_jump = is_jump or false
        change_type = change_type or 1
        for i = 1, 7 do
            local sign_num = get_one_bit_num(gold_num, i)
            num_list[i].SetNum(sign_num, is_jump, change_type)
        end
    end

    --关闭数字动画定时器
    self.clip_layout.CloseNumTimer = function ()
        for i = 1, 7 do
            num_list[i].CloseNumTimer()
        end
    end
    return self.clip_layout
end

3 相关函数

--整数中获取某一位数字
local function get_one_bit_num(num, unit)
    if unit == 1 then
        return num % 10
    end
    local last_residue_num = num % math.pow(10, unit - 1)
    local now_residue_num = num % math.pow(10, unit)
    return (now_residue_num - last_residue_num) / math.pow(10, unit - 1)
end