Cocos2d : 模拟IOS时间选择器

使用引擎：cocos2d-js 3.0

使用语言：javascript

运行平台：手机web

---------------------------------------------------------------

初步分析：

操作过程：

滑动，转动，放缓速度，平衡，停止。

时间选择器的功能分析：

1. 滑动

2. N个选项结果（eg. 0~10）

3. 部分数字可见

4. 根据最近原则，自动平衡到结果item

5. ...

--------------------------------------------------------------------

作为一名合格的Cocos2d程序员，脑袋第一反应至少应该是：ScrollView、ClippingNode。

于是我们立刻面临两种选择，一种是继承ScrollView的做法，或者是使用ClippingNode自己造轮子。

首先不说ScrollView有多么繁杂的私有变量，最不利的是，它的整个滑动逻辑和时间选择器是不同的，它是有尽头的。因此，我们如果选择继承的做法，那么无疑工作量会比较多（修改ScrollView逻辑流程）。

其实循环滚动的逻辑一点也不复杂，我们没必要去使用任何已有的滑动类控件，无论是扩展性还是运行效率，这个轮子自己造才是最好的选择。

那么我们使用ClippingNode？

不是！而是使用ccui::Layout。最终我选择它的原因是，它不需要设置stencil，直接一句话即可设置成为裁剪（setClippingEnabled），减少子父节点坐标计算的复杂性。

--------

UI如下：

--------

--------

核心点：

--------

1. 鉴于效率和方便性，使用一个contentNode来管理所有item。

2. 通过_bMoveing和_bTouching标识来处理触摸和移动之间相互影响。

3. 循环滚动的实现逻辑：向上移动，那么最上的item会移动到最下，向下则反之。

4. 在操作结束之后，做矫正平衡（准确移动到固定的位置）。

--------

代码实现：

--------

/**
 * Created by xxf on 12/19/2014.
 *
 *  1. touchTime < 0.3 s 判定为加速
 *  2. 平衡性判断
 *  3. 平衡后停止
 *
 *
 *  eg:
 *
 *   var list = ["1","2","3","4","5","6","7","8","9","10"];
     var definition = {
                size:cc.size(60,125),
                items:list,
                backGround: res.back
            };
     var node = new ScrollSelector(definition);
 */

