cancelanimationframe无效？不，你写法错了 ——踩坑日记

自己无聊 准备自己写一个老虎机来玩 要用关键帧来啥，开始了那肯定要结束

不想看案例的，最底部有错误原因！！！

错误写法

const state = reactive({
	render: 0 // 定义一个变量用来储存requestAnimationFrame
})

/**
 * 渲染动画
 */
const render = () => {
  const curIdx = state.idx[state.idx.length - 1]
  if (curIdx === 12) {
    cancelAnimationFrame(state.render)
  }
  if (state.circle > 5) {
    if (curIdx === state.resultRenderIdx) {
      state.isEnd = true
      cancelAnimationFrame(state.render) // 在requestAnimationFrame里使用cancelAnimationFrame
      renderLastAnimate()
    }
  }
  renderIdxHook()
  state.render = requestAnimationFrame(render)
}

正确写法

const state = reactive({
	render: 0, // 定义一个变量用来储存requestAnimationFrame
	isEnd: false // 定义一个标志位，是否结束动画
})

/**
 * 渲染动画
 */
const render = () => {
  const curIdx = state.idx[state.idx.length - 1]
  if (curIdx === 12) {
    cancelAnimationFrame(state.render)
  }
  if (state.circle > 5) {
    if (curIdx === state.resultRenderIdx) {
      state.isEnd = true
    }
  }
  renderIdxHook()
  state.render = requestAnimationFrame(render)
}

// 监听标志位结束动画
watchEffect(() => {
   if (state.isEnd === true) {
     cancelAnimationFrame(state.render)
     renderLastAnimate()
   }
 })

总结

错误写法：将cancelAnimationFrame这个方法写在我们执行的关键帧里——失败

正确写法：将cancelAnimationFrame这个方法写在我们执行的关键帧外——成功

tips:

最后放一个我自己做的单机版老虎机链接（手机上体验更好）