JS定时播放器

Posted 2021-09-14 Zard

  public playerHandle = {
    state : false,
    animation : null,
    value : 0
  } 

 play(){
    if (!this.playerHandle.state){
      this.startAnimation();
    }else{
      this.stopAnimation();
    }
  }

  playNodeHandle(value){
    this.playerHandle.value = value;
    console.log(this.playerHandle.value)
  }

  startAnimation(){
    this.stopAnimation();
    this.playerHandle.state = true;
    this.playerHandle.animation = this.animate(this.playerHandle.value);
  }

  stopAnimation(){
    if (!this.playerHandle.animation) {
      return;
    }
    this.playerHandle.animation.remove();
    this.playerHandle.animation = null;
    this.playerHandle.state = false;
  }

  animate(startValue){
    var animating = true;
    var value = startValue;
    var frame : any = (timestamp)=> {
      if (!animating) {
        return;
      }
      value += 1
      if (value > 24) {
        value = 0;
        this.playerHandle.value = 0;
        this.stopAnimation();
        return undefined
      }
      this.playNodeHandle(value);
      setTimeout(function() {
        requestAnimationFrame(frame);
      }, 1000 );
    };
    frame();
    return {
      remove: function() {
        animating = false;
      }
    };
  }