优化滚动代码，把函数拆分

RollingNumber/assets/scene/test.fire

@@ -81,16 +81,19 @@
       },
       {
         "__id__": 42
+      },
+      {
+        "__id__": 45
       }
     ],
     "_tag": -1,
     "_active": true,
     "_components": [
       {
-        "__id__": 45
+        "__id__": 49
       },
       {
-        "__id__": 46
+        "__id__": 50
       }
     ],
     "_prefab": null,
@@ -696,7 +699,7 @@
       }
     ],
     "_tag": -1,
-    "_active": false,
+    "_active": true,
     "_components": [
       {
         "__id__": 21
@@ -732,8 +735,8 @@
     "_scaleY": 1,
     "_position": {
       "__type__": "cc.Vec2",
-      "x": -176,
-      "y": 54
+      "x": 273,
+      "y": -6
     },
     "_skewX": 0,
     "_skewY": 0,
@@ -803,14 +806,14 @@
     },
     "_enabled": true,
     "_useOriginalSize": false,
-    "_actualFontSize": 40,
+    "_actualFontSize": 20,
     "_fontSize": 20,
     "_lineHeight": 40,
     "_enableWrapText": false,
     "_N$file": null,
     "_isSystemFontUsed": true,
     "_spacingX": 0,
-    "_N$string": "位数",
+    "_N$string": "滚动",
     "_N$horizontalAlign": 1,
     "_N$verticalAlign": 1,
     "_N$fontFamily": "Arial",
@@ -915,8 +918,8 @@
     "target": {
       "__id__": 2
     },
-    "component": "",
-    "handler": "onClick",
+    "component": "test",
+    "handler": "onEventClicked2",
     "customEventData": "fixed"
   },
   {
@@ -1731,6 +1734,11 @@
     "frameSpeedOffset": 0.04,
     "lap": 2,
     "finallyNumber": 0,
+    "offset": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
     "prefab": {
       "__uuid__": "4639edfe-5f74-45f9-9fe3-65a79e365fd3"
     },
@@ -1767,6 +1775,149 @@
       }
     ]
   },
