鸿蒙开发HarmonyOS NEXT （四）熟悉ArkTs （下）

一、动画

1、属性动画

animation,可以通过配置动画时间duration等参数，实现移动时的平滑过度

写了个小鱼游动的小案例

@Entry
@Component
struct ActionPage {
  @State fish: Resource = $r('app.media.fish_right') //小鱼图片
  @State fishX: number = 200 //初始化小鱼横坐标
  @State fishY: number = 100 //初始化小鱼纵坐标

  build() {
    Stack(){ //层叠布局组件
      Image($r('app.media.fish_back')).width('100%').height('100%') //背景
      RelativeContainer() {
        Image(this.fish) //小鱼
          .position({
            x: this.fishX - 30,
            y: this.fishY - 40
          })
          .rotate({
            angle: 0,
            centerX: "50%",
            centerY: "50%"
          })
          .width(40)
          .height(40)
          .animation({
            duration: 500, //动画时长，单位毫秒
            curve: Curve.EaseInOut
          })

        Row() { //操作区
          Button('←').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                { duration: 500 },
                () => {
                  this.fishX -= 20
                  this.fish = $r('app.media.fish_left')
                }
              )
            })
          Column({ space: 40 }) {
            Button('↑').backgroundColor('#20101010')
              .onClick(() => {
                this.fishY -= 20
              })
            Button('↓').backgroundColor('#20101010')
              .onClick(() => {
                this.fishY += 20
              })
          }

          Button('→').backgroundColor('#20101010')
            .onClick(() => {
              animateTo(
                { duration: 500 },
                () => {
                  this.fishX += 20
                  this.fish = $r('app.media.fish_right')
                }
              )
            })
        }
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({x:0,y:120})
      }
      .height('100%')
      .width('100%')
    }
  }
}

2、组件转场动画

组件插入或者移除时的动画，通过transition属性来配置

可修改上面的小鱼案例，添加小鱼入场动画

通过isBegin变量控制小鱼组件的加载

官网动画相关文档，可以多看看

应用开发导读-基础入门 | 华为开发者联盟 (huawei.com)

3、摇杆扩展小案例

改造上述小鱼游戏案例，将移动操作区域改成摇杆控制

思路：

1、定义摇杆区域，大圆套小圆

2、根据手指移动计算出小球移动，并且不超出大圆

3、根据小球移动角度，和小鱼移动速度，计算出小鱼的角度和最终坐标

ps:本案例是根据B站黑马程序员_鸿蒙课程案例写的，可以帮助理解

import { curves } from '@kit.ArkUI'

@Entry
@Component
struct ActionPage {
  @State fish: Resource = $r('app.media.fish_right')
  //小鱼坐标
  @State fishX: number = 200
  @State fishY: number = 100
  //小鱼角度
  @State angle: number = 0
  //开始游戏
  @State isBegin: boolean = false
  // 摇杆中心区域坐标
  private centerX: number = 120
  private centerY: number = 120
  //大、小圈半径
  private maxRadius: number = 100
  private radius: number = 20
  //摇杆小球的初始位置
  @State positionX: number = this.centerX;
  @State positionY: number = this.centerY;
  // 角度正弦和余弦
  sin: number = 0
  cos: number = 0
  //小鱼的移动速度
  speed: number = 0
  //任务id
  taskId: number = -1

  build() {
    Stack() {
      Image($r('app.media.fish_back')).width('100%').height('100%')
      RelativeContainer() {
        if (!this.isBegin) {
          Button('开始游戏')
            .onClick(() => {
              animateTo(
                { duration: 1000 },
                () => {
                  this.isBegin = true
                }
              )
            })
            .position({ x: 335, y: 130 })
        } else {
          Image(this.fish)
            .position({
              x: this.fishX - 30,
              y: this.fishY - 40
            })
            .rotate({
              angle: this.angle,
              centerX: "50%",
              centerY: "50%"
            })
            .width(40)
            .height(40)
            .animation({
              duration: 500, //动画时长，单位毫秒
              curve: Curve.EaseInOut
            })
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: { x: -220 }
            })
        }

        //摇杆
        Row() {
          Circle({ width: this.maxRadius * 2, height: this.maxRadius * 2 })
            .fill('#20101010')
            .position({ x: this.centerX - this.maxRadius, y: this.centerY - this.maxRadius })
          Circle({ width: this.radius * 2, height: this.radius * 2 })
            .fill('#20101010')
            .position({ x: this.positionX - this.radius, y: this.positionY - this.radius })
        }
        .onTouch(this.handleTouchEvent.bind(this))
        .height(240)
        .width(240)
        .justifyContent(FlexAlign.Center)
        .position({ x: 0, y: 120 })
      }
      .height('100%')
      .width('100%')
    }
  }

  /**处理手指移动*/
  handleTouchEvent(event: TouchEvent) {
    switch (event.type) {
      case TouchType.Up:
      //清除定时任务
        clearInterval(this.taskId)
        this.speed = 0
        animateTo(
          { curve: curves.responsiveSpringMotion() },
          () => {
            this.positionX = this.centerX
            this.positionY = this.centerY
          }
        )
        this.angle = 0
        break;
      case TouchType.Down:
      //开始定时任务，为了保证按下时小鱼坐标的持续变化
        this.taskId = setInterval(() => {
          this.fishX += this.speed * this.cos
          this.fishY += this.speed * this.sin
        }, 40)
        break;
      case TouchType.Move:
      //1、获取手指坐标
        let x = event.touches[0].x
        let y = event.touches[0].y
      //2、手指与中心点的坐标差值
        let vx = x - this.centerX
        let vy = y - this.centerY
      //3、手指和中心的连线与X轴正半轴的夹角
        let angles = Math.atan2(vy, vx)
      //4、手指与中心的的距离
        let distance = this.getDistance(vx, vy)
      //5、摇杆小球的坐标
        this.cos = Math.cos(angles)
        this.sin = Math.sin(angles)
        animateTo(
          { curve: curves.responsiveSpringMotion() },
          () => {
            this.positionX = this.centerX + distance * this.cos
            this.positionY = this.centerY + distance * this.sin

            //小鱼转向角度
            if (Math.abs(angles * 2) < Math.PI) {
              this.fish = $r('app.media.fish_right')
            } else {
              this.fish = $r('app.media.fish_left')
              angles = angles < 0 ? angles + Math.PI : angles - Math.PI
            }
            //修改小鱼的坐标
            this.angle = angles * 100 / Math.PI
            this.speed = 5
          }
        )
        break;
    }

  }

  //已知直角边，计算斜边长
  getDistance(x: number, y: number) {
    let d = Math.sqrt(x * x + y * y)
    return Math.min(d, this.maxRadius)
  }
}

