使用引擎：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 = http://www.mamicode.com/this._originList[1].getString();>

----------------------------------
由于设置了每秒滑动距离的限制，因此代码在手机web平台几乎没有效率问题。
在Native平台可以放宽一点，让滑动更爽快~
最后，由于小弟知识水平有限，代码中有各种不规范的地方望各位大神们多多包含。

Cocos2d : 模拟IOS时间选择器