cocos2dx 实现华丽丽的滚动层.

前言

好久没写博客了.

前几周策划要求实现一个比较多功能的滚动层控件.

这个艰巨的任务就这样自然而然的落在了我这小身板上.

当然了, 只要我出手, 难度再高的需求也变得不堪一击.

哈哈哈哈

示例图

该控件功能在原生ScrollView上扩充了一下几点:

• 在指定的范围进行节点放大, 位置偏移.
• 点击节点可快速激活.
• 省略 999999 个功能.

源码

 Control.ScrollView = Control.ScrollView or class("Control.ScrollView", function()
         return cc.Node:create();
     end );

 --[[
 params = {
     ["cellWidth"]         = 0,
     ["cellHeight"]         = 0,
     ["triggerLen"]        = 0,
     ["scaleXY"]         = 0,
     ["maxOffsetY"]         = 0,
     ["selCallFunc"]     = nil,    =>    selCallFunc(cell)
     ["enterCallFunc"]     = nil,    =>    enterCallFunc(cell)
     ["leaveCallFunc"]     = nil,    =>     leaveCallFunc(cell)
 }
 ]]
 function Control.ScrollView:init(params)
     self.cellWidth = params.cellWidth;
     self.cellHeight = params.cellHeight;
     self.triggerLen = params.triggerLen;
     self.scaleXY = params.scaleXY;
     self.maxOffsetY = params.maxOffsetY ;
     self.selCallFunc = params.selCallFunc or function(cell) cclog("sel cell: %s", cell); end;
     self.enterCallFunc = params.enterCallFunc or function(cell) cclog("enter cell: %s", cell); end;
     self.leaveCallFunc = params.leaveCallFunc or function(cell) cclog("leave cell: %s", cell); end;
     self.selCell = nil;
     self.curCell = nil;
     self.isTouch = false;
     self.triggerScale = self.triggerLen / self.cellWidth;
     self.cellScale = ;
     self.nodePosX = self.triggerLen * 0.5 + self.cellWidth * 0.5;
     self.elements = {};
     self.isDrag = true;

     (function()
         --    touch event 闭包.
         local downPosX;
         local downPosY;

         local function in2Value(value, minValue, maxValue)
             return value >= minValue and value <= maxValue;
         end

         local function isTouchRect(touchPoint)
             , ));
             return in2Value(touchPoint.y, worldPoint.y, worldPoint.y + self.cellHeight);
         end

         local function onTouchUp(touch)
             local touchPoint = touch:getLocation();
             self.slide:run(
                 touchPoint.x, touchPoint.y,
                 function(stepX, stepY) self:moveCells(stepX); end,
                 function() self:adjustCell(); end);
         end

         local function onTouchBegan(touch, event)
             if not self:isDragEnabeled() then
                 return ;
             end

             local touchPoint = touch:getLocation();
             local result = isTouchRect(touchPoint);
             self.curCell = nil;
             downPosX = touchPoint.x;
             downPosY = touchPoint.y;
             if result then
                 self.slide:setMark(downPosX, downPosY);
                 self.bound:stop();
             end
             return self:isVisible() and result;
         end

         local function onTouchMoved(touch, event)
             local touchPoint = touch:getLocation();

             --    调整拖动灵敏度.
              then
                 self.isTouch = false;
             end

             self.slide:setMark(downPosX, downPosY);
             self:moveCells(touchPoint.x - downPosX);
             downPosX = touchPoint.x;
             downPosY = touchPoint.y;
         end
         --    touch 响应层.
         local touchLayer = cc.Layer:create();
         local listener = cc.EventListenerTouchOneByOne:create();
         listener:registerScriptHandler( onTouchBegan, cc.Handler.EVENT_TOUCH_BEGAN );
         listener:registerScriptHandler( onTouchMoved, cc.Handler.EVENT_TOUCH_MOVED );
         listener:registerScriptHandler( onTouchUp, cc.Handler.EVENT_TOUCH_ENDED );
         listener:registerScriptHandler( onTouchUp, cc.Handler.EVENT_TOUCH_CANCELLED );
         touchLayer:getEventDispatcher():addEventListenerWithSceneGraphPriority(listener, touchLayer);
         self:addChild(touchLayer, );

         --    touch吞噬层.
         local listener = cc.EventListenerTouchOneByOne:create();
         listener:registerScriptHandler(
             function(touch, event)
                 return self:isVisible() and isTouchRect(touch:getLocation());
             end, cc.Handler.EVENT_TOUCH_BEGAN );
         listener:setSwallowTouches(true);
         self:getEventDispatcher():addEventListenerWithSceneGraphPriority(listener, self);
     end)();

     --    回弹.
     self.bound = Utils:createCocos2dObject(Control.ScheduleObject);
     self:addChild(self.bound);
     --    惯性.
     self.slide = Utils:createCocos2dObject(Control.SlideInertia);
     self:addChild(self.slide);

     self:setAnchorPoint(cc.p(0.5, 0.0));
 end

 function Control.ScrollView:destroy()

 end

 function Control.ScrollView:moveCells(offsetX)
     self.nodePosX = self.nodePosX + offsetX;
     , self:getCellCount() do
         local cell = self:getCellByIndex(i);

         cell:setVisible(false);

          then
             --    移动.
             ) * self.cellWidth;
             local movetoX = curPosX;
             ;
             ;
             local minX = maxX - self.cellWidth;
             if curPosX <= maxX and curPosX >= minX then
                 if not cell.isEnter then
                     self.leaveCallFunc(self.selCell);
                     self.selCell.isEnter = false;
                     self.selCell = cell;
                     self.selCell.isEnter = true;
                     self.enterCallFunc(self.selCell);
                 end
                 movetoX = curPosX + (curPosX - maxX) * (self.triggerScale - );
                 );
                 ;
                 movetoY = ( - math.abs(curPosX - centerOffsetY) / offsetWidth) * self.maxOffsetY;
             else
                 movetoX = curPosX + (curPosX < minX ) );
             end
             cell:setPosition(movetoX, movetoY);

             --    缩放.
             local distance = math.abs(cell:getPositionX());
             ;
             local maxDistance = self.triggerLen * 0.5;
             if distance <= maxDistance then
                 scale = ( - distance / maxDistance) * (self.scaleXY - self.cellScale);
             end
             cell:setScale(self.cellScale + scale);
             cell:setVisible(true);
         end -- if.
     end -- for.
 end

 function Control.ScrollView:appendCell(cell)
     local curCount = self:getCellCount();
     self.cellScale = cell:getScale();
     self.selCell = self.selCell or cell;
     self:addChild(cell);
     cell:setAnchorPoint(cc.p(0.5, 0.0));
     cell:setPosition(self.nodePosX + curCount * self.cellWidth, 0.0);
     cell.isEnter = false;
     cell:setTouchEnabled(true);
     cell.onTouchBegan = function() self.isTouch = true; end;
     cell.onTouchEnded = function() if self.isTouch then self:gotoCell(cell); end end;
     Utils:registerButtonEvent(cell);
     table.insert(self.elements, cell);

      then
         self:adjustCell();
     end
 end

 function Control.ScrollView:removeCell(idx, isCleanup)
     local cell = self:getCellByIndex(idx);
     cell:removeFromParentAndCleanup(isCleanup);
     table.remove(self.elements, idx);

      then
         self:adjustCell();
     end
 end

 function Control.ScrollView:adjustCell()
     local function call()
         local cell = self.curCell or self.selCell;
         local pointX = cell:getPositionX();
         local step = -pointX * 0.1;
         if math.abs(step) < 0.1 then
             self.curCell = nil;
             self.selCallFunc(cell);
             self.bound:stop();
         end
         self:moveCells(step);
     end
      then
         call();
         self.bound:run(call, 0.01);
     end
 end

 function Control.ScrollView:getCellCount()
     return #(self.elements);
 end

 function Control.ScrollView:gotoCell(cell)
     if cell:getParent() == self then
         self.curCell = cell;
         self:adjustCell();
     end
 end

 function Control.ScrollView:getSelCell()
     return self.selCell;
 end

 function Control.ScrollView:getCellByTag(tag)
     return self:getChildByTag(tag);
 end

 function Control.ScrollView:getCellByIndex(idx)
     return self.elements[idx];
 end

 function Control.ScrollView:setDragEnabeled(isDrag)
     self.isDrag = isDrag;
 end

 function Control.ScrollView:isDragEnabeled()
     return self.isDrag;
 end

该控件实质是一个cc.Node.

内部没有使用cc.ScrollView.

因为引擎自带的控件相当不好扩充. 最主要的是, 我喜欢造轮子.

该控件内部有一个 滑动对象, 该对象用于控制惯性.

该控件通过

newCallFunc 创造子节点.

SelCallFunc 节点最大化时回调.

enterCallFunc 节点开始变大时回调.

leaveCallFunc 节点恢复原状时回调.

移动子节点时, 需要对子节点逐个遍历移动.

这里占用了很大的性能开销.

不过, 这是不可能的.

在超出范围的子节点将被忽略, 并且隐藏.

并且内部使用了跳帧技巧.

根据节点数量变化跳帧数.

300个骨骼动画拖动时, 最低可在30帧以上, 平均45帧左右.

子节点是逐帧加载, 避免界面长时间不显示.

例子下载

例子链接

改善部分

忽略屏幕以外节点的移动.

裁剪屏幕以外的节点.

性能翻倍.