ClickMoveBy.ts 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. const { ccclass, property } = cc._decorator;
  2. /** 状态类型 */
  3. enum StateType {
  4. /** 出去 */
  5. out = 0,
  6. /** 移动中 */
  7. moving = 1,
  8. /** 回来 */
  9. back = 2,
  10. };
  11. /**
  12. * 点击弹出或返回
  13. * - 节点需要添加按钮组件
  14. * - 组件会记录移动前的位置,点击后移动配置好的距离,再次点击则返回。
  15. * - 移动中点击无效
  16. * @author 薛鸿潇
  17. */
  18. @ccclass
  19. export default class ClickMoveBy extends cc.Component {
  20. /** 移动的距离 */
  21. @property({ tooltip: '要移动的距离' })
  22. private vec_move: cc.Vec2 = cc.Vec2.ZERO;
  23. /** 当前状态 */
  24. private state: number = StateType.out;
  25. /** 是否要返回 */
  26. private is_back: boolean = false;
  27. onLoad() {
  28. this.node.on('click', this.StartMoveBy, this);
  29. }
  30. start() {
  31. if (!this.node.getComponent(cc.Button)) this.node.addComponent(cc.Button);
  32. }
  33. /**
  34. * 开始移动
  35. * - 移动指定距离 || 返回相反的距离
  36. * @returns
  37. */
  38. StartMoveBy() {
  39. if (this.state === StateType.moving) return;
  40. let next_state = 0;
  41. let temp_vec_move = cc.Vec2.ZERO;
  42. if (this.state === StateType.out) {
  43. temp_vec_move = this.vec_move;
  44. next_state = StateType.back;
  45. } else if (this.state === StateType.back) {
  46. temp_vec_move.x = -this.vec_move.x;
  47. temp_vec_move.y = -this.vec_move.y;
  48. next_state = StateType.out;
  49. }
  50. this.state = StateType.moving;
  51. let move1 = cc.tween().by(0.5, { position: { value: temp_vec_move, easing: 'backOut' } })
  52. let call1 = cc.tween().call(() => {
  53. this.state = next_state;
  54. })
  55. cc.tween(this.node).then(move1).then(call1).start();
  56. }
  57. // update (dt) {}
  58. }