Harmony OS开发之ArkUI框架速成十定位和动画

> 程序员Feri一名12年+的程序员,做过开发带过团队创过业,擅长Java相关开发、鸿蒙开发、人工智能等,专注于程序员搞钱那点儿事,希望在搞钱的路上有你相伴！君志所向,一往无前！

---
 

1.布局综合实践

区域划分：

● 图片区域（层叠布局）

○ 图片组件

○ 文字内容：播放 + 评论 + 时长（Flex 布局）

● 文字区域

○ 标题文字

○ 点赞量 + 更多

  @Entry
@Component
struct Index6{
  build() {
    Column(){
      Column() {
        // 图片区域 -- 层叠布局
        Stack({ alignContent: Alignment.BottomStart}) {
          // 图片组件
          Image($r('app.media.ty'))
            .width("98%")
            .height(125)
            .objectFit(ImageFit.Cover)
            .borderRadius({
              topLeft: 10,
              topRight: 10
            })
          // 文字内容
          Row() {
            // 播放量
            Row({ space: 5}) {
              Image($r('app.media.bf'))
                .width(16)
                .fillColor('#fff')
              Text('282万')
                .fontColor('#fff')
                .fontSize(12)
            }
            .margin({right: 5})
            // 评论数
            Row({ space: 5}) {
              Image($r('app.media.pl'))
                .fillColor('#fff')
                .width(14)
              Text('8655')
                .fontColor('#fff')
                .fontSize(12)

            }
            // 空白填充组件
            Blank()

            // 右侧时长
            Text('4:33')
              .fontColor('#fff')
              .fontSize(12)
          }
          .width('100%')
          .height(24)
          .padding({left: 5, right: 5})
        }
        // 文字区域
        Column() {
          // 标题文字
          Text('【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣流派推广曲》')
            .fontSize(13)
            .textOverflow({overflow: TextOverflow.Ellipsis})
            .maxLines(2)
            .lineHeight(16)
          // 点赞更多
          Row(){
            Text('19万点赞')
              .padding(3)
              .backgroundColor('#fef0ef')
              .fontSize(10)
              .fontColor('#e66c43')
            Image($r('app.media.gd'))
              .width(14)
              .fillColor('#bfbfbf')
          }
          .width('100%')
          .margin({top: 10})
          .justifyContent(FlexAlign.SpaceBetween)
        }
        .padding(5)
      }
      .width("80%")
      .height(200)
      .padding(4)
      .backgroundColor('#fff')
      .borderRadius(10)
      .borderColor(Color.Red)
      .borderWidth(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f6f7')
    .padding(10)
  }
}

2 定位

2.1 定位概述

作用：改变组件位置

分类：

● 绝对定位：position，相对父组件左上角进行偏移

● 相对定位：offset，相对自身左上角进行偏移

2.2 绝对定位

属性：position()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

● 数字，单位是vp

● 百分比，参照父组件尺寸计算结果

Column() {
        Text('绝对定位')
          .width(80)
          .height(40)
          .backgroundColor(Color.Pink)
          .position({
            x: 0,
            y: 0
          })
      }
      .width('100%')
      .height(200)
      .backgroundColor('#ccc')

亲，谨记：绝对定位特点：

1. 参照父组件左上角进行偏移

2. 绝对定位后的组件不再占用自身原有位置

2.3 相对定位

属性：offset()

参数：{x: 水平偏移量, y: 垂直偏移量}

偏移量取值

● 数字，单位是vp

● 百分比，参照父组件尺寸计算结果

 Column() {
        Text("相对定位")
          .width(80)
          .height(40)
          .backgroundColor(Color.Pink)
        Text('程序员Feri')
          .width(80)
          .height(40)
          .backgroundColor(Color.Orange)
            // 占位
          .offset({
            x: 100,
            y: -30
          })
        Text('求关注')
          .width(80)
          .height(40)
          .backgroundColor(Color.Brown)
      }
      .width('100%')
      .height(200)
      .backgroundColor('#ccc')

相对定位特点：

1. 相对自身左上角进行偏移

2. 相对定位后的组件仍然占用自身原有位置

3 通用属性

3.1 多态样式

属性：stateStyles()

/*
.stateStyles({
  状态: {
    属性
  }
})
*/

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('多态样式')
        .width(100)
        .height(50)
        .backgroundColor(Color.Pink)
        .stateStyles({
          clicked: {
            .width(200)
            .height(100)
          }
        })
    }
    .padding(20)
  }
}

3.2 动画 animation

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

支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

属性：animation

参数： {}

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('文本')
        .width(50)
        .height(50)
        .backgroundColor(Color.Pink)
        .stateStyles({
          pressed: {
            .width(300)
          }
        })
        .animation({
          duration: 3000,
          // 速度曲线
          curve: curves.springMotion(),
          delay: 1000,
          iterations: -1
        })
    }
    .padding(20)
  }
}

亲，记得长按哈，你就会发现真的很有趣

4.图形变换

用于对组件进行平移、旋转、缩放、矩阵变换等操作。

4.1 平移

作用：可使组件在以组件左上角为坐标原点的坐标系中进行移动

属性：translate()

参数：{x?: X轴移动距离, y?: Y轴移动距离, z?: Z轴移动距离}

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .width(200)
        .aspectRatio(1)
        .stateStyles({
          normal: {
            .translate({x: 0})
          },
          pressed: {
            .translate({x: 100})
          }
        })
        .animation({
          curve: curves.springMotion()
        })
    }
    .padding(20)
  }
}

按一下就会有惊喜出现哈

4.2 缩放

作用：分别设置X轴、Y轴、Z轴的缩放比例，默认值为1

属性：scale(),

参数： { x?: X轴缩放比例,

y?: Y轴缩放比例,

z?: Z轴缩放比例,

centerX?: Y轴中心点坐标,

centerY? Y轴中心点坐标 }

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.background'))
        .width(200)
        .aspectRatio(1)
        .stateStyles({
          normal: {
            .scale({x:1, y: 1})
          },
          pressed: {
            .scale({x: 0.8, y: 0.8})
          }
        })
        .animation({
          curve: curves.springMotion()
        })
    }
    .padding(20)
  }
}

按一下，好运连连

4.3 旋转

作用：可使组件在以组件左上角为坐标原点的坐标系中进行旋转

属性：rotate()

参数：{

angle: 旋转角度,

centerX?: Y轴中心点坐标,

centerY? Y轴中心点坐标

}

import curves from '@ohos.curves'

@Entry
@Component
struct Index {
  build() {
    Column() {
      Image($r('app.media.startIcon'))
        .width(200)
        .aspectRatio(1)
        .stateStyles({
          normal: {
            .rotate({angle: 0})
          },
          pressed: {
            .rotate({angle: 60})
          }
        })
        .animation({
          curve: curves.springMotion()
        })
    }
    .padding(20)
  }
}

好了，就到这吧，今天结束，美满的一天！