HarmonyOS 鸿蒙Next 动画如何按倍数缩放

HarmonyOS 鸿蒙Next 动画如何按倍数缩放

文档库里的范例代码，我想让@State wid: number = 100和@State hei: number = 100，按倍数缩放，设置20%，然后动画开始时变成宽高30%，再缩成20%，如何设置？下面的代码是按具体数值设置的，我想按百分比

import { Animator as animator, AnimatorResult } from '@kit.ArkUI';
@Entry
@Component
struct AnimatorTest {
private TAG: string = '[AnimatorTest]'
private backAnimator: AnimatorResult | undefined = undefined
private flag: boolean = false
[@State](/user/State) wid: number = 100
[@State](/user/State) hei: number = 100

create() {
this.backAnimator = animator.create({// 建议使用 this.getUIContext.creatAnimator()接口
duration: 2000,
easing: "linear",
delay: 0,
fill: "forwards",
direction: "alternate",
iterations: -1,
begin: 100,
end: 200
})
this.backAnimator.onFinish = ()=> {
this.flag = true
console.info(this.TAG, 'backAnimator onfinish')
}
this.backAnimator.onRepeat = ()=> {
console.info(this.TAG, 'backAnimator repeat')
}
this.backAnimator.onCancel = ()=> {
console.info(this.TAG, 'backAnimator cancel')
}
this.backAnimator.onFrame = (value:number)=> {
this.wid = value
this.hei = value
}
}

aboutToDisappear() {
// 由于backAnimator在onframe中引用了this, this中保存了backAnimator，
// 在自定义组件消失时应该将保存在组件中的backAnimator置空，避免内存泄漏
this.backAnimator = undefined;
}

build() {
Column() {
Column() {
Column()
.width(this.wid)
.height(this.hei)
.backgroundColor(Color.Red)
}
.width('100%')
.height(300)

Column() {
Row() {
Button('create')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
this.create()
})
}
.padding(10)

Row() {
Button('play')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
this.flag = false
if(this.backAnimator){
this.backAnimator.play()
}
})
}
.padding(10)

Row() {
Button('pause')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
if(this.backAnimator){
this.backAnimator.pause()
}
})
}
.padding(10)

Row() {
Button('finish')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
this.flag = true
if(this.backAnimator){
this.backAnimator.finish()
}
})
}
.padding(10)

Row() {
Button('reverse')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
this.flag = false
if(this.backAnimator){
this.backAnimator.reverse()
}
})
}
.padding(10)

Row() {
Button('cancel')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
if(this.backAnimator){
this.backAnimator.cancel()
}
})
}
.padding(10)

Row() {
Button('reset')
.fontSize(30)
.fontColor(Color.Black)
.onClick(() => {
if (this.flag) {
this.flag = false
if(this.backAnimator){
this.backAnimator.reset({
duration: 3000,
easing: "ease-in",
delay: 0,
fill: "forwards",
direction: "alternate",
iterations: 3,
begin: 100,
end: 300
})
}
} else {
console.info(this.TAG, 'Animation not ended')
}
})
}
.padding(10)
}
}
}
}