Creator怎样做一个类似iphone的滑动以解锁?

Creator 2.x
#1

目前试了一下用Slider组件做,想通过监听事件当progress=1时松手就解锁,遇到的问题
1.如果progress没拖到1,怎样缓动动画让handle回归原点并且让progress归零?
2.只想到了通过

onLoad() {
    // this.node.on('slide', this.callback, this);
    this.node
      .getComponent(cc.Slider)
      .handle.node.on(cc.Node.EventType.TOUCH_END, function(event) {
        cc.log('TOUCH_END event=', event.type);
      });
  }

监听handle上的touchend事件来判断松手,但如果手指滑过头出了handle的范围了,就监听不到这个事件了,请问怎样解决?

#2

用 touchcancel

#4

自己尝试着写了一下,挂载在slider的节点上

GIF.gif764×522 79 KB

slider.ts

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;

  // @property
  // text: string = 'hello';

  onLoad() {
    this.slider = this.node.getComponent(cc.Slider);
    this.slider.progress = 0;
    this.silderHandle = this.slider.handle;
    this.silderHandle.node.on(
      cc.Node.EventType.TOUCH_END,
      function(event) {
        this.callback(event);
      },
      this
    );
    this.silderHandle.node.on(
      cc.Node.EventType.TOUCH_CANCEL,
      function(event) {
        this.callback(event);
      },
      this
    );
  }

  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);
    }
    console.log(event);
  }

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

  // update (dt) {}
}
1赞