小程序拼单活动笔记——canvas矩形进度条

canvas实现动态折角矩形进度条

需求

每个元素有自己的进度，可能会有多个元素，元素底部有个矩形进度条，进度条走动触发元素内部进度，当一个元素进度走完时，会再次触发底部矩形进度条走动，如此反复（跟拼多多免费获取商品的有个场景很像）

背景

项目用的uniapp，vue2引入vue3组合api

难度

市场上有很多长方形进度条还有圆形进度条，但没有这种有折角的进度条，无法直接使用已有组件，需要自己手画一个。原本想每个元素前面带一小节矩形，但是由于元素个数不固定，后期计算太麻烦，所以选择用canvas画一个根据元素个数，控制长度（好像也是差不多麻烦），元素前后间隔40rpx，中间间隔30rpx，利用微信提供的requestAnimationFrame做一个进度条走动动效

关键折角矩形进度条代码如下

import {
    rpx2px } from '@/utils/utils' // 此为转换rpx为px方法
import {
    ref } from '@vue/composition-api' //此方法为vue2引入vue3 api

export default function useSquareProgress(callback) {
   
  /**
   *
   * 以下部分主要为条形进度条
   */

  const start = ref() // 控制每次开始滚动条动效时间
  let previousTimeStamp // 记住上一次的开始时间
  let done = false // 当为false时滚动特效
  let colProgress = 0
  const couponList = ref([])
  const currentList = ref([])

  // 过渡动效方法提取

  /**
   * step  --过渡展示长度
   * changeXOrY  --是x轴还是y轴
   * startX  起始x轴
   */
  const step = (timestamp, time, startX, startY, step, changeXOrY, context) => {
   
    const elapsed = timestamp - start.value
    const stepSign = Math.sign(step)
    const stepValue = Math.abs(step)
    if (previousTimeStamp !== timestamp) {
   
      // 这里使用 Math.min() 确保元素在恰好位于 40px 时停止运动

      let multiple = stepValue / time
      if (changeXOrY === 'y') {
   
        multiple *= 2
      }
      const count = Math.min(multiple * elapsed, stepValue)
      if (changeXOrY === 'x') {
   
        context.lineTo(rpx2px(startX + count * stepSign), rpx2px(startY))
      }
      if (changeXOrY === 'y') {
   
        context.lineTo(rpx2px(startX), rpx2px(startY + count * stepSign))
      }

      if (count === stepValue && changeXOrY !== 'y') {
   
        done = true
      }