HarmonyOS开发(八)：动画及网络

1、动画概述

在ArkUI中，产生动画的方式是改变组件属性值并且指定相关的动画参数。当属性值发生变化后，按照动画参数，从原来的状态过渡到新的状态，就形成一个动画。

动画的相关参数如下：

属性名称	属性类型	默认值	描述
duration	number	1000	动画时长，单位为毫秒，默认时长为1000毫秒。
tempo	number	1.0	动画播放的速度，值越大则播放越快，值越小则播放越慢，0则表示没有动画效果
curve	Curve	Curve.Linear	动画变化曲线，默认曲线为线性其中可取值有如下一些 Liner:表示从头到尾的速度都是相同的 Ease:表示以低速开始，然后加快，在结束前变慢CubicBezier(0.25,0.1,0.25,1.0) EaseIn:表示以低速开始 CubicBezier(0.42,0.0,1.0,1.0) EaseOut:表示以低速结束 CubicBezier(0.0,0.0,0.58,1.0) EaseInOut:表示以低速开始和结束 CubicBezier(0.42,0.0,0.58,1.0) FastOutSlowIn:标准曲线 CubicBezier(0.4,0.0,0.2,1.0) LinearOutSlowIn:减速曲线 CubicBezier(0.0,0.0,0.2,1.0) FastOutSlowIn:加速曲线 CubicBezier(0.4,0.0,1.0,1.0) ExtremeDeceleratioin:急缓曲线 CubicBezier(0.0,0.0,0.0,1.0) sharp:锐利曲线 CubicBezier(0.33,0.0,0.67,1.0) Rhythm:节奏曲线 CubicBezier(0.7,0.0,0.2,1.0) Smooth:平滑曲线 CubicBezier(0.4,0.0,0.4,1.0) Friction:阻尼曲线 CubicBezier(0.2,0.0,0.2,1.0)
delay	number	0	延时播放时间，单位为毫秒，默认不延时播放
iterations	number	1	播放次数，默认为1次，设置为-1则表示无限次播放
playMode	PlayMode	PlayMode.Normal	设置动画播放模式，默认播放完后重头播放 Normal:正常播放 Reverse:动画反向播放 Alternate:动画在奇数次正向播放，偶数次反向播放 AlternateReverse:动画在奇数次反向播放，偶数次正向播放
onFinish	function		动画播放结束时回调函数

2、动画分类

从页面分类分为：页面内的动画（在一个页面中即可发生的动画）、页面间的动画（两个页面跳转时会产生的动画）
按基础能力可分为：属性动画、显示动画、转场动画

3、页面内动画

3.1、布局更新动画

显示动画（animateTo）和属性动画（animation）是ArkUI提供的最基础和常用的动画功能。

在布局属性（如：尺寸、位置等属性）发生变化时，可以通过属性动画或显示动画，按动画参数过渡到新的布局参数状态。

动画类型	特点
显示动画（函数）	闭包内的变化均会触发动画，包含币数据变化引起的组件增删
属性动画（属性方法）	属性变化自动触发动画。（注意：属性值的变化需要加在animation属性之前）

3.1.1、使用显示动画产生布局更新动画

显示动画的接口：

animateTo(value:AnimateParam, event: () => void): void

第一个参数：指定动画参数

第二个参数：动画的闭包函数

3.1.2、相关实例

