HarmonyOS Development: How to Achieve Text Marquee Effect

Foreword

this article is based on Api13

marquee scenes are very common. Messages, advertisements and announcement notices are common in daily development. The content is broadcasted from left to right or from right to left. In Hongmeng development, the implementation can be said to be very simple, and one attribute can be done.

For example, given a piece of content, let it scroll from right to left, the effect is as follows:

in Hongmeng, set the textooverflow attribute directly to the text component so that the value of overflow is textooverflow. MARQUEE:

Text(this.message)
        .textOverflow({ overflow: TextOverflow.MARQUEE })
        .border({ width: 1, color: Color.Gray })
        .padding({ top: 10, bottom: 10 })
        .margin({ left: 10, right: 10 })

although textooverflow. MARQUEE has achieved a ticker effect, there are still some problems. For example, I want to control the playback speed, or I want to pause scrolling, or I want to scroll from left to right, etc. There are many obstacles.

In order to solve these problems, Hongmeng provided us with a Marquee, a component specially used for Marquee, to solve the pain point of Text Marquee.

Marquee

Marquee is a specialized Marquee component for scrolling through a single line of text, with its own five properties available.

Property	type	overview
start	boolean	control whether the ticker enters the playing state.
step	number	scroll animated text scroll step, which can be used to control speed.
loop	number	set the number of times to repeat scrolling, Infinite Loop when less than or equal to zero
fromStart	boolean	set text to scroll from the beginning or reverse
src	string	text that needs to be scrolled

in addition, we can also change the style of the content through the text attribute.

Property	type	overview
fontColor	ResourceColor	set font color
fontSize	Length	set font size
fontWeight	number /FontWeight /string	set the font weight of the text. If it is set too large, it may be truncated under different fonts.
fontFamily	string/Resource	set Font List
allowScale	boolean	Set whether to allow text scaling
marqueeUpdateStrategy	MarqueeUpdateStrategy	after the ticker component properties are updated, the ticker's scrolling strategy. (This property takes effect when the ticker is in the playing state and the width of the text content exceeds the width of the ticker component.)

simple Case

@Entry
@Component
struct DemoPage {
  @State message: string = "I am a relatively long piece of content, mainly used to test the effect of the ticker and see how to scroll"
  @State start: boolean = true
  @State fromStart: boolean = true

  build() {
    Column() {
      Marquee({
        start: this.start,
        fromStart: this.fromStart,
        step: 2,
        src: this.message
      })

      Row() {
        Button("start")
          .onClick(() => {
            this.start = true
          })
        Button("stop")
          .onClick(() => {
            this.start = false
          })
        Button("Switch direction")
          .onClick(() => {
            this.fromStart = !this.fromStart
          })
      }.margin({ top: 10 })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Marquee can not only realize the function of ticker, but also monitor some events, such as triggering onStart when the scrolling text content changes or starts to scroll, triggering when one scroll is completed, if the number of cycles is not 1, the event will trigger the monitoring onBounce multiple times, and triggering callback to monitor onFinish when all the cycles are completed.

Related Summary

if it is just an ordinary ticker effect, and textooverflow. MARQUEE in the Text Text component can meet the demand, it is mainly Text. If you want to control the speed of the Text, pause and other functions, you can use it. Marquee, if you want to realize complex scene scrolling, such as pictures and nested scrolling of various components, this can only be defined by yourself.