基础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定义介绍

interface ImageAnimatorInterface {(): ImageAnimatorAttribute;
}

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

ImageAnimator属性介绍

declare class ImageAnimatorAttribute extends CommonMethod<ImageAnimatorAttribute> {images(value: Array<{src: string;width?: number | string;height?: number | string;top?: number | string;left?: number | string;duration?: number;}>,): ImageAnimatorAttribute;state(value: AnimationStatus): ImageAnimatorAttribute;duration(value: number): ImageAnimatorAttribute;reverse(value: boolean): ImageAnimatorAttribute;fixedSize(value: boolean): ImageAnimatorAttribute;preDecode(value: number): ImageAnimatorAttribute;fillMode(value: FillMode): ImageAnimatorAttribute;iterations(value: number): ImageAnimatorAttribute;
}
  • 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 时表示无限次播放。

简单样例如下所示:

@Entry
@Component
struct ImageAnimatorTest {build() {Column({ space: 10 }) {ImageAnimator().images([ // 序列帧资源数组{src: "/pages/loading_01.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_02.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_03.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_04.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_05.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_06.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_07.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_08.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_09.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_10.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_11.png", // 图片帧资源duration: 150 // 播放时长},{src: "/pages/loading_12.png", // 图片帧资源duration: 150 // 播放时长}]).state(AnimationStatus.Running) // 设置正在播放状态.iterations(-1) // 设置无限循环播放.preDecode(2) // 预加载2张图片.width(60).height(60)}.width('100%').height("100%").padding(10)}
}

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

官方案例:

// xxx.ets
@Entry
@Component
struct ImageAnimatorExample {@State state: AnimationStatus = AnimationStatus.Initial@State reverse: boolean = false@State iterations: number = 1build() {Column({ space: 10 }) {ImageAnimator().images([{src: $r('app.media.img1')},{src: $r('app.media.img2')},{src: $r('app.media.img3')},{src: $r('app.media.img4')}]).duration(2000).state(this.state).reverse(this.reverse).fillMode(FillMode.None).iterations(this.iterations).width(340).height(240).margin({ top: 100 }).onStart(() => {console.info('Start')}).onPause(() => {console.info('Pause')}).onRepeat(() => {console.info('Repeat')}).onCancel(() => {console.info('Cancel')}).onFinish(() => {console.info('Finish')this.state = AnimationStatus.Stopped})Row() {Button('start').width(100).padding(5).onClick(() => {this.state = AnimationStatus.Running}).margin(5)Button('pause').width(100).padding(5).onClick(() => {this.state = AnimationStatus.Paused     // 显示当前帧图片}).margin(5)Button('stop').width(100).padding(5).onClick(() => {this.state = AnimationStatus.Stopped    // 显示动画的起始帧图片}).margin(5)}Row() {Button('reverse').width(100).padding(5).onClick(() => {this.reverse = !this.reverse}).margin(5)Button('once').width(100).padding(5).onClick(() => {this.iterations = 1}).margin(5)Button('infinite').width(100).padding(5).onClick(() => {this.iterations = -1 // 无限循环播放}).margin(5)}}.width('100%').height('100%')}
}

 内置动画组件

LoadingProgress 

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

说明

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

子组件

接口

LoadingProgress()

创建加载进展组件。

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

属性

名称

参数类型

描述

color

ResourceColor

设置加载进度条前景色。

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

 官方案例:

// xxx.ets
@Entry
@Component
struct LoadingProgressExample {build() {Column({ space: 5 }) {Text('Orbital LoadingProgress ').fontSize(9).fontColor(0xCCCCCC).width('90%')LoadingProgress().color(Color.Blue)}.width('100%').margin({ top: 5 })}
}

跑马灯组件

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

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

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卡片中使用。

官方案例:

// xxx.ets
@Entry
@Component
struct MarqueeExample {@State start: boolean = falseprivate fromStart: boolean = trueprivate step: number = 50private loop: number = Infinityprivate src: string = "Running Marquee starts rolling"build() {Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {Marquee({start: this.start,step: this.step,loop: this.loop,fromStart: this.fromStart,src: this.src}).width(360).height(80).fontColor('#FFFFFF').fontSize(48).fontWeight(700).backgroundColor('#182431').margin({ bottom: 40 }).onStart(() => {console.info('Marquee animation complete onStart')}).onBounce(() => {console.info('Marquee animation complete onBounce')}).onFinish(() => {console.info('Marquee animation complete onFinish')})Button('Start').onClick(() => {if(this.start==false){this.start = true   //播放}else{this.start = false; //暂停}}).width(120).height(40).fontSize(16).fontWeight(500).backgroundColor('#007DFF')}.width('100%').height('100%')}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/328558.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式缓存

1.在centos中安装redis: 首先进入虚拟机&#xff0c;转到root用户 sudo su root我这报了很多错&#xff0c;安装前先执行下面的命令&#xff1a; yum install cpp yum install binutils yum install glibc yum install glibc-kernheaders yum install glibc-common yum insta…

定时发圈操作介绍

1、登陆已有的账号&#xff0c;点击到"朋友圈"功能 2、选择要发圈的微信号&#xff0c;编辑发圈的文案内容 3、自定义想要的时间点 4、点击"立即发送" 5、可进行跟圈

React 第三十二章 虚拟DOM

面试题&#xff1a;什么是虚拟DOM&#xff1f;其优点有哪些&#xff1f; 标准且浅显的答案 虚拟dom本质上就是一个普通的 JS 对象&#xff0c;用于描述视图的界面结构 虚拟 DOM 最早是由 React 团队提出来的&#xff0c;因此 React 团队在对虚拟 DOM 的定义上面有绝对的话语权。…

一物一码数字化营销进军调味品行业,五丰黎红“星厨俱乐部”火啦!

近日&#xff0c;由五丰黎红联合纳宝科技精心打造的小程序“星厨俱乐部”火啦&#xff01;一经上线就吸引了大量用户注册和参与&#xff0c;可以说取得了非常成功的市场反馈&#xff0c;那究竟是一个什么样的小程序&#xff0c;竟然有这么大的吸引力呢&#xff1f; 介绍小程序之…

不用投稿邮箱,怎样向各大新闻媒体投稿?

身为单位的信息宣传员,我深知肩上责任重大。每个月,完成单位在媒体上投稿发表文章的考核任务,就如同一场无声的赛跑,既要保证速度,更要注重质量。起初,我遵循“前辈们”的老路,一头扎进了邮箱投稿的海洋。但很快,现实给了我一记重拳——邮箱投稿的竞争犹如千军万马过独木桥,稿件…

JVM学习-虚拟机栈

虚拟机栈 每个线程创建时都会创建一个虚拟机栈&#xff0c;其内部保存一个个栈帧&#xff0c;对应一次次Java方法调用&#xff0c;栈是线程私有的。 生命周期: 与线程相同 作用 主管Java程序的运行&#xff0c;它保存方法的局部变量、部分结果、并参与方法的调用和返回。 …

JavaWeb文件上传/下载(Servlet)

效果 文件下载 文件上传 项目概述 Jakarta EE9&#xff0c;Web项目 项目文件结构 0 maven依赖&#xff0c;资源文件 <!-- lombok插件--> <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId&g…

【JAVA】嵌入式软件工程师-2025校招必备-详细整理

一、Java 基础 1.JDK 和 JRE 有什么区别&#xff1f; jdk&#xff1a;java development kit jre&#xff1a;java runtime Environment jdk是面向开发人员的&#xff0c;是开发工具包&#xff0c;包括开发人员需要用到的一些类。 jre是java运行时环境&#xff0c;包括java虚拟机…

fl studio试用版文件保存无法打开??一个方法教你免费打开!

前言 当下&#xff0c;各款编曲软件五花八门&#xff0c;而这其中最有声誉的必为FL Studio莫属 这个软件呢国人习惯叫他水果&#xff0c;拥有强大的录音、编曲、混音等功能&#xff0c;所以广受音乐圈欢迎。如今&#xff0c;大部分水果一旦有编曲所需&#xff0c;一般都要使用…

# 从浅入深 学习 SpringCloud 微服务架构(十七)--Spring Cloud config(1)

从浅入深 学习 SpringCloud 微服务架构&#xff08;十七&#xff09;–Spring Cloud config&#xff08;1&#xff09; 一、配置中心的 概述 1、配置中心概述 对于传统的单体应用而言&#xff0c;常使用配置文件来管理所有配置&#xff0c;比如 SpringBoot 的 application.y…

MySQL 身份认证漏洞 CVE-2012-2122

漏洞影响版本 MariaDB versions from 5.1.62, 5.2.12, 5.3.6, 5.5.23 are not.MySQL versions from 5.1.63, 5.5.24, 5.6.6 are not.演示 开启靶场 进入漏洞目录 cd /root/vulhub/mysql/CVE-2012-2122开启漏洞靶场 docker-compose up -d攻击 直接 运行 这个命令 for i i…

STM32F407 2个高级定时器生成2路无刷电机波形以及相电流采集程序(寄存器版)

stm32f407 高级定时1、定时8 生成20k 中心PWM 波形 并分别用其通道4 触发ADC1 ADC2 采样 用于分别两无刷电机foc 电流环控制&#xff0c;ADC1产生50us的电流采集完成中断&#xff0c;用于foc算法周期运算 主要参考高级定时器的寄存器和ADC寄存器 首先&#xff0c;要使用STM32F…

c++20---std::erase----std::erase_if

问题&#xff1a;如何删除满足条件的所有元素。 erase #include <iostream> #include <algorithm> #include <vector>int main(){std::vector<int> vec{1,2,3,1,1,1,1,1};std::erase(vec,1);for(int v:vec) std::cout<<v<<" "…

【计算机网络】物理层 通信基础、奈氏准则、香农公式 习题2

下列说法中正确的是( )。 A. 信道与通信电路类似&#xff0c;一条可通信的电路往往包含一个信道 B.调制是指把模拟数据转换为数字信号的过程 C. 信息传输速率是指通信信道上每秒传输的码元数 D.在数值上&#xff0c;波特率等于比特率与每符号所含的比特数的比值 信息传输速率&a…

CentOs安装

安装 开发工具 &#xff1a;GCC、 JDK、mysql 如果出现蓝屏&#xff0c;要在BIOS开启虚拟化支持&#xff0c;或者移除打印机。

西南大学计算机考研,选学硕还是专硕?西南大学计算机考研考情分析!

西南大学&#xff08;Southwest University&#xff09;是教育部直属&#xff0c;教育部、农业农村部、重庆市共建的重点综合大学&#xff0c;是国家首批"双一流"建设高校&#xff0c;"211工程"和"985工程优势学科创新平台"建设高校。现任党委书…

牛客NC343 和大于等于K的最短子数组【困难 前缀和 Java/Go】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/3e1fd3d19fb0479d94652d49c7e1ead1 思路 本答案利用前缀和解答&#xff0c;Java&#xff0c;Go答案通过&#xff0c;但是同样的代码用PHP的话有一个测试用例超时 应该还有更优秀的答案&#xff0c;后面找到更优…

fastadmin对登录token的处理

fastadmin对token的操作 最近开发遇到一个场景&#xff0c;需要绕过验证获取登录&#xff0c;所以恶补了一下这个知识点&#xff0c;这个主要就是控制fastadmin的token的问题 代码分步实现 class Xcxuser extends Api {//关于鉴权protected $noNeedLogin [login,getopenid,…

AWS简介

AWS AWS&#xff0c;全称为Amazon Web Services&#xff0c;是亚马逊公司旗下的云计算服务平台&#xff0c;自2006年起向全球用户提供广泛而深入的云计算服务。AWS是全球最全面、应用最广泛的云平台之一&#xff0c;它从全球的数据中心提供超过200项功能齐全的服务&#xff0c…

ospf基础

ospf 概述&#xff1a; 什么是ospf 开放式最短路径优先协议&#xff0c;一种最受欢迎的动态路由协议版本&#xff1a;ospfv2&#xff08;ipv4&#xff09;和ospfv3&#xff08;ipv6&#xff09;ospf位于OSI参考模型的第三层&#xff0c;数据封装在ip报头的后面协议号&#xf…