新增gif图暂停播放恢复播放能力

Signed-off-by: zhang_hanyong <zhanghanyong@h-partners.com>
2024-04-16 11:28:35 +08:00 · 2024-04-16 11:28:35 +08:00 · db71776e62
parent ab7dd919f3
commit db71776e62
7 changed files with 102 additions and 8 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,6 +1,7 @@
 ## 2.1.2-rc.13
 - 修改ImageKnife跳过网络，从内存中获取图片 cacheType参数未使用bug
 - 新增WEBP图片解析能力。
+- 新增gif图片支持暂停播放功能

 ## 2.1.2-rc.12
 - 新增gif播放次数功能
--- a/README.md
+++ b/README.md
@ -86,6 +86,10 @@ svg类型图片即可。
 加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`
 GIF图片即可。

+#### 4.1加载GIF图片
+
+更改ImageKnifeOption对象的autoPlay（可选autoPlay = true为开始播放，autoPlay = false为暂停播放）
+
 ### 5.自定义Key
 因为通常改变标识符比较困难或者根本不可能，所以ImageKnife也提供了 签名 API 来混合（你可以控制的）额外数据到你的缓存键中。
 签名(signature)适用于媒体内容，也适用于你可以自行维护的一些版本元数据。
@ -134,6 +138,7 @@ imageKnifeOption = {
 | **drawLifeCycle**            | **IDrawLifeCycle**                                                                                                                                                                                       | **用户自定义实现绘制方案（可选）**                           |
 | imageSmoothingEnabled        | boolean                                                                                                                                                                                                  | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 |
 | imageSmoothingQuality        | AntiAliasing                                                                                                                                                                                             | 抗锯齿属性配置                                       |
+| autoPlay        | boolean                                                                                                                                                                                             | GIF播放暂停控制（可选）                                 |

 其他参数只需要在ImageKnifeOption对象上按需添加即可。

@ -526,6 +531,7 @@ HSP场景适配:
       - testPreloadPage.ets                   # 预加载测试
       - transformPixelMapPage.ets             # 所有类型变换测试  
       - testSingleFrameGifPage.ets            # 单帧gif加载测试
+       - TestStopPlayingGifPage                # gif播放暂停测试
  
       - OptionTestPage.ets                    # 图片缓存测试
       - testManyGifLoadWithPage               # 测试gif加载页面
--- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
+++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
@ -372,6 +372,14 @@ struct IndexFunctionDemo {
              router.pushUrl({ url: 'pages/testImageKnifeCache' });
            }).margin({ top: 5, left: 3 })
        }.width('100%').height(60).backgroundColor(Color.Pink)
+
+        Text('测试gif暂停播放属性').fontSize(15)
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Button('测试gif暂停播放属性')
+            .onClick(() => {
+              router.pushUrl({ url: 'pages/testStopPlayingGifPage' });
+            }).margin({ top: 5, left: 3 })
+        }.width('100%').height(60).backgroundColor(Color.Pink)
      }
    }
    .width('100%')
--- a/entry/src/main/ets/pages/testStopPlayingGifPage.ets
+++ b/entry/src/main/ets/pages/testStopPlayingGifPage.ets
@ -0,0 +1,75 @@
+/*
+ * 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 } from '@ohos/libraryimageknife'
+import { ImageKnifeOption } from '@ohos/libraryimageknife'
+import display from '@ohos.display';
+
+@Entry
+@Component
+struct TestStopPlayingGifPage {
+  @State message: string = 'gif暂停播放测试'
+  @State eventType: string = '';
+  @State options: ImageKnifeOption = {
+    loadSrc: $r('app.media.app_icon'),
+  }
+
+  build() {
+    Column() {
+      Column() {
+        Text(`${this.message}`)
+          .width("300vp")
+          .height("60vp")
+          .textAlign(TextAlign.Center)
+          .fontSize("30fp")
+          .fontWeight(FontWeight.Bold)
+        Button("加载gif图")
+          .margin(16)
+          .onClick(() => {
+            console.log("加载多帧gif")
+            this.options = {
+              loadSrc: $r('app.media.gifSample'),
+              placeholderSrc:$r('app.media.icon_loading'),
+            }
+          })
+        Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+          Text("控制")
+          Button("开启")
+            .onClick(() => {
+              this.options.autoPlay = true;
+            }).margin({ left: 3 })
+
+          Button("暂停")
+            .onClick(() => {
+              this.options.autoPlay = false;
+            }).margin({ left: 3 })
+        }.width('100%')
+        .height(40).backgroundColor(Color.Pink).margin({bottom:5})
+        ImageKnifeComponent({ imageKnifeOption: this.options })
+          .margin(16)
+          .width(300)
+          .height(300)
+      }
+      .width("100%")
+      .height("100%")
+      .justifyContent(FlexAlign.Center)
+    }
+    .width("100%")
+    .height("100%")
+  }
+  aboutToAppear() {
+    console.log('CTT：TestManyNetImageLoadWithPage display Height: '+ display.getDefaultDisplaySync().height)
+  }
+}
+
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@ -49,6 +49,7 @@
    "pages/testPriorityComponent",
    "pages/testReusePhotoPage",
    "pages/testImageKnifeCache",
-    "pages/webpImageTestPage"
+    "pages/webpImageTestPage",
+    "pages/testStopPlayingGifPage"
  ]
 }
--- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
@ -34,12 +34,13 @@ interface KeyCanvas {
@Component
 export struct ImageKnifeComponent {
  @Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
-  autoPlay: boolean = true
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private hasDisplayRetryholder = false;
  private lastWidth: number = 0
  private lastHeight: number = 0
+  // 当前帧数位置
+  private renderFrames_index = 0;
  // 定时器id
  private gifTimerId: number = -1
  // 完整gif播放时间
@ -764,15 +765,15 @@ export struct ImageKnifeComponent {
    let frames = data.drawGIFFrame?.imageGIFFrames as GIFFrame[]
    LogUtil.log('ImageKnifeComponent gifFrameLength =' + frames.length);
    if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) {
-      this.autoPlay = false;
      context.clearRect(0, 0, compWidth, compHeight)
      this.drawSeekToFrame(frames, context, compWidth, compHeight)
    } else {
-      this.autoPlay = true
      context.clearRect(0, 0, compWidth, compHeight)

      this.renderFrames_frames = frames
-      this.renderFrames_index = 0
+      if (this.imageKnifeOption.autoPlay == undefined) {
+        this.renderFrames_index = 0;
+      }
      this.renderFrames_context = context
      this.renderFrames_compWidth = compWidth
      this.renderFrames_compHeight = compHeight
@ -796,13 +797,13 @@ export struct ImageKnifeComponent {
  private drawSeekToFrame(frames: GIFFrame[], context: CanvasRenderingContext2D, compWidth: number, compHeight: number) {
    if(this.imageKnifeOption.gif != undefined &&  this.imageKnifeOption.gif.seekTo != undefined) {
      for (let i = 0; i < this.imageKnifeOption.gif.seekTo; i++) {
+        this.renderFrames_index = i;
        this.drawFrame(frames, i, context, compWidth, compHeight);
      }
    }
  }

  renderFrames_frames: GIFFrame[] | undefined = undefined
-  renderFrames_index: number = 0;
  renderFrames_context: CanvasRenderingContext2D | undefined = undefined;
  renderFrames_compWidth: number = 0;
  renderFrames_compHeight: number = 0
@ -820,7 +821,7 @@ export struct ImageKnifeComponent {
    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.imageKnifeOption.autoPlay = false;
        this.playTimes = 0
      }
    }
@ -833,7 +834,7 @@ export struct ImageKnifeComponent {
    let end = new Date().getTime();
    let diff = end - start

-    if (this.autoPlay) {
+    if ((this.imageKnifeOption.autoPlay == undefined) || (this.imageKnifeOption.autoPlay)) {

      // 理论上该帧在屏幕上保留的时间
      let stayTime:number= 0
--- a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets
+++ b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets
@ -69,6 +69,8 @@ export interface HeaderOptions {

@Observed
 export class ImageKnifeOption {
+  //控制gif开关
+  autoPlay?: boolean = true;
  // header请求列表
  headerOption?: Array<HeaderOptions>;
  // 主图资源