【HarmonyOS Next】写一个鸿蒙版本的搜索框推荐词轮播

介绍

在各大 APP 的搜索框中，经常能看到推荐词轮播展示的效果。在 Android 开发中，可以使用 TextSwitcher 组件轻松实现该效果，也可以写两个 TextView 来做轮播动效。下面我们来写一个鸿蒙版本的。

效果预览

分析

功能比较简单，主要就是两个 Text 循环做动效，通过一个 boolean 类型的 flag 来标记当前轮次。

flag = true	flag = flase	flag = true	…
Text1 向上位移 + 渐隐	Text2 向上位移 + 渐隐	Text1 向上位移 + 渐隐	…
Text2 设置成新的词 + 向上位移 + 渐现	Text1 设置成新的词 + 向上位移 + 渐现	Text2 设置成新的词 + 向上位移 + 渐现	…

代码实现

首先，创建一个 TextSwitcher.ets，根容器可以用 Stack ，里面放入 2 个 Text 组件。

// TextSwitcher.ets
@Component
export struct TextSwitcher {
  build() {
    Stack() {
      Text("text1")
        .fontColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
        .height('100%')
      Text("text2")
        .fontColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
        .height('100%')
    }
    .alignContent(Alignment.Start)
  }
}

添加后效果如图

 

下面我们来添加动画，动画可以使用 animateTo 来实现。在组件的 aboutToAppear 生命周期中通过setInterval设置每间隔 interval秒触发一次动画。代码如下：

// TextSwitcher.ets
@Entry
@Component
export struct TextSwitcher {

  // 移动距离，每次从 transDistance 移动到 0 再移动到 -transDistance
  @State transDistance: number = 26
  // 动画持续时间
  @State animDuration: number = 500
  // 动画间隔
  @State interval: number = 2000
  
  // Text1 的 位移距离
  @State private trans1: number = 0
  // Text2 的 位移距离
  @State private trans2: number = this.transDistance
  // Text1 的 透明度
  @State private alpha1: number = 1
  // Text2 的 透明度
  @State private alpha2: number = 0
  // 标志位，用于判断当前是 Text1 还是 Text2 移动到中间
  @State private flag: boolean = true

  aboutToAppear(): void {
    setInterval(() => {
      animateTo({
        duration: this.animDuration,
        onFinish: () => {
          // 动画结束后，要把移动到容器上方的 Text 再移动至容器下方
          if (this.flag) {
            this.trans1 = this.transDistance
          } else {
            this.trans2 = this.transDistance
          }
          this.flag = !this.flag
        }
      }, () => {
        if (this.flag) {
          this.trans1 = -this.transDistance
          this.trans2 = 0
          this.alpha1 = 0
          this.alpha2 = 1
        } else {
          this.trans1 = 0
          this.trans2 = -this.transDistance
          this.alpha1 = 1
          this.alpha2 = 0
        }
      })
    }, this.interval)
  }


  build() {
    Stack() {
      Text("text1")
        .fontColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
        .height('100%')
        .translate({ y: this.trans1 })
        .opacity(this.alpha1)
      Text("text2")
        .fontColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
        .height('100%')
        .translate({ y: this.trans2 })
        .opacity(this.alpha2)
    }
    .alignContent(Alignment.Start)
  }
}

效果如下

下面增加文字切换

// TextSwitcher.ets 
...
private index: number = 0
@Prop list: string[] = []
@State private text1: string = this.list[this.index % this.list.length]
@State private text2: string = ""


aboutToAppear(): void {
  setInterval(() => {
    animateTo({
      ...
    }, () => {
      if (this.flag) {
        ...
        this.text2 = this.list[(this.index + 1) % this.list.length]
      } else {
        ...
        this.text1 = this.list[(this.index + 1) % this.list.length]
      }
    })
  }, this.interval)
}


build() {
  Stack() {
    Text(this.text1)
      ...
    Text(this.text2)
      ...
  }
  .alignContent(Alignment.Start)
}

最后，增加入口页面，上完整代码。

// Index.ets
import { TextSwitcher } from '../components/TextSwitcher'

@Entry
@Component
struct Index {
  @State list: string[] = ["推荐词 1", "推荐词 2", "推荐词 3"]

