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

93 lines
3.7 KiB
Plaintext

/*
* 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 { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife"
@Entry
@ComponentV2
struct ImageAnimatorPage {
@Local animatorOption: AnimatorOption = new AnimatorOption({
state: AnimationStatus.Running,
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")
}
})
@Local animatorOption1: AnimatorOption = new AnimatorOption({
state: AnimationStatus.Initial
})
@Local animatorOption2: AnimatorOption = new AnimatorOption({
state: AnimationStatus.Initial,
reverse: true
})
build() {
Column(){
Flex(){
Button($r('app.string.Play')).onClick(()=>{
this.animatorOption.state = AnimationStatus.Running
})
Button($r('app.string.Pause')).onClick(()=>{
this.animatorOption.state = AnimationStatus.Paused
})
Button($r('app.string.Stop')).onClick(()=>{
this.animatorOption.state = AnimationStatus.Stopped
})
Button($r('app.string.Infinite_loop')).onClick(()=>{
this.animatorOption.iterations = -1
})
Button($r('app.string.Play_once')).onClick(()=>{
this.animatorOption.iterations = 1
})
Button($r('app.string.Play_twice')).onClick(()=>{
this.animatorOption.iterations = 2
})
}
ImageKnifeAnimatorComponent({
imageKnifeOption:new ImageKnifeOption({
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}),animatorOption:this.animatorOption
}).width(200).height(200).backgroundColor(Color.Orange).margin({top:30})
Text($r('app.string.Display_the_first_frame')).fontSize(20)
ImageKnifeAnimatorComponent({
imageKnifeOption:new 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:new 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%")
}
}