前置准备
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);
})
注意:
- 加载网络请求的和本地格式要注意区分。
- 添加权限后要配置ImageKnifeOption的请求头。
以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解;想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到!
下面是鸿蒙的完整学习路线,展示如下:
除此之外,根据这个学习鸿蒙全栈学习路线,也附带一整套完整的学习【文档+视频】,内容包含如下:
内容包含了:(ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战)等技术知识点。帮助大家在学习鸿蒙路上快速成长!
鸿蒙【北向应用开发+南向系统层开发】文档
鸿蒙【基础+实战项目】视频
鸿蒙面经
为了避免大家在学习过程中产生更多的时间成本,对比我把以上内容全部放在了↓↓↓想要的可以自拿喔!谢谢大家观看!