HarmonyOS中animateTo如何结束动画

要实现一个翻页功能,在手势的onActionEnd里调用翻页动画,即animateTo,但下次手势开始时onActionStart需要结束之前的动画,请问如何实现?

HarmonyOS
2024-08-10 11:11:42
浏览
收藏 0
回答 2
待解决
回答 2
按赞同
/
按时间
FengTianYa

animateTo没有暂停功能,可通过三种方式结束当前的动画。

①另外起一个duration为0的动画在新的动画闭包中修改对应的属性来停掉之前的属性动画,示例如下

@Entry 
@Component 
struct Page { 
  @State message: string = 'Hello World'; 
  @State opacityValue: number = 1 
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
          .opacity(this.opacityValue) 
        Button('开始动画').onClick(() => { 
          animateTo({ duration: 5000, iterations: -1, playMode: PlayMode.AlternateReverse }, () => { 
            this.opacityValue = 0 
          }) 
        }) 
        Button('结束动画').onClick(() => { 
          animateTo({ 
            duration: 0, iterations: 1, onFinish: () => { 
              this.opacityValue = 1 
            } 
          }, () => { 
            this.opacityValue = 0.9 
          }) 
        }) 
      } 
      .width('100%') } 
    .height('100%') 
  } 
}

②通过animator中的finish()方法来结束当前动画,参考文档https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-animator-V5

③使用lottie三方库的动画来暂停,参考文档https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/cta-third-party-0000001824909545#section126981820183319

分享
微博
QQ
微信
回复
2024-08-10 18:14:45
起梨花月

animateTo 动画是根据状态变更,UI属性从一个值到另一个值的规则过渡,过渡期间现在支持暂停。

通过 animator.finish();结束

已于2024-11-7 20:01:47修改
分享
微博
QQ
微信
回复
2024-11-07 20:01:37
相关问题
animateTo动画如何直接停止
2542浏览 • 2回复 待解决
animateTo动画如何暂停
892浏览 • 2回复 待解决
HarmonyOS 动画结束回调监听不到
35浏览 • 1回复 待解决
如何监听Slider滑动结束
425浏览 • 1回复 待解决