• Creator 版本: v2.1.0
• 平臺: 模擬器
• 語言: Typescript

今天突然想做一個類似 iPhone 的滑動以解鎖.

slidedemo.gif

首先想到使用 Creator 自帶的 cc.Slider 組件, 在 Slide 事件中獲取 Slider 的 progress, 遇到了問題:

1. 如果 handle 設(shè)置的比較大會發(fā)現(xiàn)在進度條最左端或最右端會出現(xiàn) handle 挪出了背景框

   解決方案: 將 Slider 的 background 向左右加長

2. 點擊在 cc.Slider 的進度條上會使 handle 移動, 然而我們并不需要這種效果

   解決方案:

   • (不推薦)

     start() {
       cc.eventManager.pauseTarget(sliderNode);
     }
     

   • (推薦)

     start() {
       this.node.targetOff(sliderNode);
     }
     

   因為 Slider 的有些事件可能是注冊在 onLoad 后, 所以我們把取消 Slider 監(jiān)聽的函數(shù)寫在 start 中來避免一些未知錯誤

3. 沒有滑到最右端時 Slider 的回彈

   最近正好在琢磨 Physics 組件的玩法, 所以想到一個騷操作就是用 Joint 將 Slider 和 handle 連接起來, 不過后來還是用一個簡單的 action 解決了

   var springBack = cc.moveTo(0.1, cc.v2(-this.node.width / 2, 0));
   this.silderHandle.node.runAction(springBack);
   

4. 對滑到最右端松手的處理

   如果只是簡單地檢測 handle 的 touchend 事件, 如果手指滑出了 handle 就無法觸發(fā)了, 所以同時還要檢測 handle 的 touchcancel 事件(當手指滑出 handle 節(jié)點的范圍時觸發(fā)), 詳細代碼在下方給出

整體代碼如下:

/* slider.js */
const { ccclass, property } = cc._decorator;

@ccclass
export default class Slider extends cc.Component {
  @property(cc.Slider)
  slider: cc.Slider = null;

  @property(cc.Button)
  silderHandle: cc.Button = null;

  onLoad() {
    this.slider = this.node.getComponent(cc.Slider); // get slider component

    this.slider.progress = 0; // set slider progress to 0
    this.silderHandle = this.slider.handle; // get handle of the slider
    this.silderHandle.node.on(
      cc.Node.EventType.TOUCH_END,
      function(event) {
        this.callback(event);
      },
      this
    ); // trigger when touch ended on handle
    this.silderHandle.node.on(
      cc.Node.EventType.TOUCH_CANCEL,
      function(event) {
        this.callback(event);
      },
      this
    ); // trigger when touch ended and moved out of handle
  }

  callback(event) {
    cc.log(this.slider.progress);
    if (this.slider.progress == 1) {
      cc.director.loadScene('next');
    } else {
      // this.slider.progress = 0;
      var springBack = cc.moveTo(0.1, cc.v2(-this.node.width / 2, 0));
      this.silderHandle.node.runAction(springBack); // handle spring back to initial position
    }
    console.log(event);
  }

  start() {
    this.node.targetOff(this.slider); // prevent slider touch event
  }

  // update (dt) {}
}

將代碼綁定到 Slider 所在節(jié)點進行微調(diào)即可實現(xiàn)滑動以解鎖的效果.