中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
仿照keyframes实现效果
微信扫码分享
在实现类似效果时,可以采用delay动画的方式,或者在onFinish回调函数中触发新的动画,以确保操作的连贯性和效果的一致性。
参考代码如下:
@Entry @Component struct AnimateToExample { @State widthSize: number = 250; @State heightSize: number = 100; @State rotateAngle: number = 0; private flag: boolean = true; @State opacityValue: number = 1; build() { Column() { Button('change size') .width(this.widthSize) .height(this.heightSize) .margin(30) .opacity(this.opacityValue) .onClick(() => { if (this.flag) { animateTo({ duration: 2000, curve: Curve.EaseOut, iterations: 1, playMode: PlayMode.Normal, onFinish: () => { animateTo({ duration: 2000, curve: Curve.EaseOut, iterations: 1, playMode: PlayMode.Normal, onFinish: () => { } }, () => { this.opacityValue = 0.2; }) } }, () => { this.opacityValue = 0.5; }) } }) }.width('100%').margin({ top: 5 }) } }
在实现类似效果时,可以采用delay动画的方式,或者在onFinish回调函数中触发新的动画,以确保操作的连贯性和效果的一致性。
参考代码如下: