倒数计时器与动画同步

问题描述

我在vue js中有一个动画，它是在计时器上由用户动态设置的。动画分为4个阶段，每个阶段均由用户设置。我的问题是尝试显示与用户输入对齐的倒数计时器。我能够使它在第一个周期工作，但是当动画按照nextStep（）方法重置时，它将所有breathconfig.duration值都设置为1并保持在1。

有什么想法我要去哪里吗？

    breathConfig: [
        { text: "Press Play" },{
          dir: -0.2,text: "Inhale",duration: 5,},{
          dir: 0,text: "Hold",{
          dir: 0.2,text: "Exhale",],color: "#8CE5EA",}
  },computed: {
    currentStep() {
      // return the current step config
      return this.breathConfig[this.step]
    },mounted() {
    console.log(this.$vuetify.breakpoint)
    // pass the canvas element from DOM
    this.init(this.$refs.canvas)
    // add event listener
  },created() {
    window.addEventListener("mousemove",this.mouseMove)
    window.addEventListener("pointermove",this.mouseMove)
    this.innerLoop = this.loop;
  },destroyed() {
    window.removeEventListener("mousemove",this.mouseMove)
    window.removeEventListener("pointermove",this.mouseMove)
  },methods: {
    init(canvas) {
      // create new blob
      this.blob = new Blob(this.color,canvas.getContext("2d"))
      // attach canvas element to Blob
      this.blob.canvas = canvas
      // set height to be same as width (square)
      this.blob.canvas.height = this.blob.canvas.width
      // set default color
      this.setColor(this.color)
      // initialise blob
      this.seTradius()
      this.blob.init()
      this.blob.render()
    },toggle() {
      // toggle animation on/off
      this.animating = !this.animating
      if (this.animating) {
        // play button was clicked
        this.start()
      } else {
        // stop button was clicked
        this.reset()
      }
    },reset() {
      // remove all timers
      window.clearInterval(this.stepAnimation)
      window.clearInterval(this.blobAnimation)
      window.clearInterval(this.timer)
      // reset blob size
      this.seTradius()
      // reset steps
      this.step = 0
    },seTradius() {
      // set blob radius to canvas diameter / 2,minus padding space
      this.blob.radius = this.blob.canvas.width / 2 - this.padding
    },setColor(color) {
      // update blob color
      this.blob.color = color
    },start() {
      // start animating blob immediately
      this.blobAnimate()
      // start timer to animate next step
      this.stepAnimate()
    },blobAnimate() {
      // start new animation,using current step config
      this.blobAnimation = setInterval(() => {
        this.blob.radius += this.currentStep.dir
      },20)
    },stepAnimate() {
      // go to next step,after waiting current "duration"
      this.countDownTimer()
      this.stepAnimation = setTimeout(() => {
        this.nextStep()
        
      },this.currentStep.duration * 1000)
      
    },countDownTimer() {
      if (this.currentStep.duration > 0) {
        this.timer = setTimeout(() => {
        this.currentStep.duration -= 1
        this.countDownTimer()
          },1000)
        }
      },nextStep() {
      // loop through breathing steps
      if (this.step < this.breathConfig.length - 1) {
        this.step += 1
      } else {
        // loop back to start
        this.step = 1
      }

      // stop current step animation
      window.clearInterval(this.stepAnimation)
      window.clearInterval(this.timer)

      // start next step animation
      this.stepAnimate()

    },

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）