前言

前面我发布了一篇组件相关知识的文章，但是后续学习过程中又学习了不少组件，以及组件的属性和方法，今天补上。在实际开发中，我们不可避免的会接触到动画，所以我把学习到的动画知识也加到这里面，但是在老师讲解中没有这么多动画，其他的我通过官网学习的，当然也不一定要全部掌握，只要抓住重点就行。 Lets go，让我们开始！！！

组件知识与动画

1. 通用事件

1.1 点击事件onClick

语法：onClick(event: (event?: ClickEvent) => void)

csharp 复制代码

Button('Click', {type: ButtonType.Normal}).width(100).height(50)
          .onClick((event: ClickEvent) => {
            this.text = 'Click Point:' + '\n  screenX:' + event.screenX + '\n  screenY:' + event.screenY
            + '\n  x:' + event.x + '\n  y:' + event.y + '\ntarget:' + '\n  width:'
            + event.target.area.width + '\n  height:' + event.target.area.height + '\ntimestamp' + event.timestamp;
          })

1.2 触摸事件onTouch

当手指在组件上按下、滑动、抬起时触发。

语法：onTouch(event: (event?: TouchEvent) => void)

csharp 复制代码

Button('Touch').height(40).width(100)
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          }
          if (event.type === TouchType.Move) {
            this.eventType = 'Move'
          }
          this.text = 'TouchType:' + this.eventType + '\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y + '\nwidth:'
          + event.target.area.width + '\nheight:' + event.target.area.height
        })

1.3按键事件onKeyEvent

按键事件指组件与键盘、遥控器等按键设备交互时触发的事件（仅适用于所有可获焦组件，例如 Button）。

语法：onKeyEvent(event: (event?: KeyEvent) => void)

csharp 复制代码

Button('KeyEvent')
        .onKeyEvent((event: KeyEvent) => {
          if (event.type === KeyType.Down) {
            this.eventType = 'Down'
          }
          if (event.type === KeyType.Up) {
            this.eventType = 'Up'
          }
          this.text = 'KeyType:' + this.eventType + '\nkeyCode:' + event.keyCode + '\nkeyText:' + event.keyText
        })

2. 属性使用

2.1 设置元素在容器中的对齐方式

语法：.align(Alignment.xxx)

scss 复制代码

Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .fontColor('#36d')
            .align(Alignment.Top)

2.2 设置元素水平方向的布局

语法：.direction(Direction.xxx)

scss 复制代码

          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .fontColor('#36d')
            .align(Alignment.Top)
            .direction(Direction.Ltr)

2.3 position定位（绝对定位）

绝对定位，设置元素左上角相对于父容器左上角偏移位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。

适用于置顶显示、悬浮按钮等组件在父容器中位置固定的场景。

语法：.position({x,y})

css 复制代码

Text('2 position(30, 10)')
            .size({ width: '60%', height: '30' })
            .backgroundColor(0xbbb2cb)
            .border({ width: 1 })
            .fontSize(16)
            .align(Alignment.Start)
            .position({ x: 30, y: 10 })

2.4 offset定位（相对定位）

相对定位，设置元素相对于自身的偏移量。设置该属性，不影响父容器布局，仅在绘制时进行位置调整。

语法：.offset({x,y})

scss 复制代码

Text('2  offset(15, 30)')
            .size({ width: 120, height: '50' })
            .backgroundColor(0xbbb2cb)
            .border({ width: 1 })
            .fontSize(16)
            .align(Alignment.Start)
            .offset({ x: 15, y: 30 })

2.5 layoutWeight伸缩占比

父容器尺寸确定时，设置了layoutWeight属性的子元素与兄弟元素占主轴尺寸按照权重进行分配，忽略元素本身尺寸设置，表示自适应占满剩余空间。默认值：0

语法：layoutWeight(参数)

scss 复制代码