  build() {
    Column() {
      TextSwitcher({ list: this.list })
        .width('100%')
        .height(40)
        .borderRadius(20)
        .backgroundColor('#22232323')

      Button('切换推荐词').onClick(() => {
        this.list = ["Hello World", "Hello HarmonyOS"]
      }).margin(20).stateStyles({
        pressed: {
          .backgroundColor("#33003cff")
        },
        normal: {
          .backgroundColor("#003cff")
        }
      })
    }
    .margin(20)
  }
}

// TextSwitcher.ets
@Component
export struct TextSwitcher {

  private index: number = 0
  @Prop list: string[] = []
  @State private text1: string = this.list[this.index % this.list.length]
  @State private text2: string = ""

  // 移动距离，每次从 transDistance 移动到 0 再移动到 -transDistance
  @State transDistance: number = 26
  // 动画持续时间
  @State animDuration: number = 500
  // 动画间隔
  @State interval: number = 2000

  // Text1 的 位移距离
  @State private trans1: number = 0
  // Text2 的 位移距离
  @State private trans2: number = this.transDistance
  // Text1 的 透明度
  @State private alpha1: number = 1
  // Text2 的 透明度
  @State private alpha2: number = 0
  // 标志位，用于判断当前是 Text1 还是 Text2 移动到中间
  @State private flag: boolean = true

  aboutToAppear(): void {
    setInterval(() => {
      animateTo({
        duration: this.animDuration,
        onFinish: () => {
          // 动画结束后，要把移动到容器上方的 Text 再移动至容器下方
          if (this.flag) {
            this.trans1 = this.transDistance
          } else {
            this.trans2 = this.transDistance
          }
          this.flag = !this.flag
          this.index++
        }
      }, () => {
        if (this.flag) {
          this.trans1 = -this.transDistance
          this.trans2 = 0
          this.alpha1 = 0
          this.alpha2 = 1
          this.text2 = this.list[(this.index + 1) % this.list.length]
        } else {
          this.trans1 = 0
          this.trans2 = -this.transDistance
          this.alpha1 = 1
          this.alpha2 = 0
          this.text1 = this.list[(this.index + 1) % this.list.length]
        }
      })
    }, this.interval)
  }


  build() {
    Stack() {
      Text(this.text1)
        .fontColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
        .height('100%')
        .translate({ y: this.trans1 })
        .opacity(this.alpha1)
      Text(this.text2)
        .fontColor(Color.Gray)
        .fontWeight(FontWeight.Bold)
        .height('100%')
        .translate({ y: this.trans2 })
        .opacity(this.alpha2)
    }
    .alignContent(Alignment.Start)
    .padding({ left: 20, right: 20 })
    .clip(true)
  }
}

知识点总结

• 层叠布局 Stack ，有点类似于 Android 中的 FrameLayout
• 文本组件 Text ，类似于 Android 中的 TextView
• 显式动画 animateTo，类似于 Android 中的属性动画
• 组件生命周期 aboutToAppear，在组件即将出现时回调。具体时机为在创建自定义组件的新实例后，在执行其 build() 函数之前执行。
• 组件的 translate 属性，类似 Android 的 translationX、translationY
• 组件的 opacity 属性，类似 Android 的 alpha
• @State 装饰器，组件内状态同步
• @Prop 装饰器，父组件向子组件单向同步

最后
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

鸿蒙HarmonyOS Next全套学习资料←点击领取！（安全链接，放心点击）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

• ArkTS语言
• 安装DevEco Studio
• 运用你的第一个ArkTS应用
• ArkUI声明式UI开发
• .……

《鸿蒙开发进阶》

• Stage模型入门
• 网络管理
• 数据管理
• 电话服务
• 分布式应用开发
• 通知与窗口管理
• 多媒体技术
• 安全技能
• 任务管理
• WebGL
• 国际化开发
• 应用测试
• DFX面向未来设计
• 鸿蒙系统移植和裁剪定制
• ……

《鸿蒙进阶实战》

• ArkTS实践
• UIAbility应用
• 网络案例
• ……

大厂面试必问面试题

鸿蒙南向开发技术

鸿蒙APP开发必备

鸿蒙生态应用开发白皮书V2.0PDF

获取以上完整鸿蒙HarmonyOS学习资料

请点击→

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。