var ScrollSelector = ccui.Layout.extend({
    _visibleClipNumber:3,   // 同时显示Item的个数
    _velocity:3,            // 速率
    _timeLimit:0.5,         // 时间限制
    _distanceLimit:500,     // 距离限制
    _timeCondition:0.3,     // 时间条件
    _distanceCondition:30,  // 距离条件

    _diffY:0,
    _diffYCount:0,          // 周期性计数,y轴的移动距离
    _onceDiffYCount:0,      // 一次触摸y轴的移动距离
    _timeCount:0,           // 触摸时间计时
    _runningAction:null,
    _list:null,             // item列表，用来平衡坐标
    _originList:null,
    _currentItemIndex:2,          // 目前是第几个item
    _value:null,            // 当前item的value
    _beginPos:null,
    _contentNode:null,
    _backGround:null,

    _bMoveing:false,
    _bTouching:false,
    _bBeginCountTime:false,

    _fontColor: cc.color.BLACK,
    _fontSize: 40,
    _fontname: "Arial",
    // _mode:null,             //游戏类型：选择器，游戏器

    ctor: function (params) { //params 参数列表： items, textures.back, size
        this._super();
        this.setClippingEnabled(true);
        this.setContentSize(params.size);
        this.setAnchorPoint(cc.p(0.5, 0));
        this.ignoreAnchor = false;
        this._backGround = new cc.Sprite(params.backGround);
        this.addChild(this._backGround);
        this._backGround.x = this.width/2;
        this._backGround.y = this.height/2;
        this._contentNode = new cc.Node();
        this._contentNode.setAnchorPoint(cc.p(0.5,0));
        this.addChild(this._contentNode);
        this._contentNode.setPosition(cc.p(this.width/2, 0));

        // 创建N个Item
        this._list = [];
        this._originList = [];

        for(var i = 0; i < params.items.length; i++){
            var text = ccui.Text.create(params.items[i], this._fontName, this._fontSize);
            text.setTextVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER);
            text.getVirtualRenderer().setColor(this._fontColor);
            text.setTextAreaSize(cc.size(params.size.width, params.size.height/3));
            text.setPosition(cc.p(0, i* text.height + text.height/2));
            this._contentNode.addChild(text,1,i);
            this._list.push(text);
            this._originList.push(text);
        }
        this._value = this._originList[1].getString();

        this._lister = cc.EventListener.create({
            swallowTouches: true,
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            onTouchBegan:this._onTouchBegan,
            onTouchMoved:this._onTouchMoved,
            onTouchEnded:this._onTouchEnded
        });
        cc.eventManager.addListener(this._lister ,this);
        this.scheduleUpdateWithPriority(0);

        // init data
        this._diffYCount = this._list[0].height;
        this._beginPos = cc.p(0,0);
        this._distanceLimit = params.size.height*2 + Math.random()*50;

    },

    update: function(dt){
        if(!this._bTouching && this._bMoveing){ // Action中的时候，计算偏移量
            var diffY = this._contentNode.y - this._beginPos.y;
            this._diffYCount = this._diffYCount + diffY;
            this._beginPos = this._contentNode.getPosition();
        }
        this._balance();
        if(this._bBeginCountTime) this._timeCount = this._timeCount + dt;
    },

    _onTouchBegan:function (touch, event) {
        var target = event.getCurrentTarget();
        if (!target.containsTouchLocation(touch)) return false;
        target._beginPos = touch.getLocation();
        target._bTouching = true;
        target._bMoveing = false;
        if (target._contentNode.isRunning())
            target._contentNode.stopAction(target._runningAction);
        // 开启滑动计时
        target._bBeginCountTime = true;
        target._timeCount = 0;
        return true;
    },

    _onTouchMoved:function (touch, event) {
        // Move中的时候，计算偏移量
        var target = event.getCurrentTarget();
        var getPoint = touch.getLocation();
        var diffY = getPoint.y - target._beginPos.y;
        target._contentNode.y = target._contentNode.y + diffY;
        target._beginPos = getPoint;
        target._diffYCount = target._diffYCount + diffY;
        target._onceDiffYCount = target._onceDiffYCount + diffY;
    },

    _onTouchEnded:function (touch, event) {
        var target = event.getCurrentTarget();
        target._bTouching = false;

        // 计算滑动  计算距离  计算速度
        if (/*Math.abs(target._onceDiffYCount) > target._distanceCondition &&*/ target._timeCount < target._timeCondition) {
            if (target._contentNode.isRunning())  target._contentNode.stopAction(target._runningAction);
            var distance = Math.round(target._onceDiffYCount*target._velocity);
            var time = target._timeCount * target._velocity;
            var pn = distance > 0 ? 1 : -1;
            distance = Math.abs(distance) > Math.abs(target._distanceLimit) ? pn * target._distanceLimit: distance;
            time = time < target._timeLimit ? target._timeLimit: time;
            var move = cc.moveBy(time, 0, distance);
            target._runningAction = cc.sequence(move.easing(cc.easeSineOut()), cc.callFunc(target._bounceBalance, target));
            target._runningAction = target._contentNode.runAction(target._runningAction);
            target._beginPos = target._contentNode.getPosition();
            target._bMoveing = true;
        }else{ // 如果不移动，那么直接做平衡
            target._bounceBalance();
        }
        target._onceDiffYCount = 0;
        target._timeCount = 0;
        target._bBeginCountTime = false;
    },

    containsTouchLocation:function (touch) {
        var getPoint = touch.getLocation();
        var myRect = this.getBoundingBox();
        return cc.rectContainsPoint(myRect, getPoint);
    },

    _balance:function(){
        if(this._diffYCount > this._list[0].height){
            var topItem = this._list.pop();
            topItem.y = this._list[0].y - this._list[0].height;
            this._list.unshift(topItem);
            this._diffYCount = this._diffYCount - this._list[0].height;
        }else if (this._diffYCount < -this._list[0].height) {
            var bottomItem = this._list.shift();
            bottomItem.y = this._list[this._list.length-1].y + this._list[this._list.length-1].height;
            this._list.push(bottomItem);
            this._diffYCount = this._diffYCount + this._list[0].height;
        }
    },

    _bounceBalance:function(){
        var itemHight = this._list[0].height;
        var num = Math.round(this._contentNode.y%itemHight);
        var distance = 0;
        if ( num > 0){
            distance = num > itemHight/2 ? itemHight-num : -num;
        }else {
            distance = num > -itemHight/2 ? -num : -(itemHight + num);
        }
        var action = cc.moveBy(0.2, 0, distance).easing(cc.easeSineOut());
        this._contentNode.runAction(cc.sequence(action, cc.callFunc(this._end, this)));
    },

    _end: function(){
        var num = Math.round(this._contentNode.y/this._list[0].height);
        var num2 = -1 * (num % this._list.length);
        if (num2 > 0){
            this._currentItemIndex = num2 + 2;
        }else if (num2 < 0){
            this._currentItemIndex = this._list.length + num2 + 2;

        }else{
            this._currentItemIndex = 2;
        }
        if (this._currentItemIndex > this._list.length){
            this._currentItemIndex = this._currentItemIndex % this._list.length;
        }
        this._value = this._originList[this._currentItemIndex-1].getString();
        cc.log(this._value);
    }

});

----------------------------------

由于设置了每秒滑动距离的限制，因此代码在手机web平台几乎没有效率问题。

在Native平台可以放宽一点，让滑动更爽快~

最后，由于小弟知识水平有限，代码中有各种不规范的地方望各位大神们多多包含。