鸿蒙应用开发-动画

1. 属性动画

组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。

  • 支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。
ts 复制代码
@Entry
@Component
struct Index {
  @State
  widthSize: number = 100
  @State
  heightSize: number = 40

  build() {
    Column({ space: 15 }) {
      Button('元素动画')
        .width(this.widthSize)
        .height(this.heightSize)
        .onClick(() => {
          this.widthSize = 200
          this.heightSize = 100
        })
        .animation({
          // 动画时间
          duration: 1000,
          // 执行次数
          iterations: -1,
          // 动画曲线
          curve: Curve.Ease,
          // 延时时间
          delay: 1000,
          // 播放模式
          playMode: PlayMode.Alternate
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}
2. 显示动画

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。

ts 复制代码
@Entry
@Component
struct Index {
  @State
  heightSize: number = 40

  build() {
    Column() {
      Text('一级菜单')
        .height(40)
        .onClick(() => {
          animateTo({
            duration: 200
          }, () => {
            this.heightSize = this.heightSize === 40 ? 0 : 40
          })
        })
      Column() {
        Text('一级菜单')
          .height(this.heightSize)
        Text('一级菜单')
          .height(this.heightSize)
      }
    }
    .backgroundColor('#069')
  }
}
3. 元素共享转场

当路由进行切换时,可以通过设置组件的 sharedTransition 属性将该元素标记为共享元素并设置对应的共享元素转场动效。

  • Index.ets
ts 复制代码
import router from '@ohos.router'
@Entry
@Component
struct Index {
  build() {
    Row({ space: 15 }) {
      Column({ space: 10 }){
        Image($rawfile('apple.png'))
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('apple', { duration: 500 })
        Text('鸣春谷 正宗甘肃特产花牛水果苹果 【天水直发】 4.5-5斤中果A(约13-16个)')
          .sharedTransition('text', { duration: 500 })
      }
      .padding(15)
      .width('50%')
      .onClick(() => {
        router.pushUrl({
          url: 'pages/DetailPage'
        })
      })
    }
    .width('100%')
  }
}
  • DetailPage.ets
ts 复制代码
@Entry
@Component
struct DetailPage {
  build() {
    Column({ space: 15 }) {
      Column({ space: 10 }){
        Image($rawfile('apple.png'))
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('apple', { duration: 500 })
        Text('鸣春谷 正宗甘肃特产花牛水果苹果 【天水直发】 4.5-5斤中果A(约13-16个)')
          .fontSize(18)
          .sharedTransition('text', { duration: 500 })
      }
      .padding(15)
    }
    .height('100%')
    .width('100%')
  }
}
4. 拖动手势-阻尼和磁吸

拖动手势(PanGesture)

  • 拖动手势用于触发拖动手势事件,滑动达到最小滑动距离(默认值为5vp)时拖动手势识别成功。

实现下拉刷新效果:

1.使用 Stack 堆叠下拉刷新容器和列表容器

2.使用手势事件 PanGesture 实现拖动列表容器

3.使用 animateTo 实现磁吸动画效果

4.拖动距离超出阀值,模拟开启加载效果,控制文字显示和动画

ts 复制代码
import promptAction from '@ohos.promptAction'
@Entry
@Component
struct Index {
  @State
  translateY: number = 0
  @State
  text: string = '下拉即可刷新'
  @State
  loading: boolean = false

  ease (originValue: number = 0) {
    const space = 60
    const damp = 0.3
    if ( originValue > space ) {
      return space + ( originValue - space ) * damp
    }
    return originValue
  }

  build() {
    Stack({ alignContent: Alignment.Top }) {
      Row() {
        if (this.loading) {
          LoadingProgress()
            .width(32)
            .aspectRatio(1)
        }
        Text(this.text)
          .fontColor('#999')
          .width(100)
      }
      .height(100)

      List() {

      }
      .backgroundColor('#fff')
      .height('100%')
      .width('100%')
      .translate({ y: this.translateY })
      .gesture(
        PanGesture()
          .onActionUpdate((event: GestureEvent) => {
            this.translateY = this.ease(event.offsetY)
            if ( this.translateY > 100 ) {
              this.text = '释放立即刷新'
            }
          })
          .onActionEnd((event: GestureEvent) => {
            if (this.translateY > 100) {
              this.loading = true
              this.text = '正在刷新中...'
              animateTo({ duration: 300 }, () => {
                this.translateY = 100
              })
              // 加载数据
              setTimeout(() => {
                this.loading = false
                this.text = ''
                animateTo({ duration: 300, onFinish: () => this.text = '下拉即可刷新' }, () => {
                  this.translateY = 0
                })
                promptAction.showToast({ message: '刷新成功' })
              }, 2000)
            } else {
              animateTo({ duration: 300 }, () => {
                this.translateY = 0
              })
            }
          })
      )
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f3f4f5')
  }
}

👀关注公众号:Android老皮!!!欢迎大家来找我探讨交流👀

相关推荐
猫林老师6 小时前
HarmonyOS分布式硬件共享:调用手机摄像头的手表应用
华为·交互·harmonyos
前端世界10 小时前
HarmonyOS应用开发指南:Toast无法显示的完整排查流程与实战案例
华为·harmonyos
安卓开发者12 小时前
鸿蒙NEXT Wear Engine穿戴侧应用开发完全指南
ubuntu·华为·harmonyos
安卓开发者12 小时前
鸿蒙Next振动开发指南:打造沉浸式触觉反馈体验
华为·harmonyos
Devil枫12 小时前
HarmonyOS屏幕方向适配指南
华为·harmonyos
li理15 小时前
鸿蒙Image Kit深度解析:从图片解码到高级特效处理
harmonyos
li理15 小时前
鸿蒙相机开发中篇:自定义 UI 与拍摄控制
harmonyos
鸿蒙小白龙20 小时前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
喵手21 小时前
【参赛心得】从“碰一碰”到“服务流转”:HarmonyOS创新赛金奖作品“智游文博”全流程复盘!
华为·harmonyos·鸿蒙应用开发·1024征文
鸿蒙小白龙1 天前
OpenHarmony平台大语言模型本地推理:llama深度适配与部署技术详解
人工智能·语言模型·harmonyos·鸿蒙·鸿蒙系统·llama·open harmony