鸿蒙HarmonyOS NEXT开发：ImageAnimator（基础组件）

最新推荐文章于 2024-09-23 16:11:41 发布
最新推荐文章于 2024-09-23 16:11:41 发布
阅读量1k 收藏 11
点赞数 9
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 鸿蒙 android 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanbbq/article/details/141228474
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

ImageAnimator

提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。

说明：

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

子组件

无

接口

ImageAnimator()

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

属性

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

images

images(value: Array<ImageFrameInfo>)

设置图片帧信息集合。不支持动态更新。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueArray<ImageFrameInfo>是设置图片帧信息集合。每一帧的帧信息(ImageFrameInfo)包含图片路径、图片大小、图片位置和图片播放时长信息，详见ImageFrameInfo属性说明。
默认值：[]

state

state(value: AnimationStatus)

控制播放状态。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueAnimationStatus是默认为初始状态，用于控制播放状态。
默认值：AnimationStatus.Initial

duration

duration(value: number)

设置播放时长。当Images中任意一帧图片设置了单独的duration后，该属性设置无效。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是播放时长。
value为0时，不播放图片。
value的改变只会在下一次循环开始时生效。
单位：毫秒
默认值：1000ms

reverse

reverse(value: boolean)

设置播放方向。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是播放方向。
false表示从第1张图片播放到最后1张图片，true表示从最后1张图片播放到第1张图片。
默认值：false

fixedSize

fixedSize(value: boolean)

设置图片大小是否固定为组件大小。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueboolean是设置图片大小是否固定为组件大小。 true表示图片大小与组件大小一致，此时设置图片的width 、height 、top 和left属性是无效的。false表示每一张图片的width 、height 、top和left属性都要单独设置。
默认值：true

preDecode(deprecated)

preDecode(value: number)

设置预解码的图片数量。

从API version 9开始废弃。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是预解码的图片数量。例如该值设为2，则播放当前页时会提前加载后面两张图片至缓存以提升性能。
默认值：0

fillMode

fillMode(value: FillMode)

设置当前播放方向下，动画开始前和结束后的状态。动画结束后的状态由fillMode和reverse属性共同决定。例如，fillMode为Forwards表示停止时维持动画最后一个关键帧的状态，若reverse为false则维持正播的最后一帧，即最后一张图，若reverse为true则维持逆播的最后一帧，即第一张图。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueFillMode是当前播放方向下，动画开始前和结束后的状态。
默认值：FillMode.Forwards

iterations

iterations(value: number)

设置播放次数。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber是默认播放一次，设置为-1时表示无限次播放。
默认值：1

ImageFrameInfo对象说明

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

参数名称参数类型必填参数描述
srcstring | Resource9+ | PixelMap12+是图片路径，图片格式为svg，png和jpg，从API Version9开始支持Resource类型的路径，从API version 12开始支持PixelMap类型。
卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。
widthnumber | string否图片宽度。
默认值：0
从API version 10开始，该接口支持在ArkTS卡片中使用
heightnumber | string否图片高度。
默认值：0
从API version 10开始，该接口支持在ArkTS卡片中使用
topnumber | string否图片相对于组件左上角的纵向坐标。
默认值：0
从API version 10开始，该接口支持在ArkTS卡片中使用
leftnumber | string否图片相对于组件左上角的横向坐标。
默认值：0
从API version 10开始，该接口支持在ArkTS卡片中使用
durationnumber否每一帧图片的播放时长，单位毫秒。
默认值：0

事件

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

onStart

onStart(event: () => void)

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

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onPause

onPause(event: () => void)

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

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onRepeat

onRepeat(event: () => void)

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

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onCancel

onCancel(event: () => void)

状态回调，动画返回最初状态时触发。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

onFinish

onFinish(event: () => void)

状态回调，动画播放完成时或者停止播放时触发。

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

示例

播放Resource动画

// xxx.ets
@Entry
@Component
struct ImageAnimatorExample {
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1

  build() {
    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%')
  }
}
ts

播放PixelMap动画

import image from '@ohos.multimedia.image'
@Entry
@Component
struct ImageAnimatorExample {
  imagePixelMap: Array<PixelMap> = []
  @State state: AnimationStatus = AnimationStatus.Initial
  @State reverse: boolean = false
  @State iterations: number = 1
  @State images:Array<ImageFrameInfo> = []
  async aboutToAppear() {
    this.imagePixelMap.push(await this.getPixmapFromMedia($r('app.media.icon')))
    this.images.push({src:this.imagePixelMap[0]})
  }
  build() {
    Column({ space: 10 }) {
      ImageAnimator()
        .images(this.images)
        .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%')
  }

  private async getPixmapFromMedia(resource: Resource) {
    let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
      bundleName: resource.bundleName,
      moduleName: resource.moduleName,
      id: resource.id
    })
    let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength))
    let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
      desiredPixelFormat: image.PixelMapFormat.RGBA_8888
    })
    await imageSource.release()
    return createPixelMap
  }
}
ts

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

 

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，他们才能在这个变革的时代中立于不败之地。 

「已注销」
关注
专栏目录
HarmonyOS鸿蒙开发指南:基础组件 image-animator开发指导
sybh的博客
01-09 954
在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
HarmonyOS教育类APP项目实战系列课(1-10)
牛肉胡辣汤
06-29 824
Attributes & Styles：属性样式栏Grid：不能用于设置网格布局的______，该图标只有Div组件的Display样式被设置为grid时才会出现。Attributes & Styles：属性样式栏Properties：用于设置组件基本标识和外观显示特征的属性，如组件的______等属性。B. 不支持分布式但支持多端调测C. 不支持分布式但支单持多端调测D. 支持分布式但不支持多端调测。B. 不支持多端模拟仿真C. 不支持模拟仿真D. 支持单端模模拟仿真。A. 编码格式B. 版本信息。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：ImageAnimator）
m0_64420071的博客
03-08 1313
ArkTS声明式开发（基础手势：ImageAnimator）
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件
zy0412326的专栏
02-12 1121
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件。
鸿蒙NEXT版实战开发：UI开发之基础组件（image-animator）
最新发布
qq_39652397的博客
09-23 547
image-animator组件为图片帧动画播放器。
【鸿蒙实战开发】image-animator组件开发指导详解
HarmonyOS007的博客
08-14 898
image-animator组件为图片帧动画播放器。具体用法请参考image-animator。
鸿蒙开发之帧动画ImageAnimator
Lu_Ca的博客
01-18 861
鸿蒙帧动画需要借助组件ImageAnimator。使用的时候想要让动画动起来需要设置state为AnimationStatus.Running。
HarmonyOS三方组件的开发和绘制.pptx
09-26
在 HarmonyOS 应用程序开发中，用户界面（UI）的设计和三方组件的开发与绘制是至关重要的环节。本课程由 HarmonyOS 的资深开发者董昱主讲，他作为华为HDE，不仅拥有丰富的系统课程开发经验，还曾担任过华为首届...
HarmonyOS实现几种常见图片点击效果
HarmonyOSDev的博客
09-07 1357
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：如果可以直接访问Internet，只需进行。HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。：事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互。
ImageAnimator类方法(动画设计)
weixin_34029949的博客
02-25 292
ImageAnimator类常用方法如表所示。 表 ImageAnimator类常用方法方法说明Animate将多帧图像显示为动画CanAnimate返回一个布尔值，该值指示指定图像是否包含基于时间的帧Equals已重载。 确定两个Object实例是否相等（从Object继承）GetHashCode用作特定类型的哈希函数。GetHashCode适合在哈希算法和数据结构（如哈希表）中使...
Winform图片动画
01-09
Winform的图片实现类似ppt的棋盘动画的效果
【学习笔记】Windows GDI绘图(十三)动画播放ImageAnimator(可调速)
图南堂
06-07 1002
详解介绍ImageAnimator并使用默认方式和Timer可调速的方式播放Gif动画
C# ImageAnimator 绘制GIF偶尔红叉
assky124的专栏
12-06 2036
绘图是偶尔出现无法绘制的原因是，更新帧的时候，绘图界面调用绘制（此时GIF图片被占用，所以红叉）。 private void UpdatedFrameChanged(object s, EventArgs e) { _isUpdateFrame = true; ImageAnimator.UpdateFrames(_gi
OpenHarmony开发实战：动画样式（JS）(1)，快手面试经验java
2301_79772893的博客
04-15 1077
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。为了能够帮助大家快速掌握**鸿蒙（HarmonyOS NEXT）**应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
ArkTS开发系列之事件（2.8.2手势事件）
jay_chess的博客
06-25 714
【代码】ArkTS开发系列之事件（2.8.2手势事件）
最新鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Web）上篇，oppo技术面试经验
2401_84870954的博客
05-09 1116
深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！ 既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新需要这份系统化的资料的朋友，可以戳这里获取testObj = new TestObj(); build() { Column() {
WPF加载GIF的五种方式（Storyboard / WpfAnimatedGif / ImageAnimator / PictureBox / MediaElement）
dnazhd的博客
04-27 4298
1、使用Storyboard
OpenHarmony实战开发-动画概述
m0_70749039的博客
04-27 981
UI（用户界面）中包含开发者与设备进行交互时所看到的各种组件（如时间、壁纸等）。属性作为接口，用于控制组件的行为。例如，开发者可通过位置属性调整组件在屏幕上的位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值