• 基础ArkTS组件：帧动画，内置动画组件，跑马灯组件（HarmonyOS学习第三课【3.6】）

    帧动画

    帧动画也叫序列帧动画，其原理就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。ArkUI开发框架提供了 ImageAnimator 组件实现帧动画能力，本节笔者介绍一下 ImageAnimator 组件的简单使用。

    官方文献

    说明

    该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

    子组件

    无

    接口

    ImageAnimator()

    属性

    除支持通用属性外，还支持以下属性：

    参数名称

    参数类型

    参数描述

    images

    Array<ImageFrameInfo>

    设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，详见ImageFrameInfo属性说明。

    默认值：[]

    说明：

    不支持动态更新。

    state

    AnimationStatus

    默认为初始状态，用于控制播放状态。

    默认值：AnimationStatus.Initial

    duration

    number

    单位为毫秒，默认时长为1000ms；duration为0时，不播放图片；值的改变只会在下一次循环开始时生效；当images中任意一帧图片设置了单独的duration后，该属性设置无效。

    默认值：1000

    reverse

    boolean

    设置播放顺序。false表示从第1张图片播放到最后1张图片； true表示从最后1张图片播放到第1张图片。

    默认值：false

    fixedSize

    boolean

    设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。

    默认值：true

    preDecode(deprecated)

    number

    预解码的图片数量。例如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。

    从API version9开始废弃。

    默认值：0

    fillMode

    FillMode

    设置动画开始前和结束后的状态，可选值参见FillMode说明。

    默认值：FillMode.Forwards

    iterations

    number

    默认播放一次，设置为-1时表示无限次播放。

    默认值：1

    ImageFrameInfo对象说明

    参数名称

    参数类型

    必填

    参数描述

    src

    string | Resource9+

    是

    图片路径，图片格式为svg，png和jpg，从API Version9开始支持Resource类型的路径。

    width

    number | string

    否

    图片宽度。

    默认值：0

    height

    number | string

    否

    图片高度。

    默认值：0

    top

    number | string

    否

    图片相对于组件左上角的纵向坐标。

    默认值：0

    left

    number | string

    否

    图片相对于组件左上角的横向坐标。

    默认值：0

    duration

    number

    否

    每一帧图片的播放时长，单位毫秒。

    默认值：0

    事件

    除支持通用事件外，还支持以下事件：

    名称

    功能描述

    onStart(event: () => void)

    状态回调，动画开始播放时触发。

    onPause(event: () => void)

    状态回调，动画暂停播放时触发。

    onRepeat(event: () => void)

    状态回调，动画重复播放时触发。

    onCancel(event: () => void)

    状态回调，动画取消播放时触发。

    onFinish(event: () => void)

    状态回调，动画播放完成时触发。

    拓展部分

    ImageAnimator定义介绍

    1. interface ImageAnimatorInterface {
    2.   (): ImageAnimatorAttribute;
    3. }

    由源码可知，ImageAnimator 组件不需要设置额外的配置参数。

    ImageAnimator属性介绍

    1. declare class ImageAnimatorAttribute extends CommonMethod<ImageAnimatorAttribute> {
    2.   images(
    3.     value: Array<{
    4.       src: string;
    5.       width?: number | string;
    6.       height?: number | string;
    7.       top?: number | string;
    8.       left?: number | string;
    9.       duration?: number;
    10.     }>,
    11.   ): ImageAnimatorAttribute;
    12.   state(value: AnimationStatus): ImageAnimatorAttribute;
    13.   duration(value: number): ImageAnimatorAttribute;
    14.   reverse(value: boolean): ImageAnimatorAttribute;
    15.   fixedSize(value: boolean): ImageAnimatorAttribute;
    16.   preDecode(value: number): ImageAnimatorAttribute;
    17.   fillMode(value: FillMode): ImageAnimatorAttribute;
    18.   iterations(value: number): ImageAnimatorAttribute;
    19. }
    • images：设置图片帧信息集合。每一帧的帧信息包含图片路径、图片大小、图片位置和图片播放时长信息。详细说明如下：
      • src：图片路径，图片格式为 svg ，png ， jpg 和 webp 。
      • width：图片宽度。
      • height：图片高度。
      • top：图片相对于组件左上角的纵向坐标。
      • left：图片相对于组件左上角的横向坐标。
      • duration：每一帧图片的播放时长，单位毫秒。
    • state：设置播放状态， AnimationStatus 定义了以下 4 中状态：
      • Initial（默认值）：动画初始状态。
      • Running：动画处于播放状态。
      • Paused：动画处于暂停状态。
      • Stopped：动画处于停止状态。
    • fixedSize：设置图片大小是否固定为组件大小。 true 表示图片大小与组件大小一致，此时设置图片的 width 、 height 、 top 和 left 属性是无效的。 false 表示每一张图片的 width 、 height 、 top 和 left 属性都要单独设置。
    • preDecode：是否启用预解码，默认值为 0 ，即不启用预解码，如该值设为 2 ，则播放当前页时会提前加载后面两张图片至缓存以提升性能。
    • fillMode：设置动画开始前和结束后的状态， FillMode 参数类型说明如下：
      • None：播放完成后恢复初始状态。
      • Forwards：播放完成后保持动画结束时的状态。
    • iterations：设置播放次数，设置为 -1 时表示无限次播放。

    简单样例如下所示：

    1. @Entry
    2. @Component
    3. struct ImageAnimatorTest {
    4.   build() {
    5.     Column({ space: 10 }) {
    6.       ImageAnimator()
    7.         .images([ // 序列帧资源数组
    8.           {
    9.             src: "/pages/loading_01.png", // 图片帧资源
    10.             duration: 150 // 播放时长
    11.           },
    12.           {
    13.             src: "/pages/loading_02.png", // 图片帧资源
    14.             duration: 150 // 播放时长
    15.           },
    16.           {
    17.             src: "/pages/loading_03.png", // 图片帧资源
    18.             duration: 150 // 播放时长
    19.           },
    20.           {
    21.             src: "/pages/loading_04.png", // 图片帧资源
    22.             duration: 150 // 播放时长
    23.           },
    24.           {
    25.             src: "/pages/loading_05.png", // 图片帧资源
    26.             duration: 150 // 播放时长
    27.           },
    28.           {
    29.             src: "/pages/loading_06.png", // 图片帧资源
    30.             duration: 150 // 播放时长
    31.           },
    32.           {
    33.             src: "/pages/loading_07.png", // 图片帧资源
    34.             duration: 150 // 播放时长
    35.           },
    36.           {
    37.             src: "/pages/loading_08.png", // 图片帧资源
    38.             duration: 150 // 播放时长
    39.           },
    40.           {
    41.             src: "/pages/loading_09.png", // 图片帧资源
    42.             duration: 150 // 播放时长
    43.           },
    44.           {
    45.             src: "/pages/loading_10.png", // 图片帧资源
    46.             duration: 150 // 播放时长
    47.           },
    48.           {
    49.             src: "/pages/loading_11.png", // 图片帧资源
    50.             duration: 150 // 播放时长
    51.           },
    52.           {
    53.             src: "/pages/loading_12.png", // 图片帧资源
    54.             duration: 150 // 播放时长
    55.           }
    56.         ])
    57.         .state(AnimationStatus.Running) // 设置正在播放状态
    58.         .iterations(-1) // 设置无限循环播放
    59.         .preDecode(2) // 预加载2张图片
    60.         .width(60)
    61.         .height(60)
    62.     }
    63.     .width('100%')
    64.     .height("100%")
    65.     .padding(10)
    66.   }
    67. }

    每一帧图片自行配置即可逐帧播放

    官方案例：

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct ImageAnimatorExample {
    5.   @State state: AnimationStatus = AnimationStatus.Initial
    6.   @State reverse: boolean = false
    7.   @State iterations: number = 1
    8.  
    9.   build() {
    10.     Column({ space: 10 }) {
    11.       ImageAnimator()
    12.         .images([
    13.           {
    14.             src: $r('app.media.img1')
    15.           },
    16.           {
    17.             src: $r('app.media.img2')
    18.           },
    19.           {
    20.             src: $r('app.media.img3')
    21.           },
    22.           {
    23.             src: $r('app.media.img4')
    24.           }
    25.         ])
    26.         .duration(2000)
    27.         .state(this.state).reverse(this.reverse)
    28.         .fillMode(FillMode.None).iterations(this.iterations).width(340).height(240)
    29.         .margin({ top: 100 })
    30.         .onStart(() => {
    31.           console.info('Start')
    32.         })
    33.         .onPause(() => {
    34.           console.info('Pause')
    35.         })
    36.         .onRepeat(() => {
    37.           console.info('Repeat')
    38.         })
    39.         .onCancel(() => {
    40.           console.info('Cancel')
    41.         })
    42.         .onFinish(() => {
    43.           console.info('Finish')
    44.           this.state = AnimationStatus.Stopped
    45.         })
    46.       Row() {
    47.         Button('start').width(100).padding(5).onClick(() => {
    48.           this.state = AnimationStatus.Running
    49.         }).margin(5)
    50.         Button('pause').width(100).padding(5).onClick(() => {
    51.           this.state = AnimationStatus.Paused     // 显示当前帧图片
    52.         }).margin(5)
    53.         Button('stop').width(100).padding(5).onClick(() => {
    54.           this.state = AnimationStatus.Stopped    // 显示动画的起始帧图片
    55.         }).margin(5)
    56.       }
    57.  
    58.       Row() {
    59.         Button('reverse').width(100).padding(5).onClick(() => {
    60.           this.reverse = !this.reverse
    61.         }).margin(5)
    62.         Button('once').width(100).padding(5).onClick(() => {
    63.           this.iterations = 1
    64.         }).margin(5)
    65.         Button('infinite').width(100).padding(5).onClick(() => {
    66.           this.iterations = -1 // 无限循环播放
    67.         }).margin(5)
    68.       }
    69.     }.width('100%').height('100%')
    70.   }
    71. }

     内置动画组件

    LoadingProgress 

    用于显示加载动效的组件。 

    说明

    该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

    子组件

    无

    接口

    LoadingProgress()

    创建加载进展组件。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    属性

    名称

    参数类型

    描述

    color

    ResourceColor

    设置加载进度条前景色。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

     官方案例:

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct LoadingProgressExample {
    5.   build() {
    6.     Column({ space: 5 }) {
    7.       Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')
    8.       LoadingProgress()
    9.         .color(Color.Blue)
    10.     }.width('100%').margin({ top: 5 })
    11.   }
    12. }

    跑马灯组件

    跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动。

    使用跑马灯组件我们可以按照自己想要的样式来设定跑马灯

    Marquee

    说明

    该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

    子组件

    无

    接口

    Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boolean, src: string })

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    参数：

    参数名

    参数类型

    必填

    参数描述

    start

    boolean

    是

    控制跑马灯是否进入播放状态。

    说明：

    有限的滚动次数播放完毕后，不可以通过改变start重置滚动次数重新开始播放。

    step

    number

    否

    滚动动画文本滚动步长。

    默认值：6，单位vp

    loop

    number

    否

    设置重复滚动的次数，小于等于零时无限循环。

    默认值：-1

    说明：

    ArkTS卡片上该参数设置任意值都仅在可见时滚动一次。

    fromStart

    boolean

    否

    设置文本从头开始滚动或反向滚动。

    默认值：true

    src

    string

    是

    需要滚动的文本。

    属性

    除支持文本通用属性：fontColor、fontSize、fontWeight、fontFamily外，还支持以下属性：

    名称

    参数类型

    描述

    allowScale

    boolean

    是否允许文本缩放。

    暂不支持该接口。

    默认值：false

    事件

    名称

    功能描述

    onStart(event: () => void)

    开始滚动时触发回调。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    onBounce(event: () => void)

    完成一次滚动时触发，若循环次数不为1，则该事件会多次触发。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    onFinish(event: () => void)

    滚动全部循环次数完成时触发回调。

    从API version 9开始，该接口支持在ArkTS卡片中使用。

    官方案例：

    1. // xxx.ets
    2. @Entry
    3. @Component
    4. struct MarqueeExample {
    5.   @State start: boolean = false
    6.   private fromStart: boolean = true
    7.   private step: number = 50
    8.   private loop: number = Infinity
    9.   private src: string = "Running Marquee starts rolling"
    10.  
    11.   build() {
    12.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
    13.       Marquee({
    14.         start: this.start,
    15.         step: this.step,
    16.         loop: this.loop,
    17.         fromStart: this.fromStart,
    18.         src: this.src
    19.       })
    20.         .width(360)
    21.         .height(80)
    22.         .fontColor('#FFFFFF')
    23.         .fontSize(48)
    24.         .fontWeight(700)
    25.         .backgroundColor('#182431')
    26.         .margin({ bottom: 40 })
    27.         .onStart(() => {
    28.           console.info('Marquee animation complete onStart')
    29.         })
    30.         .onBounce(() => {
    31.           console.info('Marquee animation complete onBounce')
    32.         })
    33.         .onFinish(() => {
    34.           console.info('Marquee animation complete onFinish')
    35.         })
    36.       Button('Start')
    37.         .onClick(() => {
    38.           if(this.start==false){
    39.             this.start = true   //播放
    40.           }else{
    41.             this.start = false; //暂停
    42.           }
    43.         })
    44.         .width(120)
    45.         .height(40)
    46.         .fontSize(16)
    47.         .fontWeight(500)
    48.         .backgroundColor('#007DFF')
    49.     }
    50.     .width('100%')
    51.     .height('100%')
    52.   }
    53. }

  • 相关阅读:
    COLMAP生成MVSNet数据集
    redis高可用、redis集群、redis缓存优化
    Windows主机信息收集
    数据结构初步（三）- 线性表之顺序表的分析与C语言实现
    基于SSM+Vue的医院住院综合服务管理系统的设计与实现
    【科学文献计量】科学文献知识网络分析基础
    Java基础static关键字
    使用powerMock处理静态方法
    Sprin、SpringBoot、微服务的概念
    快应用参数传递
  • 原文地址：https://blog.csdn.net/qq_58213084/article/details/138597035