@

目录

真的是HarmonyOS应用开发者的宝藏APP哇，我们今天跟着学一下组件动效

翻页效果

看到源代码中是使用了四个自定义控件来实现，我们看下能不能优化一下。

思路

• 需要三个 Text 组件，左侧一个，用来展示翻页后的效果。右侧两个 Text 叠放，上层Text 用来展示翻页效果，底层 Text 用来展示下一页内容
• 翻页我们可以使用绕Y轴旋转来实现。旋转角度就先用Slide 滑动来实现。

实现

首先我们需要定义几个变量：当前旋转角度，左侧文字、右侧文字、正在翻页的文字

  @State rotateAngle: number = 0
  @State leftNumber: number = 0
  @State rightNumber: number = 2
  @State rotateNumber: number = 1

三个 Text 和一个 Slide

  Row() {
              Text(`${this.leftNumber}`)
                .fontSize(80)
                .fontColor(Color.White)
                .fontWeight(FontWeight.Bold)
                .textAlign(TextAlign.Center)
                .backgroundColor("#18183C")
                .width("35%")
                .height(100)
                .borderRadius(20)
                .rotate({
                  x: 0,
                  y: 1,
                  z: 0,
                  angle: '180deg',

                })
              Blank().width(20)

              Stack() {
                Text(`${this.rightNumber}`)
                  .fontSize(80)
                  .fontColor(Color.White)
                  .fontWeight(FontWeight.Bold)
                  .textAlign(TextAlign.Center)
                  .backgroundColor("#18183C")
                  .width("35%")
                  .height(100)
                  .borderRadius(20)
                Text(`${this.rotateNumber}`)
                  .fontSize(80)
                  .fontColor(Color.White)
                  .fontWeight(FontWeight.Bold)
                  .textAlign(TextAlign.Center)
                  .backgroundColor("#18183C")
                  .width("35%")
                  .height(100)
                  .borderRadius(20)
                  .rotate({
                    x: 0,
                    y: 1,
                    z: 0,
                    angle: `${this.rotateAngle}deg`,
                    centerX: -10,
                    centerY: "50%"
                  })
              }

            }

这里先看下 rotate这个属性，它需要一个RotateOptions参数，作用就是可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。

旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。

默认值: 在x、y、z都不指定时，x、y、z的默认值分别为0、0、1。指定了x、y、z任何一个值时，x、y、z中未指定的值默认为0。

{

centerX: '50%',

centerY: '50%',

centerZ: 0,

perspective: 0

}

单位：vp

添加一个Slide组件来改变rotateAngle的值，当前先设置为 0~180.
注意这里赋值时需要取反。

            Slider({ min: 0, max: 180, value: this.rotateAngle }).margin({ top: 20 }).onChange((value) => {
              this.rotateAngle = -value
            }).margin({ left: 15, right: 15 })

这样我们就实现了简单的翻页效果，但如果我们想要连续翻页怎么办？
我们这里先把角度值调整为 0~360.

可以看到 360 度就是旋转了一圈，我们只需要处理一下滑块的值就好了，这里简单的处理一下，

Slider({ min: 0, max: 360, value: this.rotateAngle }).margin({ top: 20 }).onChange((value) => {
  if (value >= 180) {
    value -= 180
    if (!this.handled) {
      this.handled = true
      this.leftNumber += 1
      this.rightNumber += 1
      this.rotateNumber += 1
    }
  }
  this.rotateAngle = -value
}).margin({ left: 15, right: 15 })

这样我们就实现了连续翻页，如果需要翻动更多页面，修改一下处理滑块的值就好了

---

【 更多精彩内容，请关注公众号：【名称：HarmonyOS开发者技术，ID：HarmonyOS_Dev】；也欢迎加入鸿蒙开发者交流群：https://work.weixin.qq.com/gm/48f89e7a4c10206e053e01ad124004a0】