鸿蒙笔记--动画

        这一节主要了解一下鸿蒙的动画，动画的引入主要是为了提升用户体验、增加用户反馈和互动感、引导用户操作以及缓解等待带来的不适感。

  属性动画:

Index.ets

@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 = 210
          this.heightSize = 90
        })
        .animation({
          duration: 1000,
          delay: 1000,       
          curve: 'cubic-bezier(.57,.58,.75,1.33)',
          //curve: Curve.Linear         
          iterations: -1, 
          playMode: PlayMode.Alternate
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

显示动画

Index.ets

@Entry
@Component
struct Index {
  @State
  heightSize: number = 40

  build() {
    Column() {
      Text('一级菜单')
        .height(40)
        .onClick(() => {
          animateTo({
            duration: 500
          }, () => {
            this.heightSize = this.heightSize === 40 ? 0 : 40
          })
        })
      Column() {
        Text('一级菜单')
          .height(this.heightSize)
        Text('一级菜单')
          .height(this.heightSize)
      }
    }
    .backgroundColor('#069')
  }
}

这个和Android中的补间动画优点类似。

页面间元素共享动画

       页面间元素共享动画是指在两个页面之间进行切换时，通过特定的转场动效实现某些元素的平滑过渡。这种动画通常用于提升用户体验，使页面之间的跳转更加流畅和有趣。具体来说，当路由进行切换时，可以通过设置组件的sharedTransition属性将该元素标记为共享元素并设置对应的共享元素转场动效。这些属性包括id、duration、curve、delay、motionPath、zIndex和type等.它适用于多种场景，如图片的放大缩小、列表项的动态插入和移除等。例如，如果同一个元素在不同页面间的大小有明显差异，可以使用共享元素转场动画衔接，达到放大缩小视图的效果。在开发过程中，可以通过编写相应的代码来配置和实现这些动效。例如，通过设置sharedTransition的id和其他参数，可以使两个页面间的相同元素实现平滑过渡。

Index.ets

import router from '@ohos.router'
@Entry
@Component
struct Index {
  build() {
    Column() {
      Column({ space: 10 }){
        Image($rawfile('ai.png'))
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('ai', { duration: 500 })
        Text('ai美女 这是一张由AI产生的美女...')
          .sharedTransition('text', { duration: 500 })
      }
      .width('50%')
      .onClick(() => {
        router.pushUrl({
          url: 'pages/DetailPage'
        })
      })
    }
    .height('100%')
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }
}

DetailPage.ets

@Entry
@Component
struct DetailPage {
  build() {
     Column() {
      Column({ space: 10 }){
        Image($rawfile('ai.png'))
          .width('100%')
          .aspectRatio(1)
          .sharedTransition('ai', { duration: 500 })
        Text('ai美女 这是一张由AI产生的美女...')
          .fontSize(24)
          .sharedTransition('text', { duration: 500 })
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}