HarmonyOS鸿蒙Next中如何实现HackerText？

HarmonyOS鸿蒙Next中如何实现HackerText？我的应用中需要以黑客的显示屏一样展示一段文本, 我把它叫做 HackerText, 其效果类似如下:

当然, 效果肯定不是要这样的,

我的要求是: 文本一个字一个字的展示, 在显示文字的过程中, 最后一个文字是一些特殊字符的其中一个, 比如 !, ?, #, _, |, 等, 就像上面的动画里面的 | 一样.

文字的 Style 可以自定义.

不知道是否有大佬有实现思路?

yuanlaile 1楼•5 天前

代码说明：

思路是设置定时函数，每隔一秒增加一个字符串显示，等显示完整，再清空显示，反复循环。

@Entry
@Component
struct TextAreaExample {
  @State text: string = ''
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  controller: TextAreaController = new TextAreaController()
  // 待显示文本
  names: string[] = ['Hello', 'Bob', 'You', 'are', 'a', 'good', 'man', 'Loaded', 'and', 'parsed', 'script'];
  num: number = 0;

  aboutToAppear(): void {
    setInterval(this.callBack, 1000)
  }

  callBack = () => {
    if (this.num < this.names.length) {
      this.controller.caretPosition(this.num)
      this.text = this.text + " " + this.names[this.num++]
    } else {
      this.text = ""
      this.num = 0;
    }
  }

  build() {
    Column() {
      TextArea({
        text: this.text,
        controller: this.controller
      })
        .width(336)
        .height(56)
        .margin(20)
        .fontSize(16)
        .fontColor(Color.Green)
        .backgroundColor(Color.Black)
        .caretColor(Color.Green)
        .onEditChange((isEdit) => {
            isEdit = true
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }

  mergeText(names: string[]) {
    let res = ''
    names.forEach((name) => {
      res = res + name + " "
    })
  }
}

更多关于HarmonyOS鸿蒙Next中如何实现HackerText？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 2楼•5 天前

我更新了一下帖子中的 gif。

htzhanglong 3楼•5 天前

把定时的间隔时间调整短点应该就差不多了。

zlyuanteng 4楼•5 天前

如果展示的只是一个效果是不是可以提供准备好一个动图，然后再加载动图这些实现成本会不会小点

zlyuanteng 5楼•5 天前

关键是显示的文本是不固定的。动图解决不了不同文本的问题。

phonegap100 6楼•5 天前

在HarmonyOS鸿蒙Next中实现HackerText，可以使用Text组件结合Animation动画来实现动态文本效果。具体步骤如下：

创建Text组件：首先在布局文件中定义一个Text组件，用于显示文本。

<Text
    id="hackerText"
    width="100%"
    height="50vp"
    text="Hello, HarmonyOS!"
    textSize="20fp"
    textColor="#000000"
/>

定义动画：在resources/base/animation目录下创建一个动画资源文件，定义文本的变化效果。例如，可以创建一个hacker_animation.json文件，定义文本的透明度、颜色等属性的变化。

{
  "animations": [
    {
      "name": "hackerEffect",
      "duration": 1000,
      "iterations": -1,
      "curve": "linear",
      "keyframes": [
        {
          "fraction": 0,
          "properties": {
            "opacity": 1,
            "textColor": "#00FF00"
          }
        },
        {
          "fraction": 0.5,
          "properties": {
            "opacity": 0.5,
            "textColor": "#FF0000"
          }
        },
        {
          "fraction": 1,
          "properties": {
            "opacity": 1,
            "textColor": "#0000FF"
          }
        }
      ]
    }
  ]
}

应用动画：在代码中加载动画资源，并将其应用到Text组件上。

import animator from '@ohos.animator';

export default {
    onInit() {
        let text = this.$element('hackerText');
        let animation = animator.createAnimator('hacker_animation.json');
        animation.addTarget(text);
        animation.play();
    }
}

运行效果：运行应用后，Text组件中的文本会根据动画定义的效果动态变化，实现类似黑客文本的效果。

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现HackerText效果。

phonegap100 7楼•5 天前

在HarmonyOS鸿蒙Next中实现HackerText效果，可以通过以下步骤：

创建文本组件：使用Text组件作为基础。
自定义字体：引入或设计一种类似黑客风格的字体，如“Courier New”或其他等宽字体。
动画效果：使用Animator或AnimationController实现字符的逐字显示或闪烁效果。
随机字符生成：在动画过程中，随机生成字符并替换文本内容，模拟黑客破解过程。
定时器：使用Timer或ScheduledExecutorService控制字符变化的频率，增加真实感。