@Entry
@Component
struct LayoutChangeTest {
  @State itemAlign: HorizontalAlign = HorizontalAlign.Start;
  aligns: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];
  alignIndex: number = 0;

  build() {
    Column({space: 30}) {
      Text('修改布局位置')
        .fontSize(30)
        .margin({top: 100})

      Column({space: 25}) {
        Text("JavaScript").fontSize(20).fontWeight(FontWeight.Bolder).fontColor('#4e72b8')
        Text("TypeScript").fontSize(20).fontWeight(FontWeight.Bolder).fontColor('#6d8346')
        Text("ArkTS").fontSize(20).fontWeight(FontWeight.Bolder).fontColor('#69541b')
      }
      .margin(20)
      .alignItems(this.itemAlign)
      .justifyContent(FlexAlign.Center)
      .borderWidth(2)
      .width('90%')
      .height(200)

      Button('Click', {type: ButtonType.Capsule, stateEffect: true})
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .width('50%')
        .onClick(() => {
          // 显示动画
          animateTo({duration: 1000, curve: Curve.EaseInOut},() => {
            // 在闭包函数中修改上方元素的对齐方式
            this.alignIndex = (this.alignIndex + 1) % this.aligns.length;
            this.itemAlign = this.aligns[this.alignIndex];
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

@Entry
@Component
struct LayoutChangeTest1 {
  @State mySize: number = 30;
  // 标志位，用来控制组件的大小
  @State flag: boolean = false;

  build() {
    Column( {space: 20} ) {
      Text('HarmonyOS')
        .fontColor('#ed1941')
        .fontWeight(FontWeight.Bolder)
        .fontSize(this.mySize)
        .margin(10)

      Button(this.flag ? '缩小': '放大', {type:ButtonType.Capsule,stateEffect:true})
        .width('50%')
        .fontSize(16)
        .onClick(() => {
          animateTo({duration: 1000, curve: Curve.Ease}, () => {
            if(this.flag) {
              this.mySize = 30;
            } else {
              this.mySize = 50;
            }
            this.flag = !this.flag;
          });
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

@Entry
@Component
struct LayoutPage2 {
  @State message: string = '改变角度';
  @State rotateAngle: number = 0;
  @State flag: boolean = false;
  
  build() {
    Row() {
      Column({space:15}) {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Image($r('app.media.image2'))
          .width(200)
          .height(200)
          .borderRadius(100)
          .rotate({
            x: 1,
            y: 1,
            z: 1,
            angle: this.rotateAngle
          })
          .onClick(() => {
            animateTo({},() => {
              if(this.flag) {
                this.rotateAngle = 0;
              } else {
                this.rotateAngle = 640;
              }
              this.flag = !this.flag;
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

3.1.3、使用属性动画产生布局更新动画

显示动画是把要执行动画的属性修改放在闭包函烽中触发动画，而属性动画则不需要使用闭包，只需要把animation属性加在要做属性动画的组件的属性后就可以了。

属性动画接口

animation(value: AnimateParam)

参数value表示动画参数。

注意：如果希望某个属性值的变化而产生动画，则需要此属性需要加到animation属性之前。

3.1.4、相关案例

@Entry
@Component
struct AttrAnimationTest1 {
  @State widthSize: number = 250;
  @State heightSize: number = 100;
  @State rotateAngle: number = 0;
  @State flag: boolean = true;

  build() {
    Row() {
      Column() {
        Button('change size')
          .onClick(() => {
            if(this.flag) {
              this.widthSize = 150;
              this.heightSize = 50;
            } else {
              this.widthSize = 250;
              this.heightSize = 100;
            }
            this.flag = !this.flag;
          })
          .margin(30)
          .width(this.widthSize)
          .animation({
            duration:2000,
            iterations:3,
            curve: Curve.Linear,
            playMode: PlayMode.Alternate
          })
          .height(this.heightSize)
          .animation({
            duration:1000,
            curve: Curve.Linear,
            playMode:PlayMode.Alternate
          })

        Button('change rotate angle')
          .onClick(() => {
            this.rotateAngle = 90;
          })
          .margin(50)
          .rotate({angle: this.rotateAngle})
          .animation({
            duration:1000,
            iterations:-1,
            curve:Curve.Linear,
            playMode:PlayMode.Alternate
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

4、组件内转场动画

组件内转场动画使用transition,它常见的用法如下：

1、if/else产生组件内转场动画

2、ForEach产生组件内转场动画

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

组件内转场动画的接口：

transition(value: TransitionOptions)

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

transition常见用法

1、组件的插入、删除使用同一个动画效果

Button()
 .transition({type: TransitionType.All, scale: {x: 0, y: 0 }})

当type属性为TransitionType.All时，表示指定转场动效生效在组件的所有变化（插入和删除）场景，这个时候删除动画和插入动画是相反的过程。

2、组件的插入、删除使用不同的动画效果

Button()
 .transition({type: TransitionType.Insert, translate: {x: 200, y: -200}, opacity: 0})
 .transition({type: TransitionType.Delete, rotate: {x: 0, y:0, z：1, angle:360}})

3、只定义组件的插入或删除其中一种动画效果

Button()
 .transition({type: TransitionType.Delete, translate:{x: 200,y: -200}})

4.1、if/else产生组件内转场动画

@Entry
@Component
struct TransitionTest {
  @State flag: boolean = true;

  build() {
    Row() {
      Column() {
        Button(this.flag ? '隐藏' : '显示')
          .fontSize(20)
          .margin(30)
          .width(150)
          .height(50)
          .onClick(() => {
            // 在animateTo闭包中改变flag的值
            animateTo({duration:1500},() => {
              // 点击按钮来控制标记变量
              this.flag = !this.flag;
            })
          })
        if(this.flag) {
          Text('HarmonyOS')
            .fontSize(20)
            .fontWeight(FontWeight.Bolder)
            .fontColor('#008792')
            // 添加转场效果
            .transition({type: TransitionType.Insert, translate: {x: 200, y: -200}})
            .transition({type: TransitionType.Delete, opacity: 0, scale: {x: 0, y: 0}})
        }

      }
      .width('100%')
    }
    .height('100%')
  }
}

4.2、ForEach产生组件内转场动画

ForEach可通过控制数组中的元素个数，来控制组件的插入和删除。通过ForEach来产生组件内转场动画，需要两个条件

1、ForEach里的组件配置了transition效果

2、在animateTo的闭包中控制组件的插入或删除，即控制数组的元素添加和删除

@Entry
@Component
struct ForEachTest {

  @State books :string[] = [
    '《JavaScript学习指南》',
    '《TypeScript从入门到精通》',
    '《ArkTS学习手册》',
    '《JAVA核心卷》'
  ];

  num: number = 0;

  build() {
    Column({space: 10}) {
      Column(){
        // 注意 这里遍历的key是使用item,所以我们在添加时加上一个num来区分内容
        ForEach(this.books, (item) => {
          Text(item).textStyle()
            .transition({type: TransitionType.All, translate: {x: 200},scale:{x:0,y:0}})
        },item => JSON.stringify(item))
      }.columnStyle()

      Button('头部添加元素').ButtonStyle('#375830', () => {
        animateTo({}, () => {
          this.num++;
          this.books.unshift(`《C语言编程思想》_${this.num}`)
        })
      })

      Button('头部删除元素').ButtonStyle('#b64533', () => {
        animateTo({}, () => {
          this.books.shift()
        })
      })

      Button('尾部删除元素').ButtonStyle('#dea32c', () => {
        animateTo({}, () => {
          this.books.pop()
        })
      })

    }
    .width('100%')
    .height('100%')
  }
}

// 相关样式信息
@Extend(Text) function textStyle() {
  .width(300)
  .height(60)
  .fontSize(18)
  .margin({top: 3})
  .backgroundColor('#d3c6a6')
  .textAlign(TextAlign.Start)
  .fontColor(Color.White)
}

@Extend(Column) function columnStyle() {
  .margin(10)
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Center)
  .width('90%')
  .height('50%')
}

@Extend(Button) function ButtonStyle(color: string|Color, click: Function) {
  .width(200)
  .height(50)
  .fontSize(18)
  .backgroundColor(color)
  .onClick(() => {
    // click代表的就是调用时具体传入进来的函数
    click()
  })
}

5、页面间的动画

5.1、共享元素转场动画

在不同的页面间，有使用相同元素的场景，可以使用共享元素转场动画衔接。

共享元素转场的接口：

sharedTransition(id: string, options?: sharedTransitionOptions)

其中id为指定共享元素的组件id

根据sharedTransitionOptions中的type参数，可以把共享元素转场分为Exchange类型和Static类型。

5.1.1、Exchange类型

交换型共享元素转场。

这种类共享元素转场适用于两个页面间相同元素的衔接，从起始页共享元素的位置、大小过渡到目标页面的共享元素的位置、大小。

当不指定type时，默认就是Exchange类型的共享转场

使用Exchange类型的共享转场时，共享元素转场的动画参数由目标页面options中的动画参数决定。

5.1.2、Static类型的共享元素转场

静态类型的共享元素转场常用于页面跳转时，标题的渐入淡出，只需要在一个页面中有Static的共享元素，不能在两个页面中出现相同id的Static类型的共享元素。

// Src.ets
import router from '@ohos.router';

@Entry
@Component
struct Src {

  build() {
    Column({ space: 30 }) {
      // Exchange类型共享转场
      Image($r('app.media.image2'))
        .width(50)
        .height(50)
        .opacity(.3)
        .borderRadius(75)
        .sharedTransition('img1',{
          duration: 1000,
          curve: Curve.Linear
        })
    }
    .onClick(() => {
      // 路由跳转
      router.pushUrl({url: "pages/SharedTransition/Dest"});
    })
    .padding(10)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
}

// Dest.ets
import router from '@ohos.router';

@Entry
@Component
struct Dest {

  build() {
    Column({ space: 30 }) {
      // 配置Static类型的共享元素转场
      Text('鸿蒙系统')
        .fontSize(20)
        .fontColor('#6d8346')
        .opacity(.8)
        .fontWeight(FontWeight.Bold)
        .margin({ top: 10 })
        .sharedTransition('text',{
          duration: 500,
          curve: Curve.Linear,
          type: SharedTransitionEffectType.Static
        })
      // 配置Exchange类型的共享元素转场，id是'img1'
      Image($r('app.media.image2'))
        .width(150)
        .height(150).opacity(1)
        .borderRadius(75)
        .sharedTransition('img1',{
          duration: 500,
          curve: Curve.Linear
        })
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      // 返回
      router.back();
    })
  }
}

5.2、页面转场动画

两个页面之间发生跳转，一个页面消失，另一个页面出现，此时可以配置各自页面的页面转场参数实现自定义的页面转场效果。

页面转场效果写在pageTransition函数中，通过PageTransitionEnter和PageTransitionExit来指定页面进入和退出时的动画效果。

pageTransitionEnter接口

PageTransitionEnter({type?: RouteType, duration?: number, curve?: Curve | string, delay: number})

pageTransitionEnter提供了onEnter接口进行自定义页面入场动画的回调

pageTransitionExit接口

PageTransitionExit({type?: RouteType, duration?: number, curve?: Curve | string, delay: number})

pageTransitionExit提供了onExit接口进行自定义页面退场动画的回调

关于RouteType表示路由生效类型，从一个页面到另一个页面有两人种方式，一种是push，一种是back(pop出栈)，那么type参数就可以由开发者指定哪种类型的路由来定义转场效果。对于push和back会有一些区别，比如A页面到B页面push时，A页面是退场，B页面是入场，如果B页面back回A页面则是B页面退场，A页面入场。

type参数的默认值是RouteType.None表示对页面的push和pop都生效

如果我们把页面转场时长设置为0(duration参数值为0)则无页面转场动画。

// Src2.est
import router from '@ohos.router';

@Entry
@Component
struct Src2 {
  @State scale1: number = 1;
  @State opacity1: number = 1;

  build() {
    Column({ space: 30}) {
      Text('Src2...')
        .fontSize(30)
        .opacity(this.opacity1)
        .margin({bottom: 15})
      Image($r('app.media.image2'))
        .width(300)
        .height(400)
        .scale({x: this.scale1})
        .opacity(this.opacity1)
    }
    .width('100%')
    .height('100%')
    .onClick(() => {
      router.pushUrl({
        url: "pages/pageTransition/Dest2"
      })
    })
  }

  pageTransition() {
    PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {
      this.scale1 = 1;
      this.opacity1 = progress;
    })

    PageTransitionExit({}).onExit((type: RouteType, progress: number) => {
      this.scale1 = 1 - progress;;
      this.opacity1 = 1 - progress;
    })
  }

}

// Dest2.est
import router from '@ohos.router';

@Entry
@Component
struct Dest2 {
  @State scale1: number = 1;
  @State opacity1: number = 1;

  build() {
    Column(){
      Text('Dest2...')
        .fontSize(30)
        .opacity(this.opacity1)
        .margin({bottom: 15})
      Image($r('app.media.image2'))
        .width(300)
        .height(400)
        .scale({y: this.scale1})
        .opacity(this.opacity1)
    }
    .width('100%')
    .height('100%')
   .onClick(() => {
     router.back()
   })
  }

  pageTransition() {
    PageTransitionEnter({}).onEnter((type: RouteType, progress: number) => {
      this.scale1 = progress;
      this.opacity1 = progress;
    })

    PageTransitionExit({}).onExit((type: RouteType, progress: number) => {
      this.scale1 = 1 - progress;
      this.opacity1 = 1 - progress;
    })

  }

}

6、网络

6.1、基于web组件构建网络应用

当需要访问网络资源的时候需要在module.json5中申请网络访问权限：ohos.permission.INTERNET

Web组件的使用只需要ArkTS文件中创建一个Web组件，传入两个参数就可以了。

src：指定了网页的路径

controller：组件控制器，绑定web组件，实现对web组件的控制

import webview from '@ohos.web.webview';

@Entry
@Component
struct WebComp {

  controller: WebviewController = new webview.WebviewController();

  build() {
    Row() {
      Column() {
        Web({
          src: 'https://www.baidu.com',
          controller: this.controller
        })
      }
      .width('100%')
    }
    .height('100%')
  }
}

6.2、HTTP数据请求

6.2.1、简单说明

开发的应用需要通过HTTP发送一个数据请求，支持的情求方式有：GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT

HTTP数据请求功能主要由http模块提供，这个功能也需要申请ohos.permission.INTERNET权限

6.2.2、开发步骤

1、导入http模块

import http from '@ohos.net.http';

2、创建HTTP请求实例，生成HttpRequest对象

let httpRequest = http.createHttp();

注意：每一个httpRequest对应一个http请求任务，不可以复用

3、订阅HTTP响应头（可选）

4、根据URL地址，发起HTTP网络请求

5、处理HTTP响应头和HTTP网络请求的返回结果（可选）

// 导入模块
import http from '@ohos.net.http';

@Entry
@Component
struct HttpTest {
  url: string = 'https://mock.apifox.com/m1/3690335-0-default/getHot'
  @State titles: string[] = [];

  build() {
    Row() {
      Column() {
        Button('获取数据')
          .width('50%')
          .margin({bottom: 15})
          .onClick(() => {
            // 创建请求对象
            let httpReq = http.createHttp();
            // 发起请求
            httpReq.request(this.url,{
              method: http.RequestMethod.GET,
            }, (err,data) => {
              // 处理结果
              if(!err) {
                // this.titles = JSON.parse(`${data}`).values['title']
                let arr = JSON.parse(`${data.result}`).values
                for(let item of arr) {
                  this.titles.push(item['title']);
                }
              }
            })
          })
        ForEach(this.titles, (item) =>{
          Text(item)
            .fontSize(14)
            .margin({bottom:5})
        },item => item)
      }
      .width('100%')
    }
    .height('100%')
  }
}

6.2.3、http请求-Promise方式

使用这种方式是为了避免地狱回调的问题。

// 导入模块
import http from '@ohos.net.http';

@Entry
@Component
struct HttpPromiseTest {

  url: string = 'https://mock.apifox.com/m1/3690335-0-default/getHot'
  @State titles: string[] = [];

  build() {
    Row() {
      Column() {
        Button('获取数据')
          .width('50%')
          .margin({bottom: 15})
          .onClick(() => {
            // 创建http请求
            let httpReq = http.createHttp();
            // 发起请求
            let promise = httpReq.request(this.url)
            promise.then((data) => {
              let arr = JSON.parse(`${data.result}`).values
              for(let item of arr) {
                this.titles.push(item['title']);
              }
            })
          })

        ForEach(this.titles, (item) =>{
          Text(item)
            .fontSize(14)
            .margin({bottom:5})
        },item => item)
      }
      .width('100%')
    }
    .height('100%')
  }
}

方法名称	功能描述
createHttp()	创建一个http请求
request()	根据URL地址，发起HTTP网络请求
destroy()	中断请求任务
on(type: 'headerReceive')	订阅HTTP Response Header 事件
off(type: 'headerReceive')	取消订阅HTTP Response Header事件