中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
通过调整animateTo函数中的duration属性来控制水波纹效果的播放速度,duration定义了动画持续的时间,单位为毫秒(ms)。同时,通过设置iterations属性可让动画无限次执行。下面的代码实现展示了如何设置不同的duration以控制播放速度:
animateTo
duration
iterations
@Entry @Component struct Demo { @State scaleList: number[] = [] @State opacityList: number[] = [] private cloneScaleList: number[] = [] private cloneOpacityList: number[] = [] private scaleRatio:number=0.7 aboutToAppear(): void { this.scaleList = new Array(3).fill('').map((item: string, index: number) => 1 + index * this.scaleRatio) this.opacityList = new Array(3).fill('').map((item: string, index: number) => (3 - index)/10 ) this.cloneScaleList = this.scaleList.slice() this.cloneOpacityList = this.opacityList.slice() } build() { Column({ space: 50 }) { Stack() { ForEach(this.scaleList, (item: number, index: number) => { Column() { } .width(50) .height(50) .borderRadius(25) .backgroundColor('#1463F4') .opacity(this.opacityList[index]) .scale({ x: this.scaleList[index], y: this.scaleList[index] }) .onAppear(() => { animateTo({ duration: 800, iterations: -1 }, () => { // Duration is set to 800ms for faster animation this.scaleList[index] = this.cloneScaleList[index] + this.scaleRatio this.opacityList[index] = this.cloneOpacityList[index] - 0.1 }) }) }, (item: number, index: number) => index.toString()) Image($r('app.media.app_icon')).width(50).borderRadius(25) } }.height('100%').width('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center) } }
通过调整
animateTo
函数中的duration
属性来控制水波纹效果的播放速度,duration
定义了动画持续的时间,单位为毫秒(ms)。同时,通过设置iterations
属性可让动画无限次执行。下面的代码实现展示了如何设置不同的duration
以控制播放速度: