requestAnimationFrame：

` let animation = {   

    animates() { //要每次循环执行的代码
        for(let i = 0;i < this.speed; i++){//这里的speed越大，执行速度会越快
            status.time+= 1 ;//记录时间
        }
        this.timer = requestAnimationFrame(this.animates.bind(this));//开启定时器
    },
    accelerate(){//加速
        this.speed++
    },
    }
    
    //控制暂停开始
    const buttonManager = {
        play() {
            status.isRun = !status.isRun;
            if (status.isRun) {
                animation.animates();
            } else {
                cancelAnimationFrame(animation.timer);
            }
        },
        reset() {
            status.isRun = false;
            cancelAnimationFrame(animation.timer);
            status.time = 0;
            animation.speed  = 1;


        },
    }
    `
    

setInterval:setInterval(函数名无括号表示不立即调用，间隔时间)

`let animation = {
    animates() { // 动画
        this.timer = setInterval(function () {//要每次循环执行的代码
            status.time+= 1 ;//记录时间
        },2000-argo.speed*500);//这里的speed越大，执行速度会越快
    },
     accelerate(){//加速
        this.speed++
    },
    }
    
  // 暂停开始按钮
const buttonManager = {
    play() {
        status.isRun = !status.isRun;
        if (status.isRun) {
            animation.animates();
        } else {
            clearInterval(animation.timer);
        }
    },
    reset() {
        status.isRun = false;
        clearInterval(animation.timer);
        status.time = 0;
        animation.speed  = 1;
    },
};  
    
    
    `
    
    
`  控制暂停开始重置加速
     //开始暂停
      <el-button
            class="play-params-btn"
            type="primary"
            style="top: 43%; left: 51%; width: 7rem"
            @click="buttonManager.play"
        >
            <svg
                xmlns="http://www.w3.org/2000/svg"
                class="txp_icon txp_icon_play"
                version="1.1"
                style="width: 100%; height: 100%; pointer-events: none"
                viewBox="0 0 80 50"
            >
                <g
                id="txp_svg_play"
                transform="translate(13,0)scale(1.5,1.5)"
                v-show="!status.isRun"
            >
                <path
                    d="M25.8 18c0 .6-.3 1.1-.8 1.3L12.5 27c-.2.1-.5.2-.8.2-.8 0-1.5-.6-1.5-1.5V10c0-.8.7-1.5 1.5-1.5.3 0 .5.1.8.2l12.7 7.9c.4.5.6.9.6 1.4z"
                    fill="#fff"
                ></path>
            </g>
            <g
                id="txp_svg_pause"
                transform="translate(13,0)scale(1.5,1.5)"
                v-show="status.isRun"
            >
                <path
                    d="M12 9h1c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1V10c0-.6.4-1 1-1zm11 0h1c.6 0 1 .4 1 1v16c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1V10c0-.6.4-1 1-1z"
                    fill="#fff"
                ></path>
            </g>
        </svg>
    </el-button>
    
  //重置
  <el-button
        class="reset-params-btn"
        type="primary"
        style="top: 43%; left: 55%; width: 7rem"
        @click="buttonManager.reset"
    >
    <svg
        xmlns="http://www.w3.org/2000/svg"
        style="width: 100%; height: 100%; pointer-events: none"
        viewBox="0 0 80 50"
    >
        <g
            id="txp_svg_replay"
            transform="translate(13,0)scale(1.5,1.5)"
        >
            <path
                d="M17.9 28c-4.9 0-9-3.6-9.8-8.3V19.4c0-.8.7-1.4 1.5-1.4s1.5.6 1.5 1.4c.8 3.8 4.5 6.2 8.3 5.4s6.2-4.5 5.4-8.3c-.7-3.2-3.5-5.6-6.9-5.6-1.8 0-3.6.7-4.8 2h1.3c.8 0 1.5.7 1.5 1.5s-.6 1.6-1.5 1.6h-4c-.8 0-1.5-.7-1.5-1.5v-4c0-.8.7-1.5 1.5-1.5.7 0 1.2.5 1.4 1.1C13.6 8.7 15.7 8 17.9 8c5.5 0 10 4.5 10 10s-4.4 10-10 10z"
                fill="#fff"
            ></path>
        </g>
    </svg>
</el-button>

//加速
<el-button
    class="accelerate-params-btn"
    type="primary"
    style="top: 43%; left: 60%; width: 7rem"
>
    <el-tooltip
        class="box-item"
        effect="light"
        :content="`速度 ×${data.scanSpeed} `"
        placement="top"
    >
    <div class="next" @click="argo.accelerate">
        <img src="./images/next.png" style="height:60%;margin-bottom:0.5rem"/>

    </div>
    </el-tooltip>
</el-button>


 .el-button{//暂停开始按钮
    position:absolute;
    bottom:20px;
    width:150px;
    height:50px;
    line-height:45px;
    font-size:30px;
    padding:0;
    transition: all 0.2s 0s linear;
    .next{
        cursor:pointer;
        width:80px;
        height:50px;
        line-height:50px;
        text-align:center;
        transition:all 0.3s 0s linear;
    }

    .play:active{
        transform:scale(0.8);
    }
    .reset:active{
        transform:scale(0.8);
    }
    .next:active{
        transform:scale(0.8);
    }
}
.el-button:active{
    transform: scale(0.8);
}
        `