二、stage模型

1、基本概念

stage是一种应用模型

应用模型：系统为开发者提供的应用程序必备的组件和运行机制。相当于一个模板，基于统一的模型进行应用开发，使应用开发更简单、高效

目前有两种应用模型：FA 和 Stage

此处，我们先了解stage，它由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此得名

2、应用配置文件

有两种：全局配置app.json5、模块的配置modle.json5

应用配置文件_鸿蒙官网有对配置中各个属性的详细描述，查询很方便

3、UIAbility生命周期

Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发

在代码里可以找到对应描述

可以试着在日志中查看生命周期的打印顺序

4、页面及组件的生命周期

注意页面生命周期函数得在像@entry这样修饰的页面使用

另外两种aboutToAppear、aboutToDisappear则可以在自定义组件中使用

  aboutToAppear(): void {
    console.log("组件加载时触发")
  }
  onPageShow(): void {
    console.log("页面每次显示时触发一次，
包括路由过程、应用进入前台等场景，仅@Entry装饰的自定义组件生效")
  }
  onBackPress(): boolean | void {
    console.log("用户点击返回按钮时触发")
  }
  onPageHide(): void {
    console.log("页面隐藏，应用进入后台")
  }
  aboutToDisappear(): void {
    console.log("组件销毁时触发")
  }

三、网络连接

1、http请求数据

可参考HTTP数据请求-鸿蒙官方文档

官网文档描述的非常细致,包含了使用案例和对应的具体参数含义

还是常规步骤，先引入再使用即可

// 引入包名
import { http } from '@kit.NetworkKit';
// 引入返回报错类
import { BusinessError } from '@kit.BasicServicesKit';

// 每一个httpRequest对应一个HTTP请求任务，不可复用
let httpRequest = http.createHttp();

// 用于订阅HTTP响应头，此接口会比request请求先返回。可以根据业务需要订阅此消息

httpRequest.on('headersReceive', (header: Object) => {
  console.info('header: ' + JSON.stringify(header));
});

class Header {
  public contentType: string;

  constructor(contentType: string) {
    this.contentType = contentType;
  }
}

httpRequest.request(
// 填写HTTP请求的URL地址，可以带参数也可以不带参数。URL地址需要开发者自定义。请求的参数可以在extraData中指定
  "EXAMPLE_URL",
  {
    method: http.RequestMethod.POST, // 可选，默认为http.RequestMethod.GET
    // 当使用POST请求时此字段用于传递请求体内容，具体格式与服务端协商确定，可以是字符串或者对象
    extraData: 'data to send',
    expectDataType: http.HttpDataType.STRING, // 可选，指定返回数据的类型
    usingCache: true, // 可选，默认为true
    priority: 1, // 可选，默认为1
    // 开发者根据自身业务需要添加header字段
    header: new Header('application/json'),
    readTimeout: 60000, // 可选，默认为60000ms
    connectTimeout: 60000, // 可选，默认为60000ms
  },
  (err: BusinessError, data: http.HttpResponse) => {
    if (!err) {
      // data.result为HTTP响应内容，可根据业务需要进行解析
      console.info('Result:' + JSON.stringify(data.result));
      // 取消订阅HTTP响应头事件
      httpRequest.off('headersReceive');
      // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。
      httpRequest.destroy();
    } else {
      console.info('error:' + JSON.stringify(err));
      // 取消订阅HTTP响应头事件
      httpRequest.off('headersReceive');
      // 当该请求使用完毕时，开发者务必调用destroy方法主动销毁该JavaScript Object。
      httpRequest.destroy();
    }
  });

2、第三方库axios

因为axios是第三方库，所以需要三方库的包管理工具ohpm来管理

2.1 检查ohpm

终端中输入命令

ohmp -v

可以看的ohmp的版本号

（注意:比较旧的版本可能需要自己下载安装ohmp，但版本为“HarmonyOS NEXT Developer Beta1”，版本文档更新于2024-06-25的肯定已经自动配置好了的）

2.2 下载安装axios

也是可以参考OpenHarmony三方库中心仓

里面包含了常用三方库的配置和使用说明

1、module.json5中要配置允许访问网络

2、输入安装命令：ohpm install @ohos/axios

3、安装完成，使用axios

import axios from '@ohos/axios'
interface userInfo{
  id: number
  name: string,
  phone: number
}

// 向给定ID的用户发起请求
axios.get<userInfo, AxiosResponse<userInfo>, null>('/user?ID=12345')
.then((response: AxiosResponse<userInfo>)=> {
  // 处理成功情况
  console.info("id" + response.data.id)
  console.info(JSON.stringify(response));
})
.catch((error: AxiosError)=> {
  // 处理错误情况
  console.info(JSON.stringify(error));
})
.then(()=> {
  // 总是会执行
});