#在HarmonyOS星河遨游# 熟悉一下服务卡片新的动画能力 原创

懂事的小马
发布于 2024-8-29 11:26
浏览
0收藏

前言

随着不同版本HarmonyOS发布,服务卡片的能力也经历了几次变革,从最开始的只支持JS语言,到后来增加了对ArKTS语言的基础支持,现在又丰富了ArkTS动画的效果。对服务卡片增加动画效果,是个比较小众的概念,用好它会锦上添花,没有它无伤大雅,有它用不好反而画蛇添足,既然有了这个功能,就努力去了解一下它,想不出具体可以用到哪里,就做一个无聊的切换卡片吧。

ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场动画,我们就通过一个小示例简单熟悉一下它们的具体用法,这个示例主要功能是,用户点击卡片,会来回切换为白天场景和夜晚场景,白天场景太阳会自动旋转,夜晚场景星星会自动闪烁。

效果预览

#在HarmonyOS星河遨游# 熟悉一下服务卡片新的动画能力-鸿蒙开发者社区

显式动画

animateTo,是显式动画接口,用来指定由于闭包代码导致的状态变化插入过渡动效。
示例中的星星动画,就是采用的显式动画。

Image($r('app.media.star'))
  .width('5%')
  .height('5%')
  .margin({ top: 40, left: 20 })
  .opacity(this.opacityValue + 0.3)
  .onAppear(() => {
    animateTo({
      curve: Curve.EaseInOut,
      playMode: PlayMode.AlternateReverse,
      onFinish: () => {
        this.opacityValue = 0.7;
      }
    }, () => {
      this.opacityValue = 0.2;
    })
  })

opacityValue 初始值是 1。

@State opacityValue: number = 1;

闭包代码对this.opacityValue赋值为0.2,很显然导致了opacityValue状态变化,所以系统会自动插入过度动画,有了闪一下的效果。

#在HarmonyOS星河遨游# 熟悉一下服务卡片新的动画能力-鸿蒙开发者社区

属性动画

animation,这个属性是组件属性动画实现,组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
示例中的太阳动画,就是采用的属性动画。

Image($r('app.media.sun'))
  .width('40%')
  .height('40%')
  .margin(10)
  .rotate({ angle: this.rotateAngle })
  .animation({
    curve: Curve.EaseInOut,
    playMode: PlayMode.AlternateReverse,
    onFinish: () => {
      this.rotateAngle = 0;
    }
  })
  .onAppear(() => {
      this.rotateAngle = 180;
  })

rotateAngle 的初始值为0。

@State rotateAngle: number = 0;

当控件显示时,值变为180,这样系统也会自动加入渐变过渡效果,太阳就转起来了。

#在HarmonyOS星河遨游# 熟悉一下服务卡片新的动画能力-鸿蒙开发者社区

转场动画

转场动画主要通过transition属性配置转场参数,在组件插入和删除时显示过渡动效,主要用于容器组件中的子组件插入和删除时,显示动画效果。

示例中的白天黑夜切换,是采用的转场动画,

@Builder DayCard() {
  Stack() {
    Image($r('app.media.daybg'))
      .width('100%')
      .height('100%')
    Image($r('app.media.sun'))
      .width('40%')
      .height('40%')
      .margin(10)
  }
  .alignContent(Alignment.TopStart)
  .transition({ type: TransitionType.Insert, opacity: 0 })
  .transition({ type: TransitionType.Delete, opacity: 1 })
}

@Builder NightCard() {
  Stack() {
    Image($r('app.media.nightbg'))
      .width('100%')
      .height('100%')
    Image($r('app.media.star'))
      .width('5%')
      .height('5%')
      .margin({ top: 40, left: 20 })
  }
  .alignContent(Alignment.TopStart)
  .transition({ type: TransitionType.Insert, opacity: 0 })
  .transition({ type: TransitionType.Delete, opacity: 1 })
}

我们通过transition属性设置DayCard和NightCard在插入和删除时显示不同的透明度,实现过度效果,要激活动画,还需要在根容器的点击事件中修改isDay变量。

.onClick(() => {
  animateTo({ duration: 8000 }, () => {
    this.isDay = !this.isDay;
  })
})

这样白天夜晚就可以平稳过渡了。

#在HarmonyOS星河遨游# 熟悉一下服务卡片新的动画能力-鸿蒙开发者社区

总结

服务卡片提供的这三种形式动画和页面中支持的动画都差不多,但也有一些限制,服务卡片中的动画时长、播放速度、延迟时间和播放次数都不支持设置,动画时长默认是1秒,无延迟并且只能播放一次,相信仅有的这些属性也足够开发者使用了。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2024-8-29 11:26:08修改
收藏
回复
举报
回复
    相关推荐