【鸿蒙实战开发】image-animator组件开发指导详解

最新推荐文章于 2025-05-14 08:59:36 发布
原创 最新推荐文章于 2025-05-14 08:59:36 发布 · 992 阅读 · 20 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #前端 #ui #android

image-animator组件为图片帧动画播放器。具体用法请参考image-animator。

创建image-animator组件

在pages/index目录下的hml文件中创建一个image-animator组件，css文件中编写组件样式，js文件中引用图片。

<!-- xxx.hml -->
<div class="container">
  <image-animator class="animator" images="{{frames}}" duration="3s"/>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F1F3F5;
}
.animator {
  width: 500px;
  height: 500px;
}

// index.js
export default {
  data: {
    frames: [
      {
        src: "/common/landscape1.jpg",
      },
      {
        src: "/common/landscape2.jpg",
      }
    ],
  },
};

0000000000011111111.20240813092135.45194282131306120860548021101153.gif

设置image-animator组件属性

添加iteration（播放次数）、reverse（播放顺序）、fixedsize（图片大小是否固定为组件大小）、duration（播放时长）和fillmode（执行结束后的状态）属性，控制图片的播放效果。

<!-- xxx.hml -->
<div class="container">
  <image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}"   duration="5s" />
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #F1F3F5;
}
.animator {
  width: 500px;
  height: 500px;
}

// index.js
export default {
  data: {
    frames: [
      {
        src: 'common/landscape1.jpg',
        width: '250px',
        height: '250px',
        left: '150px',
        top: '50px',
      },
      {
        src: 'common/landscape2.jpg',
        width: '300px',
        height: '300px',
        left: '150px',
        top: '100px',
      },
      {
        src: 'common/landscape1.jpg',
        width: '350px',
        height: '350px',
        left: '150px',
        top: '150px',
      },
      {
        src: 'common/landscape2.jpg',
        width: '400px',
        height: '400px',
        left: '150px',
        top: '200px',
      },
      {
        src: 'common/landscape3.jpg',
        width: '450px',
        height: '450px',
        left: '150px',
        top: '250px',
      },
      {
        src: 'common/landscape4.jpg',
        width: '500px',
        height: '500px',
        left: '150px',
        top: '300px',
      },
    ],
  },
};

0000000000011111111.20240813092135.71162285818576081104117849305318.gif

说明

  • 如果在images属性中设置了单独的duration属性，在image-animator组件中设置的duration属性无效。

  • 如果fixedsize属性值设置为true，图片的width 、height 、top 和left属性无效。

  • 如果reverse属性值设置为false，表示从第1张图片播放到最后1张图片。 如果reverse属性值设置为true，表示从最后1张图片播放到第1张图片。

绑定事件

向image-animator组件添加start、pause、stop和resume事件。当图片播放器开始播放时触发start事件，当图片播放器被点击时触发pause事件，长按图片播放器触发resume事件，图片播放器停止播放时触发stop事件。

<!-- xxx.hml -->
<div class="doc-page">
  <image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause"   onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
  </image-animator>
</div>

/* xxx.css */
.doc-page {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
   background-color: #F1F3F5;
}
.img {
  width: 600px;
  height: 600px;
  border: 3px solid orange;
}

// index.js
import promptAction from '@ohos.promptAction';
export default {
  data: {
    imginfo: [
      {
        src: 'common/landscape1.jpg',
      },{
        src: 'common/landscape2.jpg',
      },{
        src: 'common/landscape3.jpg',
      },{
        src: 'common/landscape4.jpg',
      }
    ],
  },
  onInit() {
  },
  setpause(e) {
    this.$element('img').pause()
  },
  setresume(e) {
    this.$element('img').resume()
  },
  popstart(e) {
    promptAction.showToast({
      message: '开始'
    })
  },
  poppause(e) {
    promptAction.showToast({
      message: '暂停'
    })
  },
  popstop(e) {
    promptAction.showToast({
      message: '停止'
    })
  },
  popresume(e) {
    promptAction.showToast({
      message: '恢复'
    })
  }
}