+  {
+    "__type__": "cc.Node",
+    "_name": "Rolling",
+    "_objFlags": 0,
+    "_parent": {
+      "__id__": 2
+    },
+    "_children": [],
+    "_tag": -1,
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 46
+      },
+      {
+        "__id__": 47
+      },
+      {
+        "__id__": 48
+      }
+    ],
+    "_prefab": null,
+    "_id": "a5h4CTcz9Ai4soBe15Mb/r",
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_cascadeOpacityEnabled": true,
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 26,
+      "height": 36
+    },
+    "_rotationX": 0,
+    "_rotationY": 0,
+    "_scaleX": 1,
+    "_scaleY": 1,
+    "_position": {
+      "__type__": "cc.Vec2",
+      "x": 88,
+      "y": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_localZOrder": 0,
+    "_globalZOrder": 0,
+    "_opacityModifyRGB": false,
+    "groupIndex": 0
+  },
+  {
+    "__type__": "cc.Mask",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 45
+    },
+    "_enabled": true,
+    "_type": 0,
+    "_segements": 64,
+    "_N$spriteFrame": null,
+    "_N$alphaThreshold": 1,
+    "_N$inverted": false
+  },
+  {
+    "__type__": "55881U56qZAU5XddPHd1QyV",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 45
+    },
+    "_enabled": true,
+    "offset": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 2
+    },
+    "prefab": {
+      "__uuid__": "4639edfe-5f74-45f9-9fe3-65a79e365fd3"
+    }
+  },
+  {
+    "__type__": "518e9EgIzFM3Lka4q1/ErXu",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 45
+    },
+    "_enabled": true,
+    "direction": 0,
+    "rollingBase": {
+      "__id__": 47
+    },
+    "speedNormal": 1,
+    "offsetElastic": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 2
+    },
+    "timeBack": 0.4,
+    "showCount": 1,
+    "rollingCount": 13,
+    "spriteFrames": [
+      {
+        "__uuid__": "187189c9-582f-4213-a754-1c33a9512de9"
+      },
+      {
+        "__uuid__": "8f1c5e92-c9a1-4d23-bc65-dd6d43a0aa33"
+      },
+      {
+        "__uuid__": "4490822e-9312-49ac-8771-d7c0a3efeb9b"
+      },
+      {
+        "__uuid__": "2f6db5a8-c805-44cd-8952-904323d03081"
+      },
+      {
+        "__uuid__": "161c849c-248e-4c24-b6be-3c0ad93f875d"
+      },
+      {
+        "__uuid__": "32663112-ad42-4e3f-bbad-74d8466d3aa7"
+      },
+      {
+        "__uuid__": "435cc795-491d-4683-ad4e-9497e2dfca39"
+      },
+      {
+        "__uuid__": "bd1c6114-80cb-488f-9240-3f19ebce5786"
+      },
+      {
+        "__uuid__": "abf1a450-4e37-496f-8197-2a4b902dbc1a"
+      },
+      {
+        "__uuid__": "7f70d486-1fdd-42ad-91df-e729d7eacce3"
+      }
+    ]
+  },
   {
     "__type__": "cc.Canvas",
     "_name": "",
@@ -1794,6 +1945,9 @@
     "rolling": {
       "__id__": 42
     },
+    "rolling3": {
+      "__id__": 45
+    },
     "editBox": {
       "__id__": 39
     }

RollingNumber/assets/script/RollingBase.js

@@ -0,0 +1,162 @@
+const RollingModel = require('RollingModel');
+
+const Direction = cc.Enum({
+  'Vertical': 0,
+  'Horizontal': 1,
+});
+
+cc.Class({
+  extends: cc.Component,
+
+  properties: {
+    offset: cc.Vec2, //偏移值
+    prefab: cc.Prefab, //显示item
+  },
+
+  onLoad() {
+    this.node.model = new RollingModel();
+  },
+
+  start() {
+    this.direction = this.node.model.direction;
+  },
+
+  //清除item
+  initClearItem() {
+    this.node.children.forEach((node) => {
+      node.destroy();
+    });
+  },
+
+  //初始化需要滚动的item 个数为count+1
+  initItem(count) {
+    let len = count, height, width, posStart;
+    this.node.model.items = [];
+
+    let node = cc.instantiate(this.prefab);
+    height = node.height + this.offset.y;
+    width = node.width + this.offset.x;
+
+    if (this.direction == Direction.Vertical) {
+      posStart = cc.v2(0, -height * 0.5 * (len - 1));
+    } else if (this.direction == Direction.Horizontal) {
+      posStart = cc.v2(-width * 0.5 * (len - 1), 0);
+    }
+    //确定边界
+    this.initBorder(posStart, width, height, count);
+    this.node.model.posStart = posStart;
+
+    function initNode(node, i) {
+      if (this.direction == Direction.Vertical) {
+        node.y = posStart.y + i * height;
+      } else if (this.direction == Direction.Horizontal) {
+        node.x = posStart.x += i * width;
+      }
+      this.node.model.items.push(node);
+      this.node.addChild(node);
+    }
+
+    initNode.bind(this)(node, 0);
+    //添加count+1个
+    for (let i = 1; i < len + 1; i++) {
+      let node = cc.instantiate(this.prefab);
+      initNode.bind(this)(node, i);
+    }
+  },
+
+  //初始化边界
+  initBorder(posStart, width, height, index) {
+
+    if (this.direction == Direction.Vertical) {
+      this.node.model.borderUp = cc.v2(0, posStart.y + height * index);
+      this.node.model.borderDown = cc.v2(0, posStart.y - height);
+    } else {
+      this.node.model.borderLeft = cc.v2(posStart.x - width, 0);
+      this.node.model.borderRight = cc.v2(posStart.x + width * index, 0);
+    }
+
+  },
+
+  //移动item
+  onMoveItem(node, delta) {
+    if (this.direction == Direction.Vertical) {
+      node && (node.y += delta);
+    } else if (this.direction == Direction.Horizontal) {
+      node && (node.x += delta);
+    }
+  },
+
+  //是否越界
+  onCheckBorder(node, borderPos) {
+    if (this.direction == Direction.Vertical) {
+      if (node.y < borderPos.y) {
+        return true;
+      } else {
+        return false;
+      }
+    } else if (this.direction == Direction.Horizontal) {
+      if (node.x > borderPos.x) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  },
+
+  //设置新位置，
+  setStartPos(node, startPos, borderPos) {
+    //得到偏移
+    if (this.direction == Direction.Vertical) {
+      let offset = node.y - borderPos.y;
+      node.y = startPos.y + offset;
+    } else if (this.direction == Direction.Horizontal) {
+      let offset = node.x - borderPos.x;
+      node.x = startPos.x + offset;
+    }
+  },
+
+  //接近终点
+  getNearZeroNode(items) {
+    let result = items[0];
+    if (this.direction == Direction.Vertical) {
+      for (let i = 1; i < items.length; i++) {
+        let item = items[i];
+        if (item.y < result.y) {
+          result = item;
+        }
+      }
+      return result;
+    } else if (this.direction == Direction.Horizontal) {
+      for (let i = 1; i < items.length; i++) {
+        let item = items[i];
+        if (item.x > result.x) {
+          result = item;
+        }
+      }
+      return result;
+    }
+  },
+
+  //接近起点
+  getNearUpNode(items) {
+    let result = items[0];
+    if (this.direction == Direction.Vertical) {
+      for (let i = 1; i < items.length; i++) {
+        let item = items[i];
+        if (item.y > result.y) {
+          result = item;
+        }
+      }
+      return result;
+    } else if (this.direction == Direction.Horizontal) {
+      for (let i = 1; i < items.length; i++) {
+        let item = items[i];
+        if (item.x < result.x) {
+          result = item;
+        }
+      }
+      return result;
+    }
+  },
+
+});

RollingNumber/assets/script/RollingBase.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "55881539-eaa6-4053-95dd-74f1ddd50c95",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

RollingNumber/assets/script/RollingModel.js

@@ -0,0 +1,19 @@
+
+
+class RollingModel {
+  constructor() {
+    this.direction = 0;
+    this.time = 0;
+    this.curIndex = 0;
+    this.items = [];
+    this.posStart = null;
+    this.borderUp = null;
+    this.borderDown = null;
+    this.borderLeft = null;
+    this.borderRight = null;
+    this.rollNumbers = [];
+  }
+
+}
+
+module.exports = RollingModel;

RollingNumber/assets/script/RollingModel.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "fa7ec7df-cefb-4016-baa0-c4a443c3baa7",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

RollingNumber/assets/script/RollingNumber.js

@@ -30,6 +30,7 @@ cc.Class({
     this.finallyNumber = data * 1;
 
     this.initRollNumbers(this.lap, this.finallyNumber);
+    this.onRemoveItem();
     this.initItme();
     for (let i = 0; i < this.items.length; i++) {
       let item = this.items[i];

RollingNumber/assets/script/RollingNumber3.js

@@ -0,0 +1,205 @@
+
+const Direction = cc.Enum({
+  'Vertical': 0,
+  'Horizontal': 1,
+});
+const RollingBase = require('RollingBase');
+
+//返回int
+Math.randomInt = function (min, max) {
+  let numb = Math.random() * (max - min + 1);
+  return min + parseInt(numb);
+};
+cc.Class({
+  extends: cc.Component,
+
+  properties: {
+    direction: {
+      default: Direction.Vertical,
+      type: Direction
+    }, //Vertical or Horizontal
+    rollingBase: RollingBase,
+    speedNormal: 10, //移动时速度
+    offsetElastic: cc.Vec2,
+    timeBack: 0.4,
+    showCount: 1,
+    rollingCount: 13,
+    spriteFrames: [cc.SpriteFrame], //切换item的texture
+  },
+
+  onLoad() {
+    this.isOver = true;
+  },
+
+  //
+  init(data) {
+    this.state = 0;
+    this.time = 0;
+    this.curIndex = 0;
+    this.isOver = true;
+    this.speed = this.speedNormal;
+    this.direction = this.rollingBase.direction;
+
+    this.rollingBase.initClearItem();
+    this.rollingBase.initItem(this.showCount);
+    this.initRollNumbers(this.showCount, true);
+
+    for (let i = 0; i < this.showCount; i++) {
+      let item = this.node.model.items[i];
+      this.onSwithSpriteFrame(item, this.rollNumbers[this.curIndex++]);
+    }
+  },
+
+  //滚动显示结果 data=[]
+  initResult(data, soundFn, fn) {
+    this.state = 0;
+    this.time = 0;
+    this.curIndex = 0;
+    this.isOver = false;
+    this.speed = this.speedNormal;
+    this.direction = this.node.model.direction;
+
+    this.fn = fn;
+    this.soundFn = soundFn;
+    //初始化要显示数据，
+    this.initRollNumbers(this.rollingCount - this.showCount, true, data);
+
+    let item = this.rollingBase.getNearUpNode(this.node.model.items);
+    this.onSwithSpriteFrame(item, this.rollNumbers[this.curIndex++]);
+  },
+
+  //初始化滚动数据
+  initRollNumbers(count, isClear = false, list = []) {
+    if (isClear) {
+      this.rollNumbers = [];
+    }
+    let i = 0, len = count, spriteCount = this.spriteFrames.length;
+    for (i = 0; i < len; i++) {
+      this.rollNumbers.push(Math.randomInt(0, spriteCount - 1));
+    }
+    for (i = 0; i < list.length; i++) {
+      this.rollNumbers.push(list[i]);
+    }
+  },
+
+  //清除item
+  initClearItem() {
+    this.node.children.forEach((node) => {
+      node.destroy();
+    });
+  },
+
+  //当前滚动的数字
+  getCurIndex() {
+    return this.rollNumbers[this.curIndex++];
+  },
+
+  //结果后回弹，然后回调
+  resetLocation() {
+    let zeroNode = this.rollingBase.getNearZeroNode(this.node.model.items), v2;
+    if (this.direction == Direction.Vertical) {
+      let offset = this.node.model.posStart.y - zeroNode.y;
+      v2 = cc.v2(0, offset);
+    } else if (this.direction == Direction.Horizontal) {
+      let offset = this.node.model.posStart.x - zeroNode.x;
+      v2 = cc.v2(offset, 0);
+    }
+    for (let i = 0; i < this.node.model.items.length; i++) {
+      let item = this.node.model.items[i];
+      item.runAction(cc.moveBy(this.timeBack, v2).easing(cc.easeElasticOut(0.4)));
+    }
+    //结果回调
+    this.scheduleOnce(() => {
+      this.fn && this.fn();
+    }, this.timeBack);
+  },
+
+  onSwithSpriteFrame(node, index) {
+    let sprite = node.getComponent(cc.Sprite);
+    sprite.spriteFrame = this.spriteFrames[index] || null;
+  },
+
+  setSpeed() {
+    //状态1下，减速
+    if (this.state == 1) {
+      if (this.direction == Direction.Vertical) {
+        if (this.speed - this.offsetElastic.y > 0.01) {
+          this.speed = this.offsetElastic.y;
+        } else {
+          this.speed = 0;
+        }
+      } else if (this.direction == Direction.Horizontal) {
+        if (this.speed - this.offsetElastic.x > 0.01) {
+          this.speed = this.offsetElastic.x;
+        } else {
+          this.speed = 0;
+        }
+      }
+      this.soundFn && this.soundFn();
+    }
+  },
+
+  //如果结果了，回弹
+  onCheckRollingOver() {
+    if (this.speed == 0) {
+      if (this.isOver == false) {
+        // console.log('time=', this.time);
+        this.resetLocation();
+      }
+      this.isOver = true;
+
+      return;
+    }
+  },
+
+  //当移动到最后一个时，
+  judgeRollingOver() {
+    if (this.curIndex == this.rollNumbers.length + 1) {
+      this.state = 1;
+    }
+  },
+
+  update(dt) {
+    if (this.isOver) {
+      return;
+    }
+    this.time += dt;
+    //状态为1时时，减速到0
+    this.setSpeed();
+    //结束后，回弹
+    this.onCheckRollingOver();
+
+    let i = 0;
+    //移动
+    for (i = 0; i < this.node.model.items.length; i++) {
+      let item = this.node.model.items[i];
+      this.rollingBase.onMoveItem(item, -this.speed);
+    }
+
+    //是否过界
+    for (i = 0; i < this.node.model.items.length; i++) {
+      let item = this.node.model.items[i], isBorder;
+      if (this.direction == Direction.Vertical) {
+        isBorder = this.rollingBase.onCheckBorder(item, this.node.model.borderDown);
+      } else if (this.direction == Direction.Horizontal) {
+        isBorder = this.rollingBase.onCheckBorder(item, this.node.model.borderRight);
+      }
+      if (isBorder) {
+        if (this.direction == Direction.Vertical) {
+          this.rollingBase.setStartPos(item, this.node.model.borderUp, this.node.model.borderDown);
+        } else if (this.direction == Direction.Horizontal) {
+          this.rollingBase.setStartPos(item, this.node.model.borderLeft, this.node.model.borderRight);
+        }
+        let index = this.getCurIndex();
+        this.onSwithSpriteFrame(item, index);
+        //是否结束，设置state=1 减速状态
+        this.judgeRollingOver();
+      }
+    }
+
+  },
+
+  onDestroy() {
+
+  }
+});

RollingNumber/assets/script/RollingNumber3.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "518e9120-2331-4cdc-b91a-e2ad7f12b5ee",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

RollingNumber/assets/script/test.js

@@ -3,11 +3,19 @@ cc.Class({
 
   properties: {
     rolling: cc.Node,
+    rolling3: cc.Node,
     editBox: cc.EditBox,
   },
 
   onLoad() {
     this.rollingNubmer = this.rolling.getComponent('RollingNumber');
+    this.rollingNumber3 = this.rolling3.getComponent('RollingNumber3');
+
+  },
+
+  start() {
+    this.rollingNumber3.init();
+
   },
 
   registerEvent() {
@@ -24,6 +32,12 @@ cc.Class({
     this.rollingNubmer.init(number * 1);
   },
 
+  onEventClicked2() {
+    let number = this.editBox.string;
+    console.log(number);
+    this.rollingNumber3.initResult([number * 1]);
+  },
+
   update(dt) {
 
   },