diff --git a/entry/src/main/ets/pages/ImageAnimatorPage.ets b/entry/src/main/ets/pages/ImageAnimatorPage.ets index 9269280..a783235 100644 --- a/entry/src/main/ets/pages/ImageAnimatorPage.ets +++ b/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%") } } \ No newline at end of file