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%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.

②通过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动画如何暂停
1656浏览 • 2回复 待解决
animateTo动画如何直接停止
3350浏览 • 2回复 待解决
HarmonyOS 如何监控动画结束
795浏览 • 1回复 待解决
HarmonyOS animateTo或animation动画如何取消
1046浏览 • 1回复 待解决
HarmonyOS 怎么停止animateTo动画
350浏览 • 1回复 待解决
HarmonyOS怎么停止animateTo动画
237浏览 • 0回复 待解决
HarmonyOS 关于animateTo显示动画加载时机
1114浏览 • 1回复 待解决
HarmonyOS animateTo是否能够打断动画
682浏览 • 1回复 待解决
HarmonyOS 动画结束回调监听不到
632浏览 • 1回复 待解决
如何监听Slider滑动结束
1198浏览 • 1回复 待解决