在小程序中canvas如何使用worklet动画

有时候，我们在canvas中需要添加worklet中动画类型；废话不多说，直接上代码
首先在index.ts文件中

import { LogoAnimate } from "./animate"

let logoAnimate: LogoAnimate = new LogoAnimate()
Page({
  data: {
  },
  onReady() {
    logoAnimate.init('#canvas')
  },
  onHide() {
    logoAnimate.clear()
  },
  onUnload() {
    logoAnimate.clear()
  },
})

第二步，创建animate.ts文件

import { defaultConfig } from "../../utils/config";

const { shared, spring } = wx.worklet

export class LogoAnimate {
  //canvas上下文
  ctx: any
  //canvas 元素
  canvas: any
  //定时器对象
  requestAnimationFrameId: number = 0
  //屏幕高度
  windowHeight = 0
  //屏幕宽度
  windowWidth = 0
  //扫光图片
  lightImage: any
  //小程序logo
  miniLogo: any
  //驾校logo
  drivingSchoolLogo: any
  //屏幕分辨率
  dpr = 1
  //驾校尺寸
  drivingSchoolSize = {
    w: 96,
    h: 92
  }
   //驾校logo起点变量
  drivingSchoolLogoX = shared(0)
  //缩放比例
  scale = shared(0)
  constructor() { }
  //重置数据
  reset() {
    this.miniLogoX.value = 0
    this.drivingSchoolLogoX.value = 0
    this.scale.value = 0
    this.windowHeight = 0
    this.windowWidth = 0
    this.lightX = 0
    this.lightIntervalX = 4
    this.dpr = 1    
    this.drivingSchoolSize = {
      w: 96,
      h: 92
    }
    
  }
  init(id: string) {
    this.reset()
    this.clear()
    const query = wx.createSelectorQuery();
    query.select(id)
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log('canvas',id)
        this.canvas = res[0].node;
        this.ctx = this.canvas.getContext('2d')

        const sys = wx.getSystemInfoSync()
        this.windowHeight = sys.windowHeight
        this.windowWidth = sys.windowWidth

        this.dpr = sys.pixelRatio
        this.canvas.width = res[0].width * this.dpr
        this.canvas.height = res[0].height * this.dpr
        
        this.drivingSchoolSize.w = this.drivingSchoolSize.w * this.dpr
        this.drivingSchoolSize.h = this.drivingSchoolSize.h * this.dpr
		//图片的起始点位置
        this.drivingSchoolLogoX = shared(-this.drivingSchoolSize.w / 2 - this.canvas.width / 2)

        this.requestFile()
      });
  }
  async requestFile() {
  
    this.drivingSchoolLogo = await this.download(drivingSchoolLogoImage)
    this.XImage = this.XImage || await this.download('http://static.pub-drive.wxmini/6fd73508e7908087')
   
    this.transformX()
    this.draw()
    
    this.requestAnimationFrameId = setInterval(() => {
      this.draw()
    }, 1000 / 60)
  }
  //绘制图片
  draw() {

    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    //logo
    this.ctx.save()
    //把中心点移动到画布中心
    this.ctx.translate(this.canvas.width / 3 + this.drivingSchoolLogoX.value, this.canvas.height / 2)
    // this.ctx.rotate(this.angle.value * Math.PI / 180)
    this.ctx.drawImage(this.drivingSchoolLogo, - this.drivingSchoolSize.w / 2, - this.drivingSchoolSize.h / 2, this.drivingSchoolSize.w, this.drivingSchoolSize.h)
    this.ctx.restore()

  }
  //执行worklet动画
  transformX() {
    "worklet";
    //this.miniLogoX.value = spring(0, {}, () => {
     // "worklet";
     // this.scale.value = spring(1, {}, () => {
     //   "worklet";
	//})
   // })
    //图片的起终点位置【从-this.drivingSchoolSize.w / 2 - this.canvas.width / 2 到 0】
    this.drivingSchoolLogoX.value = spring(0, {}, () => {
      "worklet";
    })
  }
  //加载图片
  download(url: string) {
    return new Promise((resolve) => {
      const el = this.canvas.createImage()
      el.src = url
      el.onload = (res: any) => {
        console.log('image', el)
        resolve(el)
      }
    })
  }
  //清楚定时器
  clear() {
    if (this.requestAnimationFrameId) {
      // this.canvas.cancelAnimationFrame(this.requestAnimationFrameId)
      clearInterval(this.requestAnimationFrameId)
    }
  }
}

这里是没有做交互的。