0000000000011111111.20240813092135.69202440361594240434336637171209.gif

场景示例

在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。

image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。

<!-- xxx.hml -->
<div class="doc-page">
  <image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s">
  </image-animator>
  <div style="width: 700px;height:450px;margin-top: 40px;flex-direction:column;justify-content:space-around;">
    <div class="container">
      <button type="capsule" value="开始播放" onclick="startimg"></button>
      <button type="capsule" value="暂停播放" onclick="pauseimg"></button>
    </div>
    <div class="container">
      <button type="capsule" value="停止播放" onclick="stopimg"></button>
      <button type="capsule" value="重新播放" onclick="resumeimg"></button>
    </div>
    <div class="container">
      <button type="capsule" value="获取播放状态" onclick="getimgstate"></button>
      <button type="capsule" value="{{revVal}}" onclick="revimg"></button>
    </div>
  </div>
</div>

/* xxx.css */
.doc-page {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
.img {
  width: 600px;
  height: 600px;
  border: 3px solid orange;
}
button{
  width: 260px
}
.container {
  width: 100%;
  height: 120px;
  align-items: center;
  justify-content: space-around;
}

// index.js
import promptAction from '@ohos.promptAction';
export default {
  data: {
    rev:false,
    imginfo: [
      {
        src: 'common/landscape1.jpg',
      },{
        src: 'common/landscape2.jpg',
      },{
        src: 'common/landscape3.jpg',
      },{
        src: 'common/landscape4.jpg',
      }
    ],
    revVal: '反向播放'
  },
  onInit() {
  },
  startimg(e) {
    this.$element('img').start()
  },
  pauseimg(e) {
    this.$element('img').pause()
  },
  stopimg(e) {
    this.$element('img').stop()
  },
  resumeimg(e) {
    this.$element('img').resume()
  },
  getimgstate(e) {
    promptAction.showToast({
      message: '当前状态：' + this.$element('img').getState()
    })
  },
  revimg(e) {
    this.rev = !this.rev
    if (this.rev) {
      this.revVal = '正向播放'
    } else {
      this.revVal = '反向播放'
    }
  }
}

0000000000011111111.20240813092136.41882028948466812757006564450872.gif

写在最后

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

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

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

请点击→纯血版全套鸿蒙HarmonyOS学习文档

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

在这里插入图片描述

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

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

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

在这里插入图片描述

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

在这里插入图片描述

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

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

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

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

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

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

在这里插入图片描述

HarmonyOS鸿蒙开发指南:基础组件 image-animator开发指导
斌擎科技
01-09 1198
在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
鸿蒙5.0进阶开发：UI开发-容器组件（image-animator开发）
AyomQAQ的博客
01-06 599
image-animator组件为图片帧动画播放器。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：ImageAnimator）
m0_64420071的博客
03-08 1464
ArkTS声明式开发（基础手势：ImageAnimator）
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件
weixin_47730343的博客
02-12 1136
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之ImageAnimator组件
鸿蒙开发之帧动画ImageAnimator
Lu_Ca的博客
01-18 1249
鸿蒙帧动画需要借助组件ImageAnimator。使用的时候想要让动画动起来需要设置state为AnimationStatus.Running。
鸿蒙5.0版开发：ArkTS组件-基础组件（ImageAnimator）
m0_69424697的博客
09-13 1200
提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长。
【鸿蒙组件化开发】—— 基础组件(image-animator开发）
2401_88547687的博客
11-10 689
添加iteration（播放次数）、reverse（播放顺序）、fixedsize（图片大小是否固定为组件大小）、duration（播放时长）和fillmode（执行结束后的状态）属性，控制图片的播放效果。image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。在pages/index目录下的hml文件中创建一个image-animator组件，css文件中编写组件样式，js文件中引用图片。
鸿蒙HarmonyOS （开发进阶）image-animator图片帧动画播放器
m0_67143533的博客
10-29 1018
在pages/index目录下的hml文件中创建一个image-animator组件，css文件中编写组件样式，js文件中引用图片。
OpenHarmony实战开发-image、image-animator组件的使用。
m0_70749039的博客
04-01 868
OpenHarmony提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
hexo-migrator-image:~~DEPRECATED~~ 一个 Hexo 迁移器，可导入 Markdown 源中引用的远程或本地图像
06-17
hexo-migrator-image 一个 Hexo 迁移器，用于导入 Markdown 源中引用的远程或本地图像 安装 npm install hexo-migrator-image --save 它是如何工作的 此迁移器会扫描 hexo 博客文件夹中的所有.md文件以查找 Markdown 的图像标签。 然后下载（远程）或复制（本地）文件到source/images文件夹并更新帖子中的所有网址。 图像的文件名是其原始 url 的 SHA1 摘要。 每次都会为每个.md文件创建一个名为.md.#timestamp#.bak的备份文件。 但是，最好使用版本控制或制作副本以防万一。 用法 使用任何远程 url 或本地文件路径编写您的帖子并插入图像。 在部署之前，在你的 hexo 博客文件夹中运行： hexo 迁移图像
鸿蒙开发之动画
Lu_Ca的博客
12-14 1193
鸿蒙开发中动画按照基础能力分，可以分成三种：属性动画、显示动画、转场动画。使用属性动画产生布局更新动画 显式动画(animateTo）和属性动画(animation）是ArkUI提供的最基础和常用的动画功能。在布局属性（如尺寸属性、位置属性）发生变化时，可以通过属性动画或显式动画，按照动画参数过渡到新的布局参数状态。
【HarmonyOS】【JS】小白的鸿蒙学习之路2--小小的图片啊，动呀动起来
华为开发者联盟
05-19 1767
4、上面所有的组件都定义了class属性，它对应的样式都定义在index.css中。index.hml：此文件定义了index页面的布局、index页面中用到的组件，以及这些组件的层级关系。index.js：此文件定义了index页面的业务逻辑，比如数据绑定、事件处理等。en-US.json：此文件定义了在英文模式下页面显示的变量内容。zh-CN.json：此文件定义了在中文模式下页面显示的变量内容。index.css：此文件定义了index页面的样式。image组件、动画。
HarmonyOS实现几种常见图片点击效果
HarmonyOSDev的博客
09-07 1608
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：如果可以直接访问Internet，只需进行。HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。：事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互。
5.11 image-animator组件
qq_63202674的博客
05-11 437
image-animator 图片帧动画播放器。 支持设备 手机 平板 智慧屏 智能穿戴 支持 支持 支持 支持 权限列表 ohos.permission.INTERNET（如果使用云端路径） 子组件 不支持。 属性 除支持通用属性外，还支持如下属性： 名称 类型
鸿蒙开发-新建Ability与使用image-animator实现图帧动画
BADAO_LIUMANG_QIZHI的博客
06-29 1133
场景 鸿蒙开发-基础组件介绍及chart组件使用： https://blog.youkuaiyun.com/BADAO_LIUMANG_QIZHI/article/details/118333539 在上面学习了基础组件的使用流程后，下面介绍image-animator这个组件。 注： 博客：https://blog.youkuaiyun.com/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 Ability Ability是应用所具备能力的抽象，也是应用
鸿蒙NEXT开发【@ohos.animator (动画)】UI界面API
CS9527DND的博客
10-15 1170
定义Animator类。
容器镜像同步工具image-migrator
nangonghen的博客
09-13 759
image-migrator是一个用于容器镜像同步的可执行二进制命令行工具（不依赖于docker命令），能够自动将基于Docker Registry v2镜像仓库（registry、云厂商容器镜像服务、docker hub、Quay、Harbor ）中的镜像迁移到基于Docker Registry v2的目标仓库。
#跟着若城学鸿蒙# HarmonyOS NEXT学习之ImageAnimator组件详解
最新发布
2301_78784268的博客
05-14 360
ImageAnimator是HarmonyOS NEXT提供的图片帧动画组件，用于实现一系列图片的连续播放效果。它可以控制动画的播放、暂停、停止等状态，并支持自定义动画时间、循环次数等属性。@Entry@Componentbuild() {.images([{},},}])Button('播放')})
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值