theme: fancy
hello，大家好，我是莓创-陈杨。最近忙着改图表组件的BUG，还有定制化开发一些图表。没啥时间写新东西，草稿里面放了十几个要实现的案例分享，欠的实在太多了，后面再慢慢还吧。这次分享一下之前使用HarmonyOS NEXT Canvas做的动态视频的一个案例，没有感情，全是技术。
什么！你还不知道我封装了什么图表组件，我不允许你不知道，还不快去看看：莓创开源图表快速地址
效果
先给大家看一下整体效果
开发准备
开发流程与进度
这次整体开发流程主要如下：
- 获取图片素材列表数据，初始化视频的帧数以及canvas画布
- 绘画视频控制器，编写视频按帧数播放的功能
- 动态切换帧数进行播放
- 支持播放词条进行控制播放
- 添加音乐
- 导出视频
目前已经开发完第三步了，后面会继续开发，而且也会继续分享出来。感兴趣的开发可以关注一下。
代码讲解
接下来我简单讲解一下代码，也是需要注意点
1、获取图片素材列表，大家想要生成什么GIF或者视频就去找什么素材。可以用第三方的链接，可以用base64，可以用本地项目图片。最后都通过ImageBitmap方法将图片存储为canvas渲染的像素数据。非常方面，在H5还要担心跨域之类的问题。
1let playTimer: number = 0 2@Entry 3@Component 4export struct VideoEditing { 5 private settings: RenderingContextSettings = new RenderingContextSettings(true) 6 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 7 private scroller: Scroller = new Scroller() 8 @State w: number = 400; // 编程画板的宽度 9 @State h: number = 760; // 编程画板的尺寸 10 @State levelList: any[] = [ 11 new ImageBitmap('common/images/icon0.png'), 12 new ImageBitmap('common/images/icon1.png'), 13 new ImageBitmap('common/images/icon2.png'), 14 new ImageBitmap('common/images/icon3.png'), 15 new ImageBitmap('common/images/icon4.png'), 16 new ImageBitmap('common/images/icon5.png'), 17 new ImageBitmap('common/images/icon6.png'), 18 new ImageBitmap('common/images/icon7.png') 19 .... 20 ]; 21 22 build() { 23 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) { 24 Column() { 25 Canvas(this.context) 26 .onReady(() => { 27 }) 28 .width(this.w) 29 .height(this.h) 30 .backgroundColor('#fff') 31 }.justifyContent(FlexAlign.Center).clip(true).width('100%').flexGrow(1).backgroundColor('#f8f8f8') 32 } 33 } 34}
2、绘画视频控制器主体，这里主要控制变量就是视频的帧数fps，再结合循环计时器形成一个小型播放器，循环器的时间规则就是1000 / fps，代表着每秒几帧，想快就放大fps，想慢就缩小fps，是不是很简单。
1let playTimer: number = 0 2@Entry 3@Component 4export struct VideoEditing { 5 private settings: RenderingContextSettings = new RenderingContextSettings(true) 6 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) 7 private scroller: Scroller = new Scroller() 8 @State w: number = 400; // 编程画板的宽度 9 @State h: number = 760; // 编程画板的尺寸 10 @State levelList: any[] = [ 11 .... 12 ]; // 图层list 13 @State ispause: boolean = true // 是否是暂停状态 14 @State plusNum: number = 0 // 帧总量 15 @State plusCount: number = 0 // 帧总量计数器(判断循环次数) 16 @State count: number = 0 // 当前帧 17 @State fps: number = 25 // 25帧/秒 18 @State fpsNumber: number = 2 // 25帧/秒 19 @State recordFrom: number = 0 // 记录起始帧 20 @State recordTo: number = 0 // 记录结束帧 21 @State imgsLen: number = 0 // 记录帧长度 22 23 // 跳到某一帧 24 goto (n: number) { 25 this.count = n 26 this.drawImg(this.levelList[n]) 27 } 28 drawImg(img) { 29 // const image = offCanvas.transferToImageBitmap() 30 // this.context.transferFromImageBitmap(image) 31 this.context.drawImage(img,0,0,this.w, this.h) 32 } 33 fromTo(from: number, to: number) { 34 const self = this 35 const fps = this.fps 36 // 先清除上次未执行完的动画 37 clearInterval(playTimer) 38 const timeFn = (): undefined => { 39 if (self.ispause) { 40 return 41 } 42 // 当总量计数器达到帧总量的时候退出 43 if (self.plusNum <= self.plusCount) { 44 self.resetData() 45 // clearInterval(playTimer) 46 return 47 } else { 48 // 未达到，继续循环 49 // 帧计数器 50 self.count++ 51 // 一次循环结束，重置keyCount为from 52 if (self.count > to) { 53 self.count = from 54 } 55 this.scroller.scrollTo({ xOffset: self.count * 150, yOffset: 0 }) 56 self.goto(self.count) 57 // 总量计数器 58 self.plusCount++ 59 return 60 } 61 } 62 // 总量计数器 63 this.plusCount = 0 64 65 // 帧总量 帧数*循环次数first 66 this.plusNum = to - from + 1 67 this.ispause = false 68 69 this.recordFrom = from 70 this.recordTo = to 71 72 timeFn() 73 playTimer = setInterval(timeFn, 1000 / fps) 74 } 75 // 重置数据 停止并回到第一帧或cover帧 76 resetData() { 77 this.ispause = true 78 clearInterval(playTimer) 79 this.plusNum = 0 80 this.plusCount = 0 81 this.scroller.scrollTo({ xOffset: 0, yOffset: 0 }) 82 // 重置记录 83 this.recordFrom = 0 84 this.recordTo = this.imgsLen - 1 85 this.count = 0 86 } 87 build() { 88 Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Start}) { 89 Column() { 90 Canvas(this.context) 91 .onReady(() => { 92 this.goto(0) 93 }) 94 .width(this.w) 95 .height(this.h) 96 .backgroundColor('#fff') 97 }.justifyContent(FlexAlign.Center).clip(true).width('100%').flexGrow(1).backgroundColor('#f8f8f8') 98 Column() { 99 Flex({justifyContent: FlexAlign.SpaceBetween}) { 100 Row() { 101 Text(String(this.fps)).fontSize(15).margin({right: 4}) 102 Text('帧/秒').fontSize(12) 103 Image($r('app.media.ic_public_spinner_small')).width(20) 104 }.onClick(() => { 105 // this.showSex = true 106 TextPickerDialog.show({ 107 range: ['1', '12', '25', '30', '50', '60'], 108 selected: this.fpsNumber, 109 // selectedTextStyle: {color:'rgba(255, 80, 121, 1)'}, 110 onAccept: (value: TextPickerResult) => { 111 this.fpsNumber = Number(value.index) 112 this.fps = Number(value.value) 113 } 114 }) 115 }) 116 Row() { 117 Image($r('app.media.ic_public_play')).width(20) 118 .onClick(() => { 119 this.imgsLen = this.levelList.length 120 this.recordFrom = 0 121 this.recordTo = this.imgsLen - 1 122 this.fromTo(this.recordFrom, this.recordTo) 123 }) 124 Image($r('app.media.ic_public_pause')).width(20) 125 } 126 Row() { 127 Image($r('app.media.ic_public_music_filled')).width(20) 128 } 129 }.padding({top: 20, bottom: 20, left: 10, right: 10}) 130 } 131 }.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%' } }) 132 } 133}
以上就是前三步的实现代码，这三个步骤整体并不难。在页面能够实现简单的播放之后，后面就是生成视频或者GIF了。其实还有一个功能也很重要，就是导入视频，解析视频，然后就可以做视频编辑器了，这个也是一个大工程，想玩的可以去尝试尝试