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平台可以放宽一点,让滑动更爽快~技术分享

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


郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。