新增gif播放次数
Signed-off-by: zenggaofeng <zenggaofeng2@h-partners.com>
This commit is contained in:
zenggaofeng
parent
4d5728dc3a
commit
f57fa66fab
|
|
@ -1,4 +1,5 @@
|
|||
## 2.1.2-rc.12
|
||||
- 新增gif播放次数功能
|
||||
- 新增磁盘预加载返回文件路径接口prefetchToDiskCache
|
||||
|
||||
## 2.1.2-rc.11
|
||||
|
|
|
|||
54
README.md
54
README.md
|
|
@ -107,33 +107,33 @@ imageKnifeOption = {
|
|||
|
||||
### ImageKnifeOption参数列表
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
| ---------------------------- | ------------------------------------------------------------ |-----------------------------------------------|
|
||||
| loadSrc | string\| PixelMap\ |Resource | 图片数据源 |
|
||||
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
|
||||
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
|
||||
| dontAnimateFlag | boolean | gif加载展示一帧（可选） |
|
||||
| placeholderSrc | PixelMap\| Resource | 占位图数据源 |
|
||||
| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） |
|
||||
| errorholderSrc | PixelMap\| Resource | 错误占位图数据源 |
|
||||
| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） |
|
||||
| retryholderSrc | PixelMap\| Resource | 重试占位图数据源 |
|
||||
| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） |
|
||||
| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） |
|
||||
| thumbSizeDelay | number | 设置缩略图展示时间（可选） |
|
||||
| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） |
|
||||
| displayProgress | boolean | 设置是否展示下载进度条（可选） |
|
||||
| canRetryClick | boolean | 设置重试图层是否点击重试（可选） |
|
||||
| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） |
|
||||
| isCacheable | boolean | 是否开启一级内存缓存（可选） |
|
||||
| gif | {<br/> // 返回一周期动画gif消耗的时间<br/> loopFinish?: (loopTime?) => void<br/> // gif播放速率相关<br/> speedFactory?: number<br/> // 直接展示gif第几帧数据<br/> seekTo?: number<br/> } | GIF播放控制能力（可选） |
|
||||
| transformation | BaseTransform<PixelMap> | 单个变换（可选） |
|
||||
| transformations | Array<BaseTransform<PixelMap>> | 多个变换,目前仅支持单个变换（可选） |
|
||||
| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） |
|
||||
| signature | ObjectKey | 自定key（可选） |
|
||||
| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** |
|
||||
| imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
|
||||
| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 |
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
| ---------------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|
|
||||
| loadSrc | string\ | PixelMap\ |Resource | 图片数据源 |
|
||||
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
|
||||
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
|
||||
| dontAnimateFlag | boolean | gif加载展示一帧（可选） |
|
||||
| placeholderSrc | PixelMap\ | Resource | 占位图数据源 |
|
||||
| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） |
|
||||
| errorholderSrc | PixelMap\ | Resource | 错误占位图数据源 |
|
||||
| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） |
|
||||
| retryholderSrc | PixelMap\ | Resource | 重试占位图数据源 |
|
||||
| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） |
|
||||
| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） |
|
||||
| thumbSizeDelay | number | 设置缩略图展示时间（可选） |
|
||||
| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） |
|
||||
| displayProgress | boolean | 设置是否展示下载进度条（可选） |
|
||||
| canRetryClick | boolean | 设置重试图层是否点击重试（可选） |
|
||||
| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） |
|
||||
| isCacheable | boolean | 是否开启一级内存缓存（可选） |
|
||||
| gif | {<br/> // 返回一周期动画gif消耗的时间<br/> loopFinish?: (loopTime?) => void<br/> // gif播放速率相关<br/> speedFactory?: number<br/> // 直接展示gif第几帧数据<br/> seekTo?: number<br/> playTimes?: number<br/> } | GIF播放控制能力（可选） |
|
||||
| transformation | BaseTransform<PixelMap> | 单个变换（可选） |
|
||||
| transformations | Array<BaseTransform<PixelMap>> | 多个变换,目前仅支持单个变换（可选） |
|
||||
| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） |
|
||||
| signature | ObjectKey | 自定key（可选） |
|
||||
| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** |
|
||||
| imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
|
||||
| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 |
|
||||
|
||||
其他参数只需要在ImageKnifeOption对象上按需添加即可。
|
||||
|
||||
|
|
|
|||
|
|
@ -70,7 +70,10 @@ struct IndexFunctionDemo {
|
|||
console.log("测试ImageKnifeComponent图片高度自适应")
|
||||
router.pushUrl({ url: "pages/testImageKnifeAutoHeightPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
Button("测试gif播放次数")
|
||||
.onClick(() => {
|
||||
router.pushUrl({ url: "pages/testGifPlayTimesPage" });
|
||||
}).margin({ top: 15 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
/*
|
||||
* Copyright (C) 2024 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestGifPlayTimesPage {
|
||||
@State ImageKnifeOption1: ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.icon'),
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Column() {
|
||||
Text("测试gif播放次数").fontSize(25)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载网络gif").onClick(() => {
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
}
|
||||
})
|
||||
Button("设置gif播放1次").onClick(() => {
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
gif: {
|
||||
playTimes: 1
|
||||
}
|
||||
}
|
||||
})
|
||||
Button("设置gif播放2次").onClick(() => {
|
||||
this.ImageKnifeOption1 = {
|
||||
loadSrc: "https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
gif: {
|
||||
playTimes: 2
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(300).height(300).borderWidth(3)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -18,6 +18,7 @@
|
|||
"pages/testImageKnifeOptionChangedPage3",
|
||||
"pages/testImageKnifeOptionChangedPage4",
|
||||
"pages/testImageKnifeOptionChangedPage5",
|
||||
"pages/testGifPlayTimesPage",
|
||||
"pages/compressPage",
|
||||
"pages/testAllCacheInfoPage",
|
||||
"pages/cropImagePage2",
|
||||
|
|
|
|||
|
|
@ -600,7 +600,7 @@ export class ImageKnife {
|
|||
request.progressFunc.asyncSuccess(percent);
|
||||
}
|
||||
});
|
||||
taskpool.execute(task).then((data: ESObject) => {
|
||||
taskpool.execute(task,request.priority).then((data: ESObject) => {
|
||||
if (usageType == Constants.PLACE_HOLDER) {
|
||||
if ((typeof (data as PixelMap).isEditable) == 'boolean') {
|
||||
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, data as PixelMap);
|
||||
|
|
|
|||
|
|
@ -46,6 +46,8 @@ export struct ImageKnifeComponent {
|
|||
private gifLoopDuration: number = 0
|
||||
private startGifLoopTime: number = 0
|
||||
private endGifLoopTime: number = 0
|
||||
// gif 播放次数
|
||||
private playTimes: number = 0
|
||||
// 抗锯齿属性
|
||||
private imageSmoothingQuality: ImageSmoothingQuality = 'low';
|
||||
private imageSmoothingEnabled: boolean = true;
|
||||
|
|
@ -812,6 +814,14 @@ export struct ImageKnifeComponent {
|
|||
}
|
||||
// draw Frame
|
||||
this.drawFrame(this.renderFrames_frames, this.renderFrames_index, this.renderFrames_context, this.renderFrames_compWidth, this.renderFrames_compHeight);
|
||||
// gif播放次数
|
||||
if (this.renderFrames_frames != undefined && this.renderFrames_index === (this.renderFrames_frames.length - 1) && this.imageKnifeOption.gif != undefined ) {
|
||||
this.playTimes++
|
||||
if (this.imageKnifeOption.gif.playTimes == this.playTimes){
|
||||
this.autoPlay = false
|
||||
this.playTimes = 0
|
||||
}
|
||||
}
|
||||
//如果gif动图只有一帧的情况下，不进行后面代码的逐帧绘制循环
|
||||
if (this.renderFrames_frames != undefined && this.renderFrames_frames.length <= 1) {
|
||||
return
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ export interface GifOptions{
|
|||
loopFinish?: (loopTime?:number) => void
|
||||
speedFactory?: number
|
||||
seekTo?: number
|
||||
playTimes?: number
|
||||
}
|
||||
export interface TransformOptions{
|
||||
transformType: number,
|
||||
|
|
|
|||
Loading…
Reference in New Issue