• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Class (MarqueeDynamicSyncScene)
2
3提供Marquee组件相关帧率的配置。
4
5> **说明：**
6>
7> - 本模块首批接口从API version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> - 本Class首批接口从API version 14开始支持。
10>
11> - MarqueeDynamicSyncScene继承自[DynamicSyncScene](arkts-apis-uicontext-dynamicsyncscene.md)，对应[Marquee](arkui-ts/ts-basic-components-marquee.md)的动态帧率场景。
12
13## 属性
14
15**原子化服务API：** 从API version 14开始，该接口支持在原子化服务中使用。
16
17**系统能力：**  SystemCapability.ArkUI.ArkUI.Full
18
19| 名称       | 类型                                                      | 只读 | 可选 | 说明                                |
20| --------- | --------------------------------------------------------- | ---- | ---- | ---------------------------------- |
21| type      | [MarqueeDynamicSyncSceneType](./arkts-apis-uicontext-e.md#marqueedynamicsyncscenetype14) | 是   | 否   | Marquee的动态帧率场景。             |
22
23**示例：**
24
25```ts
26import { MarqueeDynamicSyncSceneType, MarqueeDynamicSyncScene } from '@kit.ArkUI';
27
28@Entry
29@Component
30struct MarqueeExample {
31  @State start: boolean = false;
32  @State src: string = '';
33  @State marqueeText: string = 'Running Marquee';
34  private fromStart: boolean = true;
35  private step: number = 10;
36  private loop: number = Number.POSITIVE_INFINITY;
37  controller: TextClockController = new TextClockController();
38  convert2time(value: number): string {
39    let date = new Date(Number(value+'000'));
40    let hours = date.getHours().toString().padStart(2, '0');
41    let minutes = date.getMinutes().toString().padStart(2, '0');
42    let seconds = date.getSeconds().toString().padStart(2, '0');
43    return hours+ ":" + minutes + ":" + seconds;
44  }
45  @State ANIMATION: ExpectedFrameRateRange = { min: 0, max: 120, expected: 30 };
46  private scenes: MarqueeDynamicSyncScene[] = [];
47
48  build() {
49    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
50      Marquee({
51        start: this.start,
52        step: this.step,
53        loop: this.loop,
54        fromStart: this.fromStart,
55        src: this.marqueeText + this.src
56      })
57        .marqueeUpdateStrategy(MarqueeUpdateStrategy.PRESERVE_POSITION)
58        .width(300)
59        .height(80)
60        .fontColor('#FFFFFF')
61        .fontSize(48)
62        .fontWeight(700)
63        .backgroundColor('#182431')
64        .margin({ bottom: 40 })
65        .id('dynamicMarquee')
66        .onAppear(()=>{
67          this.scenes = this.getUIContext().requireDynamicSyncScene('dynamicMarquee') as MarqueeDynamicSyncScene[];
68        })
69      Button('Start')
70        .onClick(() => {
71          this.start = true;
72          this.controller.start();
73          this.scenes.forEach((scenes: MarqueeDynamicSyncScene) => {
74            if (scenes.type == MarqueeDynamicSyncSceneType.ANIMATION) {
75              scenes.setFrameRateRange(this.ANIMATION);
76            }
77          });
78        })
79        .width(120)
80        .height(40)
81        .fontSize(16)
82        .fontWeight(500)
83        .backgroundColor('#007DFF')
84      TextClock({ timeZoneOffset: -8, controller: this.controller })
85        .format('hms')
86        .onDateChange((value: number) => {
87          this.src = this.convert2time(value);
88        })
89        .margin(20)
90        .fontSize(30)
91    }
92    .width('100%')
93    .height('100%')
94  }
95}
96```