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
微信
回复
1天前
相关问题
animateTo动画如何暂停
727浏览 • 2回复 待解决
animateTo动画如何直接停止
2387浏览 • 2回复 待解决
如何监听Slider滑动结束
289浏览 • 1回复 待解决
HarmonyOS 如何实现RippleView动画
182浏览 • 1回复 待解决
HarmonyOS 如何实现WaveView动画
190浏览 • 1回复 待解决
HarmonyOS如何实现动态缩放动画
368浏览 • 1回复 待解决
HarmonyOS 如何实现音频声浪动画
391浏览 • 1回复 待解决
HarmonyOS 动画中途如何终止?
136浏览 • 1回复 待解决
HarmonyOS 如何实现旋转动画
249浏览 • 1回复 待解决
属性动画如何实现宽高动画效果
1864浏览 • 1回复 待解决
鸿蒙怎么实现动画翻转效果
10226浏览 • 2回复 待解决
HarmonyOS 属性动画中途如何停止?
192浏览 • 1回复 待解决
如何应用属性动画实现宽高的动画
258浏览 • 1回复 待解决
HarmonyOS 如何实现放大缩小的动画
219浏览 • 1回复 待解决