HarmonyOS鸿蒙Next中竖排文字动画效果，适用于诗文展示

HarmonyOS鸿蒙Next中竖排文字动画效果，适用于诗文展示 废话不说，先上图看效果

效果图

这是一个自定义组件：

import { Point } from '@ohos.UiTest'

@ComponentV2
@Preview
export struct animotionText {
  @Param paragraph: string = "古今多少事\n都付笑谈中"
  @Param fontColor:Color|undefined|ResourceColor='black'
  @Local words: string[][] = []
  @Local wordOpacity: number[][] = []

  para2Array(paras: string): string[][] {
    let result: string[][] = []
    let sentences = paras.split("\n")
    this.wordOpacity.length = 0

    sentences.reverse()
    sentences.forEach((sentence, idx: number) => {
      result[idx] = []
      this.wordOpacity[idx] = []
      for (let i = 0; i < sentence.length; i++) {
        result[idx][i] = sentence[i]
        this.wordOpacity[idx][i] = 0.1
      }
    })
    return result
  }

  async setWordAnimotion(loc: Point, delay: number) {
    setTimeout(() => {
      this.wordOpacity[loc.x][loc.y] = 1
      let tloc: Point = { x: loc.x, y: loc.y + 1 }
      if (tloc.y > this.words[tloc.x].length - 1) {
        tloc = { x: loc.x + 1, y: 0 }
      }
      if (tloc.x > this.words.length - 1) {
        return
      }
      this.setWordAnimotion(tloc, delay)
    }, delay)
  }


  aboutToAppear(): void {
    this.words = this.para2Array(this.paragraph)
    this.setWordAnimotion({ x: 0, y: 0 }, 500)
  }

  build() {
    Column() {
      Row() {
        ForEach(this.words, (sentence: string[], idxSentence: number) => {
          Column() {
            ForEach(sentence, (word: string, idxWord: number) => {
              Text(word)
                .opacity(this.wordOpacity[this.words.length - idxSentence-1][idxWord])
                .animation({ curve: Curve.Ease })
                .fontSize(25)
                .fontWeight(FontWeight.Bolder)
                .fontColor(this.fontColor)
            })
          }
          .margin({left:5})
        })
      }

    }
  }
}

上图对应的代码

    Stack() {
        Image(this.NowPic)
          .borderRadius('5.00vp')
          .width('98%')
          .opacity(this.NowPicOpacity)
          .grayscale(this.NowPicOpacity)

        animotionText({fontColor:'#ffffff',paragraph:"青山依旧在 \n几度夕阳红"})
          .zIndex(99)
          .margin({top:20,left:20})
      }.alignContent(Alignment.TopStart)

里面 image 的属性 .opacity, .grayscale 可不设置，另有用途。

记录。分享。


更多关于HarmonyOS鸿蒙Next中竖排文字动画效果，适用于诗文展示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

牛皮，

基本信息

<div>
    <p>这是一些基本的<a href="#">链接</a>信息。</p>
    <img src="" alt="空图片">
    <p>这是另一段文本，包含一个<img src="image.jpg" alt="示例图片">。</p>
</div>

更多关于HarmonyOS鸿蒙Next中竖排文字动画效果，适用于诗文展示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，实现竖排文字动画效果可以通过使用Text组件结合Animation模块来完成。首先，设置Text组件的布局方向为垂直，通过flexDirection: 'column'实现竖排文字。然后，利用Animation模块定义动画效果，如渐入、滚动等。例如，可以使用opacity属性实现文字的渐入效果，或使用translateY属性实现文字的垂直滚动。以下是一个简单的代码示例：

import { Text, Animation } from '@ohos/harmonyos';

const text = new Text();
text.text = "床前明月光，疑是地上霜。举头望明月，低头思故乡。";
text.style.flexDirection = 'column';

const animation = new Animation({
  duration: 1000,
  iterations: 1,
  easing: 'ease-in-out',
  keyframes: [
    { opacity: 0, translateY: -100 },
    { opacity: 1, translateY: 0 }
  ]
});

animation.play(text);

这段代码实现了竖排文字的渐入效果。通过调整keyframes中的属性值，可以实现不同的动画效果，如滚动、缩放等。

在HarmonyOS鸿蒙Next中实现竖排文字动画效果，适用于诗文展示，可以通过以下步骤实现：

  1. 布局设置：使用Column或Flex布局，设置direction为垂直排列。
  2. 文字排版：使用Text组件，设置textAlign为左对齐或右对齐，确保文字垂直排列。
  3. 动画效果：利用Animator或Transition组件，为文字添加逐字或逐行出现的动画效果。例如，可以设置透明度从0到1的渐变，或文字从底部向上滑入的动画。
  4. 诗文展示：将诗文分段，每段文字应用上述动画效果，实现逐段展示的效果。

通过以上步骤，可以创建出流畅的竖排文字动画，提升诗文展示的视觉效果。

回到顶部