DaFuWeng/assets/Script/common/TimingProgressBar.ts

/*
 * @Author: WoNiu
 * @Date: 2024-03-21 13:44:57
 * @LastEditTime: 2024-03-23 20:26:44
 * @LastEditors: WoNiu
 * @Description:
 */
/*
 * @Author: WoNiu
 * @Date: 2024-03-21 13:44:57
 * @LastEditTime: 2024-03-23 12:57:36
 * @LastEditors: WoNiu
 * @Description: 倒计时进度
 */
import {
  _decorator,
  Component,
  Node,
  ProgressBar,
  Sprite,
  tween,
  UITransform,
  v2,
} from "cc";
import { BaseSprite } from "../../GlobalScript/CommonComponent/BaseSprite";
import { NpkImage } from "../../Tool/NPKImage";
import { LocationImportComponent } from "../../GlobalScript/CommonComponent/LocationImportComponent";
const { ccclass } = _decorator;

/// 倒计时时间进度Node
@ccclass("TimingProgressBar")
export class TimingProgressBar extends Node {
  //* 进度条bar
  progressBar: ProgressBar;
  //* 进度条精灵
  barSprite: Sprite;

  //* 缓动控制
  timingComponent: TimingComponent;

  constructor() {
    super();

    this.setPosition(353.5, -355);
    this.addComponent(UITransform).anchorPoint = v2(0, 1);

    this.timingComponent = this.addComponent(TimingComponent);

    this.initBackgrund();
    this.initBarSprite();
    this.initProgressBar();
  }

  //* 开始缓动
  tweenerStart(time:number,back:Function){
    this.timingComponent.tweenerStart(time,back);
  }

  initBackgrund() {
    const bs = this.addComponent(BaseSprite);
    bs.updateSpriteFrame(NpkImage.ingame, 43);
  }

  initProgressBar() {
    const progressBar = this.addComponent(ProgressBar);
    progressBar.barSprite = this.barSprite;
    progressBar.mode = ProgressBar.Mode.FILLED;
    progressBar.totalLength = 280;
    progressBar.progress = 1;
    this.progressBar = progressBar;
  }

  initBarSprite() {
    const node = new Node();
    this.addChild(node);
    node.setPosition(60, -22);

    const barNode = new Node();
    node.addChild(barNode);
    this.barSprite = barNode.addComponent(Sprite);

    const bs = barNode.addComponent(BaseSprite);
    bs.updateSpriteFrame(NpkImage.ingame, 45);

    this.barSprite = bs.SpriteObj;
    this.barSprite.spriteFrame = bs.SpriteObj.spriteFrame;
    this.barSprite.type = Sprite.Type.FILLED;
  }
}

@ccclass("TimingComponent")
export class TimingComponent extends Component {


  obj = { progress: 1};

  onCompleteBack: Function;

  start() {

  }

  tweenerStart(time:number,back:Function){

    this.onCompleteBack = back;

    tween(this.obj)
      .to(
        time,
        { progress: 0 },
        {
          easing: "linear",
          onUpdate: this.onUpdate.bind(this),
          onComplete: this.onComplete.bind(this),
        }
      )
      .start();
  }

  //* 缓动进度
  onUpdate(target: any, ratio: number){
    const timingProgressBar: TimingProgressBar = this.node as TimingProgressBar;
    timingProgressBar.progressBar.progress = this.obj.progress;
  }

  //* 缓动完成
  onComplete(){
    this.obj.progress = 1;
    this.onCompleteBack();
  }

  update(deltaTime: number) {}
}