鸿蒙5.0开发【使用Canvas做动态GIF视频】案例

效果

先给大家看一下整体效果

开发准备

开发流程与进度

这次整体开发流程主要如下：

1. 获取图片素材列表数据，初始化视频的帧数以及canvas画布
2. 绘画视频控制器，编写视频按帧数播放的功能
3. 动态切换帧数进行播放
4. 支持播放词条进行控制播放
5. 添加音乐
6. 导出视频

目前已经开发完第三步了，后面会继续开发，而且也会继续分享出来。感兴趣的开发可以关注一下。

代码讲解

接下来我简单讲解一下代码，也是需要注意点

1、获取图片素材列表，大家想要生成什么GIF或者视频就去找什么素材。可以用第三方的链接，可以用base64，可以用本地项目图片。最后都通过ImageBitmap方法将图片存储为canvas渲染的像素数据。非常方面，在H5还要担心跨域之类的问题。

let playTimer: number = 0
@Entry
@Component
export struct VideoEditing {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private scroller: Scroller = new Scroller()
  @State w: number = 400; // 编程画板的宽度
  @State h: number = 760; // 编程画板的尺寸
  @State levelList: any[] = [
    new ImageBitmap('common/images/icon0.png'),
    new ImageBitmap('common/images/icon1.png'),
    new ImageBitmap('common/images/icon2.png'),
    new ImageBitmap('common/images/icon3.png'),
    new ImageBitmap('common/images/icon4.png'),
    new ImageBitmap('common/images/icon5.png'),
    new ImageBitmap('common/images/icon6.png'),
    new ImageBitmap('common/images/icon7.png')
    ....
  ];

  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
      Column() {
        Canvas(this.context)
          .onReady(() => {
          })
          .width(this.w)
          .height(this.h)
          .backgroundColor('#fff')
      }.justifyContent(FlexAlign.Center).clip(true).width('100%').flexGrow(1).backgroundColor('#f8f8f8')
    }
  }
}

2、绘画视频控制器主体，这里主要控制变量就是视频的帧数fps，再结合循环计时器形成一个小型播放器，循环器的时间规则就是1000 / fps，代表着每秒几帧，想快就放大fps，想慢就缩小fps，是不是很简单。

kotlin
 代码解读
复制代码
let playTimer: number = 0
@Entry
@Component
export struct VideoEditing {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private scroller: Scroller = new Scroller()
  @State w: number = 400; // 编程画板的宽度
  @State h: number = 760; // 编程画板的尺寸
  @State levelList: any[] = [
    ....
  ]; // 图层list
  @State ispause: boolean = true // 是否是暂停状态
  @State plusNum: number = 0 // 帧总量
  @State plusCount: number = 0 // 帧总量计数器(判断循环次数)
  @State count: number = 0 // 当前帧
  @State fps: number = 25 // 25帧/秒
  @State fpsNumber: number = 2 // 25帧/秒
  @State recordFrom: number = 0 // 记录起始帧
  @State recordTo: number = 0 // 记录结束帧
  @State imgsLen: number = 0 // 记录帧长度

  // 跳到某一帧
  goto (n: number) {
    this.count = n
    this.drawImg(this.levelList[n])
  }
  drawImg(img) {
    // const image = offCanvas.transferToImageBitmap()
    // this.context.transferFromImageBitmap(image)
    this.context.drawImage(img,0,0,this.w, this.h)
  }
  fromTo(from: number, to: number) {
    const self = this
    const fps = this.fps
    // 先清除上次未执行完的动画
    clearInterval(playTimer)
    const timeFn = (): undefined => {
      if (self.ispause) {
        return
      }
      // 当总量计数器达到帧总量的时候退出
      if (self.plusNum <= self.plusCount) {
        self.resetData()
        // clearInterval(playTimer)
        return
      } else {
        // 未达到，继续循环
        // 帧计数器
        self.count++
        // 一次循环结束，重置keyCount为from
        if (self.count > to) {
          self.count = from
        }
        this.scroller.scrollTo({ xOffset: self.count * 150, yOffset: 0 })
        self.goto(self.count)
        // 总量计数器
        self.plusCount++
        return
      }
    }
    // 总量计数器
    this.plusCount = 0

    // 帧总量 帧数*循环次数first
    this.plusNum = to - from + 1
    this.ispause = false

    this.recordFrom = from
    this.recordTo = to

    timeFn()
    playTimer = setInterval(timeFn, 1000 / fps)
  }
  // 重置数据 停止并回到第一帧或cover帧
  resetData() {
    this.ispause = true
    clearInterval(playTimer)
    this.plusNum = 0
    this.plusCount = 0
    this.scroller.scrollTo({ xOffset: 0, yOffset: 0 })
    // 重置记录
    this.recordFrom = 0
    this.recordTo = this.imgsLen - 1
    this.count = 0
  }
  build() {
    Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) {
      Column() {
        Canvas(this.context)
          .onReady(() => {
            this.goto(0)
          })
          .width(this.w)
          .height(this.h)
          .backgroundColor('#fff')
      }.justifyContent(FlexAlign.Center).clip(true).width('100%').flexGrow(1).backgroundColor('#f8f8f8')
      Column() {
        Flex({justifyContent: FlexAlign.SpaceBetween}) {
          Row() {
            Text(String(this.fps)).fontSize(15).margin({right: 4})
            Text('帧/秒').fontSize(12)
            Image($r('app.media.ic_public_spinner_small')).width(20)
          }.onClick(() => {
            // this.showSex = true
            TextPickerDialog.show({
              range:  ['1', '12', '25', '30', '50', '60'],
              selected: this.fpsNumber,
              // selectedTextStyle: {color:'rgba(255, 80, 121, 1)'},
              onAccept: (value: TextPickerResult) => {
                this.fpsNumber = Number(value.index)
                this.fps = Number(value.value)
              }
            })
          })
          Row() {
            Image($r('app.media.ic_public_play')).width(20)
              .onClick(() => {
                this.imgsLen = this.levelList.length
                this.recordFrom = 0
                this.recordTo = this.imgsLen - 1
                this.fromTo(this.recordFrom, this.recordTo)
              })
            Image($r('app.media.ic_public_pause')).width(20)
          }
          Row() {
            Image($r('app.media.ic_public_music_filled')).width(20)
          }
        }.padding({top: 20, bottom: 20, left: 10, right: 10})
      }
    }.position({x: 0, y: 0}).width('100%').height('100%').backgroundColor('#fff').transition({ type: TransitionType.Insert, translate: { x: 0, y: '100%' } }).transition({ type: TransitionType.Delete, translate: { x: 0, y: '100%' } })
  }
}

以上就是前三步的实现代码，这三个步骤整体并不难。在页面能够实现简单的播放之后，后面就是生成视频或者GIF了。其实还有一个功能也很重要，就是导入视频，解析视频，然后就可以做视频编辑器了。

在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
上面更多鸿蒙最新技术知识点，请前往作者博客：https://gitee.com/li-shizhen-skin/zhihu/blob/master/README.md