补充ImageKnifeAnimatorComponent组件首帧和最后一阵样例

Signed-off-by: zgf <zenggaofeng2@h-partners.com>

entry/src/main/ets/pages/ImageAnimatorPage.ets

@@ -19,7 +19,29 @@ import { AnimatorOption, ImageKnifeAnimatorComponent } from "@ohos/libraryimagek
 struct ImageAnimatorPage {
   @State animatorOption: AnimatorOption = {
     state: AnimationStatus.Running,
-    iterations: -1
+    iterations: 1,
+    onFinish:()=>{
+      console.log("ImageKnifeAnimatorComponent animatorOption onFinish")
+    },
+    onStart:()=>{
+      console.log("ImageKnifeAnimatorComponent animatorOption onStart")
+    },
+    onPause:()=>{
+      console.log("ImageKnifeAnimatorComponent animatorOption onPause")
+    },
+    onCancel:()=>{
+      console.log("ImageKnifeAnimatorComponent animatorOption onCancel")
+    },
+    onRepeat:()=>{
+      console.log("ImageKnifeAnimatorComponent animatorOption onRepeat")
+    }
+  }
+  @State animatorOption1: AnimatorOption = {
+    state: AnimationStatus.Initial
+  }
+  @State animatorOption2: AnimatorOption = {
+    state: AnimationStatus.Initial,
+    reverse: true
   }
   build() {
     Column(){
@@ -50,6 +72,22 @@ struct ImageAnimatorPage {
           errorholderSrc:$r('app.media.failed')
         },animatorOption:this.animatorOption
       }).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
+      Text($r('app.string.Display_the_first_frame')).fontSize(20)
+      ImageKnifeAnimatorComponent({
+        imageKnifeOption:{
+          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
+          placeholderSrc:$r('app.media.loading'),
+          errorholderSrc:$r('app.media.failed')
+        },animatorOption:this.animatorOption1
+      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
+      Text($r('app.string.Display_the_last_frame')).fontSize(20)
+      ImageKnifeAnimatorComponent({
+        imageKnifeOption:{
+          loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
+          placeholderSrc:$r('app.media.loading'),
+          errorholderSrc:$r('app.media.failed')
+        },animatorOption:this.animatorOption2
+      }).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
     }.width("100%").height("100%")
   }
 }