Column({space:10}){
        Text(this.item.author)
          .fontWeight(FontWeight.Bold)
        Text(this.item.content)
        .fontSize(16)
        .fontColor('#565656')
        .lineHeight(20)
        Row(){
          Text(`${this.item.time} .ip${this.item.area}`)
          .fontSize(12)
          .fontColor('#c3c4c5')
          Row(){
            Image($r('app.media.icon'))
              .width(20)
              .borderRadius(16)
              .aspectRatio(1)
              .fillColor('#c3c4c5')
            Text(this.item.likeNum?.toString())
              .fontColor('#c3c4c5')
              .fontSize(12)
          }
          .onClick(() => {
            if(this.item.likeFlag) {
              this.item.likeNum--
              this.item.likeFlag=!this.item.likeFlag
            }else{
              this.item.likeNum++
              this.item.likeFlag=!this.item.likeFlag
            }
          })
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')
      }
      .alignItems(HorizontalAlign.Start)
      .layoutWeight(1)

2.6 aspectRatio宽高比

指定当前组件的宽高比，aspectRatio = width/height。

语法：.aspectRatio()

scss 复制代码

Image(this.item.avatar)
      .width(32)
      .aspectRatio(1)

3. 组件扩展

3.1 Checkbox复选框组件

语法：checkbox({name,group})

name:多选框名称。
group:多选框的群组名称。未配合使用CheckboxGroup组件时，此值无用。

onChange事件能获取到复选框改变的bool值。

3.2 复选框组

使用时主/头复选框用checkboxGroup，里面的子复选框用checkbox，全部添加group属性

php 复制代码

CheckboxGroup({group:'sex'})
Checkbox({name: '男',group:'sex'})
Checkbox({name: '男',group:'sex'})

3.3 日期组件DatePikcker

日期选择器组件，用于根据指定日期范围创建日期滑动选择器。

语法：DatePicker({start,end,selected})

start:指定选择器的起始日期。默认值：Date('1970-1-1')
end:指定选择器的结束日期。默认值：Date('2100-12-31')
selected:设置选中项的日期。默认值：当前系统日期

属性和方法：

.lunar属性可以指定是否显示农历，- true：展示农历。- false：不展示农历。

onChange(value => {})方法value返回的值就是当组件改变时，选中的值

javascript 复制代码

        DatePicker({selected:new Date()})
          .lunar(this.isLunar)
          .onChange((value) => {
            console.log(JSON.stringify(value))
          })

3.4 路由组件Navigator

路由容器组件，提供路由跳转能力。

语法：Navigator({target,type})

target:是指定跳转目标页面的路径。
type:指定路由方式。默认值：NavigationType.Push

php 复制代码

Navigator({
          target: "pages/ThirdPage",
          type: NavigationType.Replace
        }){
          Text('跳转')
        }
        .params({
          info: "传递信息"
        })

3.5 弹性布局Flex组件

以弹性方式布局子组件的容器组件

语法：Flex({ direction: FlexDirection, wrap: FlexWrap, justifyContent: FlexAlign, alignItems: ItemAlign, alignContent: FlexAlign })

scss 复制代码

Flex({
          direction:FlexDirection.Column,
          wrap:FlexWrap.Wrap,
          justifyContent:FlexAlign.SpaceBetween,
          alignItems:ItemAlign.Center,
          alignContent:FlexAlign.SpaceBetween
        }){
          Text('123')
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
          Text('123')
            .width(100)
            .height(100)
            .backgroundColor(Color.Pink)
          Text('123')
            .width(100)
            .height(100)
            .backgroundColor(Color.Blue)
          Text('123')
            .width(100)
            .height(100)
            .backgroundColor(Color.Gray)
        }

3.6 网络Web组件

提供具有网页显示能力的Web组件，@ohos.web.webview提供web控制能力。

*注意:*示例效果请以真机运行为准，当前IDE预览器不支持。

语法：Web(options: { src: ResourceStr, controller: WebviewController | WebController})

javascript 复制代码

import webview from '@ohos.web.webview'

webDome : WebviewController = new webview.WebviewController()

Web({
        src: 'https://www.bilibili.com/video/BV1pb4y1g75mp=45&vd_source=4069d248712cfa11055323a8a71b24e2',
        controller: this.webDome
      })

4.动画

4.1 动画分类

按照页面分类动画：

按照基础能力分类动画：

4.2 显示动画animateTo()

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

语法：animateTo(value: AnimateParam, event: () => void)

value:设置动画效果相关参数。

duration:动画持续时间，单位为毫秒。默认值：1000

curve:动画曲线。默认值：Curve.EaseInOut

delay:单位为ms(毫秒)，默认不延时播放。默认值：0

iterations:默认播放一次，设置为-1时表示无限次播放。默认值：1

playMode:设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal

onFinish:动效播放完成后的回调函数。

event:指定显示动效的闭包函数，在闭包函数中导致的状态变化系统会自动插入过渡动画。

javascript 复制代码

Button('动画').onClick((event: ClickEvent) => {
          animateTo({
            duration:1000,
            curve:Curve.Linear,
            delay:500,
            iterations:3,
            // playMode:PlayMode.Alternate,
            onFinish: () => {
              console.log('动画已经完成!')
            }
          }, () => {
            this.animateMode = HorizontalAlign.End
          })
        })

4.3 属性动画.animation

通过添加属性*.animation*可以对元素进行动画效果

语法：.animation(value: AnimateParam)

value:设置动画效果相关参数。

duration:动画持续时间，单位为毫秒。默认值：1000

curve:动画曲线。默认值：Curve.EaseInOut

delay:单位为ms(毫秒)，默认不延时播放。默认值：0

iterations:默认播放一次，设置为-1时表示无限次播放。默认值：1

playMode:设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal

onFinish:动效播放完成后的回调函数。

scss 复制代码

Text('第一排')
            .width(this.widthMode)
            .height(this.heightMode)
            .backgroundColor(Color.Red)
         .animation({duration:1500,curve:Curve.Ease,delay:500,iterations:2,playMode:PlayMode.Alternate,onFinish: () => {console.log('完成动画')}})
          Text('第二排').width(this.widthMode).height(this.heightMode).backgroundColor(Color.Gray).animation({})
          Text('第三排').width(this.widthMode).height(this.heightMode).backgroundColor(Color.Green).animation({})

注意：

显式动画（函数），闭包内的变化均会触发动画，包括由数据变化引起的组件的增删、组件属性的变化等，可以做较为复杂的动画。
属性动画（属性方法），动画设置简单，属性变化时自动触发动画。属性值的变化需要加在animation属性之前）

4.4 组件内转场动画.transition

组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画。通过组件内转场动画，可定义组件出现、消失的效果。

transition函数的入参为组件内转场的效果，可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果，必须和animateTo一起使用才能产生组件转场效果。

注意： .transition给要变化的组件添加，animateTo给改变条件加

参数：

type：默认包括组件新增和删除。默认值：TransitionType.All

opacity：设置组件转场时的透明度效果，为插入时起点和删除时终点的值。默认值：1 取值范围： [0, 1]

translate：设置组件转场时的平移效果，为插入时起点和删除时终点的值。

scale：设置组件转场时的缩放效果，为插入时起点和删除时终点的值。

rotate：设置组件转场时的旋转效果，为插入时起点和删除时终点的值。

less 复制代码

Button(this.isShow ? '显示': "隐藏")
          .onClick((event: ClickEvent) => {
            animateTo({}, () => {
              this.isShow = !this.isShow
            })
        })
        if(!this.isShow){
          Image($r('app.media.mate60'))
            .width(300)
            .height(300)
            .transition({
              type: TransitionType.All,
              opacity:1,
              translate:{
                x: 100,
                y: 100,
                z: 0
              },
              rotate:{
                angle: 30
              }
            })
        }

4.5 页面间共享元素转场

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

语法：.sharedTransition(参数1,参数2)

参数1：id，两个页面中id值相同且不为空字符串的组件即为共享元素，在页面转场时可显示共享元素转场动效。

参数2：一个对象，包含duration，curve，delay，type等属性。

php 复制代码

Navigator({
          target: "pages/SheredPageTwo",
          type: NavigationType.Push
        }){
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .sharedTransition('sharedT', {
              duration: 1000,
              curve: Curve.Linear,
              delay: 100,
              type: SharedTransitionEffectType.Exchange
            })
        }
        

Navigator({
          target:"pages/SheredPageOne",
          type: NavigationType.Back
        }){
          Text(this.message)
            .fontSize(100)
            .fontWeight(FontWeight.Bold)
            .fontColor(Color.Pink)
            .sharedTransition('sharedT', {
              duration: 500,
              curve: Curve.Linear,
              delay: 100,
              type: SharedTransitionEffectType.Exchange
            })
        }

4.6 页面间转场

在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。

语法：pageTransition(){}

在它里面写页面进场和退场的动画PageTransitionEnter 和PageTransitionExit。

PageTransitionEnter({参数}).onEnter((type: RouteType, progress: number) => {})

PageTransitionExit({参数}).onExit((type: RouteType, progress: number) => {})

参数：duration， curve，delay，type

progress是从0到1的一个值

typescript 复制代码

  pageTransition(){
    PageTransitionEnter({ duration: 1000, curve:Curve.Linear })
      .onEnter((type: RouteType, progress: number) => {
      this.scaleNum = progress
    })

    PageTransitionExit({ duration: 500, curve: Curve.Linear })
      .onExit((type: RouteType, progress: number) => {
      this.scaleNum = 1 - progress
    })
  }

学习鸿蒙我是每天学习一点点的，主要时间不太够😭。通过传智博学谷 的鸿蒙课程是真的不错，既有直播课又有扩展课程，能很好的解决时间不够的问题。分享到此结束，希望大家喜欢。

HarmonyOS的组件和动画

前言

组件知识与动画

1. 通用事件

1.1 点击事件onClick

1.2 触摸事件onTouch

1.3按键事件onKeyEvent

2. 属性使用

2.1 设置元素在容器中的对齐方式

2.2 设置元素水平方向的布局

2.3 position定位（绝对定位）

2.4 offset定位（相对定位）

2.5 layoutWeight伸缩占比

2.6 aspectRatio宽高比

3. 组件扩展

3.1 Checkbox复选框组件

3.2 复选框组

3.3 日期组件DatePikcker

3.4 路由组件Navigator

3.5 弹性布局Flex组件

3.6 网络Web组件

4.动画

4.1 动画分类

4.2 显示动画animateTo()

4.3 属性动画.animation

4.4 组件内转场动画.transition

4.5 页面间共享元素转场

4.6 页面间转场