基于imageKnife对gif图的管理
前置准备
imageKnife安装:
ohpm install @ohos/imageknife
imageKnife请求网络gif的时,需要开通网络权限,在使用imageknife的模块module.json5中添加网络权限:
"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
}]
在项目内初始化ImageKnifeOption,配置请求头和加载图片的基本参数:
@State option: ImageKnifeOption = {
loadSrc: $r('app.media.startIcon'),//resources资源加载,默认icon
headerOption: [{
key: "refer",
value: "https://1.94.37.200:7070/AntiTheftChain/downloadImage"
}],//请求头
placeholderSrc: $r('app.media.icon_loading'),//加载中显示loading图
errorholderSrc: $r('app.media.icon_failed')//加载失败图
}
然后将加载好的数据传给ImageKnifeComponent,一个默认的样式就写好了。
ImageKnifeComponent({ imageKnifeOption: this.option })
场景
场景一:imageKnife可以实现控制gif图片的播放次数与帧数的定格
核心代码
实例化ImageKnifeOption后,添加gif属性,将字段playTime设置传入播放的次数,即可完成播放次数的控制。
Button("播放")
.onClick(() => {
this.option = {
loadSrc: 'https://xxx.gif',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress: true,
gif: {
playTimes: this.times
}
}
}).margin({ top: 20 })
添加gif属性,将字段seekTo设置传入要定格的帧数,即可完成定格帧数。
Button("定格帧数")
.onClick(() => {
this.option = {
loadSrc: 'https://xxx.gif',
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress: true,
gif: {
seekTo: this.stop
}
}
})
场景二:imageKnife实现播放和暂停gif的功能
核心代码
实例化ImageKnifeOption后,设置autoplay图片属性true/false,完成gif的暂停和继续播放。
Button('暂停图片').onClick(() => {
this.option.autoPlay = false;
})
Button('播放图片').onClick(() => {
this.option.autoPlay = true;
})
场景三:imageKnife对于网络环境和本地的加载的方式
核心代码
实例化ImageKnifeOption后,将索引传入对应的点击事件,分别加载本地资源和网络资源。
- 本地资源格式:loadSrc:$r('app.media.gifSample')。
- 网络资源格式:oadSrc = 'https://xxxx.gif'。
Select([
{ value: '资源加载', },
{ value: '网络加载', },
{ value: '图库加载(待定)', },
])
.selected(this.index)
.value(this.text)
.font({ size: 16, weight: 500 })
.fontColor('#182431')
.selectedOptionFont({ size: 16, weight: 400 })
.optionFont({ size: 16, weight: 400 })
.space(this.space)
.arrowPosition(this.arrowPosition)
.menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
.optionWidth(200)
.optionHeight(300)
.onSelect((index: number, text?: string | undefined) => {
console.info('Select:' + index)
this.index = index;//传入点击事件 完成判断加载网络gif还是本地
index == 0 ? this.option.loadSrc = $r('app.media.gifSample'):this.option.loadSrc = 'https://xxx.gif'
if (text) {
this.text = text;
}
})
场景四:imageKnife对于gif样式边框的设置,包括边框的宽度,颜色,圆角
核心代码
实例化ImageKnifeOption后,将设置好的参数传入drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle,实现边框效果的转换。
Text("gif设置边框效果").fontSize(25)
TextInput({ placeholder: '圆角宽度' }).margin({ top: 20 }).width('50%').type(InputType.Number)
.onChange((value: string) => {
this.BorderWidth = Number(value)
})
TextInput({ placeholder: '颜色样例:#ff0000' })
.type(InputType.Normal)
.margin({ top: 20 })
.width('50%')
.onChange((value: string) => {
this.colorString = value
})
TextInput({ placeholder: '圆角弧度' })
.type(InputType.Number)
.margin({ top: 20 })
.width('50%')
.onChange((value: string) => {
this.connerRadius = Number(value)
})
Button("网络gif - 设置参数").onClick(() => {
this.option = {
loadSrc: 'https://xxx.gif',
drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle(this.BorderWidth, this.colorString, this.BorderWidth)
}
场景五:imageKnife获取gif图片的基本信息,包括宽度,高度,帧率,总帧数
核心代码
接口 | 参数 | 说明 |
addListener(func: AsyncCallback) | func: AsyncCallback | 配置整个监听回调,数据正常加载返回,加载失败返回错误信息 |
实例化ImageKnifeOption后,先实例化网络请求new RequestOption(),load加载gif链接,添加监听属性addListener,回调返回拿到对象的width,height,delay。
因为gif动图本质是一个播放,所以将每次拿到的帧数相加可以得到总帧数(max),经过for循环找到循环的次数maxtimes,再用总帧数除以次数得到每秒帧率avg。
Button('预加载网络资源gif')
.onClick(() => {
let request = new RequestOption();
request.load('https://xxx.gif')
.setImageViewSize({ width: 300, height: 300 })
.addListener({
callback: (err: BusinessError | string, data: ImageKnifeData) => {
if (err) {
console.log('预加载网络资源gif 出现错误! err=' + err)
} else {
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data.drawGIFFrame?.imageGIFFrames![0].dims.width))
console.log('预加载网络资源gif成功! imageKnifedata=' + JSON.stringify(data.drawGIFFrame?.imageGIFFrames))
this.Width = data.drawGIFFrame?.imageGIFFrames![0].dims.width
this.Height = data.drawGIFFrame?.imageGIFFrames![0].dims.height
for (let i = 0; i < ((data.drawGIFFrame?.imageGIFFrames!).length); i++) {
this.max += Number(data.drawGIFFrame?.imageGIFFrames![i].delay)
console.log("预加载网络资源gif成功! max=" + this.max)
this.maxtimes = i
console.log("预加载网络资源gif成功! maxtimes=" + this.maxtimes)
}
this.avg = this.max / this.maxtimes
console.log("预加载网络资源gif成功! avg=" + this.avg)
}
return false;
}
})
ImageKnifeGlobal.getInstance().getImageKnife()?.preload(request);
})
注意:
1. 加载网络请求的和本地格式要注意区分。
2. 添加权限后要配置ImageKnifeOption的请求头。