鸿蒙OS常用组件：图片帧动画播放器-image-animator

最新推荐文章于 2024-10-18 15:06:51 发布
最新推荐文章于 2024-10-18 15:06:51 发布
阅读量745 收藏 24
点赞数 31
分类专栏： HarmonyOS 鸿蒙 OpenHarmony 文章标签： harmonyos 华为 学习 前端 html 鸿蒙 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84917132/article/details/141262835
版权
HarmonyOS 同时被 3 个专栏收录
159 篇文章 0 订阅
订阅专栏
鸿蒙
159 篇文章 0 订阅
订阅专栏
OpenHarmony
159 篇文章 0 订阅
订阅专栏

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",
      }
    ],
  },
};

设置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',
      },
    ],
  },
};

说明

  • 如果在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: '恢复'
    })
  }
}

场景示例

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

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 = '反向播放'
    }
  }
}

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

 点击→【纯血版鸿蒙全套最新学习资料】希望这一份鸿蒙学习资料能够给大家带来帮助~

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

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

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

点击→纯血版全套鸿蒙HarmonyOS学习资料

2.视频学习资料+学习PDF文档

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

HarmonyOS Next 最新全套视频教程

​​

 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

 纯血版鸿蒙全套学习资料（面试、文档、全套视频等）

                   

​​

鸿蒙南向开发技术

​​

鸿蒙APP开发必备

​​

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

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

​​

《鸿蒙开发基础》

​​

《鸿蒙开发进阶》

《鸿蒙进阶实战》

​​


点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

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

太空人_喜之郎
关注
专栏目录
HarmonyOS鸿蒙开发指南:基础组件 image-animator开发指导
sybh的博客
01-09 945
在本场景中，开发者可通过开始播放、停止播放等按钮切换图片的播放状态。 Image-animator组件通过调用start、pause、stop和resume方法控制图片的开始、暂停、停止和重新播放，通过getState方法查询图片的播放状态。
鸿蒙开发实战项目(三十三):image、image-animator组件的使用（JS）
sybh的博客
01-27 862
HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
HarmonyOS实现几种常见图片点击效果
HarmonyOSDev的博客
09-07 1335
设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：如果可以直接访问Internet，只需进行。HarmonyOS提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。：事件绑定在组件上，当组件达到事件触发条件时，会执行JS中对应的事件回调函数，实现页面UI视图和页面JS逻辑层的交互。
鸿蒙Harmony（六）ArkUI---基础组件：Image、Text、TextInput、Button、Slider
danfengw的博客
12-27 499
【代码】鸿蒙Harmony（六）ArkUI---基础组件：Image、Text、TextInput、Button、Slider。
HarmonyOS NEXT应用开发之图片缩放效果实现
maniuT的博客
03-11 513
图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。双指捏合缩放图片大小双击图片进行图片的大小切换图片在放大模式下，滑动图片查看图片的对应位置。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：ImageAnimator）
m0_64420071的博客
03-08 1299
ArkTS声明式开发（基础手势：ImageAnimator）
HarmonyOS开发案例：【image、image-animator组件】
鸿蒙的技术博客
04-26 797
OpenHarmony提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果，包括：点击阴影效果、点击切换状态、点击动画效果、点击切换动效。
鸿蒙开发-新建Ability与使用image-animator实现图帧动画
BADAO_LIUMANG_QIZHI的博客
06-29 962
场景 鸿蒙开发-基础组件介绍及chart组件使用： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539 在上面学习了基础组件的使用流程后，下面介绍image-animator这个组件。 注： 博客：https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 Ability Ability是应用所具备能力的抽象，也是应用
OpenHarmony开发实战：image、image-animator组件的使用（JS）
shudaoshanQAQ的博客
04-08 1104
OpenHarmony提供了常用的图片、图片帧动画播放器组件，开发者可以根据实际场景和开发需求，实现不同的界面交互效果
HarmonyOS鸿蒙基于Java开发: Java UI 动画开发指导
sybh的博客
01-14 941
动画是组件的基础特性之一，精心设计的动画使UI变化更直观，有助于改进应用程序的外观并改善用户体验。Java UI框架提供了帧动画、数值动画和属性动画，并提供了将多个动画同时操作的动画集合。
鸿蒙HarmonyOS兼容JS的类Web开发-开发指导
特创数字
01-11 1023
设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。通过设置x（x轴坐标）、y（y轴坐标）、dx（文本x轴偏移）、dy（文本y轴偏移）、fill（字体填充颜色）、stroke（文本边框颜色）、stroke-width（文本边框宽度）等属性实现文本的不同展示样式。
2024鸿蒙OS实战开发项目大全：从入门到精通（含101个实战案例）超详细的鸿蒙实战案例
sybh的博客
05-17 4496
从基础的UI组件到复杂的分布式场景，从ArkTS的细致教学到JS的灵活运用，这一百个项目涵盖了你需要知道的HarmonyOS实战技术和策略。我们会从溪村小镇的细节世界开始，深入多端部署的可能性，感受如购物应用和音乐专辑这样的实用系统是如何在HarmonyOS中获得生命的。忘却繁杂，把握简单，最后我们将以开发您的第一个快应用（初级版和高级版）为终结，为您的鸿蒙OS开发之旅画上完美的句号。这一百个项目不仅仅是教程或示例，它们是设计思维、创新灵感和开发技巧的集大成，是您实战开发HarmonyOS路上的重要伴侣。
OpenHarmony开发实战：动画样式（JS）(1)，快手面试经验java
2301_79772893的博客
04-15 1071
有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。为了能够帮助大家快速掌握**鸿蒙（HarmonyOS NEXT）**应用开发技术知识。在此给大家分享一下我结合鸿蒙最新资料整理出来的鸿蒙南北向开发学习路线以及整理的最新版鸿蒙学习文档资料。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙--商品列表
小白小白从不日别的博客
10-12 488
"color": [},},},},..."value": "精选"},"value": "手机"},"value": "服饰"},"value": "穿搭"},"value": "家居"},"value": "【新品上市】畅乐冰晶绿低脂新品"},"value": "【新品上市】奶茶自然清新亲近自然"},"value": "重磅推荐，MD新品试用中！},"value": "6662人评价 95%好评"},},},},},
鸿蒙应用开发:全面认识鸿蒙系统
最新发布
m0_60889254的博客
10-18 281
随着智能设备的普及和物联网的发展，对操作系统的需求也越来越多样化。鸿蒙操作系统作为一款面向全场景的分布式操作系统，其适用范围非常广泛，从智能手机到家用电器，再到工业设备，都能找到应用场景。特别是在智能家居领域，鸿蒙系统可以实现不同设备之间的无缝连接和协同工作，提供更加智能和便利的用户体验。物联网的快速发展也意味着对鸿蒙系统的需求将不断增加，为鸿蒙软件开发提供了广阔的市场前景。鸿蒙系统(HarmonyOS)是华为公司发布的一款基于微内核的面向全场景的分布式操作系统。
鸿蒙网络编程系列19-获取网络连接信息并选择一种绑定到应用示例
长弓三石
10-18 431
移动设备一般都具备移动网络和无线WIFI的连接能力，有些还可以接入有线以太网，这些网络可以根据需要随时切换。鸿蒙APP可以自动适应上述的网络，一般来说，会优先使用WIFI或者有线以太网，移动网络因为要收费，不会首选使用。但是在某些特殊情形下，可能要求必须使用某一种网络，比如必须使用蜂窝网络，这时候就需要显示的配置一下，指定app使用该网络类型。
HarmonyOS开发（State模型）
2301_79568779的博客
10-18 400
FA（Feature Ability）模型：从API 7开始支持的模型，已经不再主推。Stage模型：从API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。
鸿蒙网络编程系列21-使用HttpRequest上传任意文件到服务端示例
长弓三石
10-18 767
在前述文章鸿蒙网络编程系列11-使用HttpRequest上传文件到服务端示例中，为简化起见，只描述了如何上传文本类型的文件到服务端，对文件的大小也有一定的限制，只能作为鸿蒙API演示使用，在实际开发中上传的文件类型多样，大小不一，本文将介绍一种适应性更广的方法，可以上传任何类型的文件到服务端，并且不限制文件的大小。
harmonyos提供的哪些组件可以实现动画
06-29
HarmonyOS提供了丰富的UI组件和动画API，以帮助开发者实现流畅的用户体验。以下是一些关键组件和功能，用于创建动画： 1. **HarmonyOS UI框架**：它包含一套响应式的设计原则和组件，如`HarmonyComponent`、`RichView`等，这些组件默认支持基本的生命周期动画，比如淡入淡出、滑动等。 2. **Animatable接口**：这是HarmonyOS中动画的核心，许多组件和视图都实现了这个接口，允许开发者轻松设置动画属性，如Alpha、Scale、Translation等。 3. **Transition**：过渡效果用于在界面之间平滑切换，可以定制动画路径和时间，例如`ViewTransition`、`ViewStackTransition`等。 4. **Animator**：使用`Animator`和`ValueAnimator`可以创建更复杂的自定义动画，通过`Duration`、`Interpolator`和`Listener`控制动画行为。 5. **Lottie**（可选）：如果集成Lottie库，开发者还可以使用Adobe设计的矢量动画文件为应用添加高级动画。 6. **Easing Functions**：HarmonyOS提供了多种预定义的缓动函数，可以帮助创建更具吸引力的动画效果。 7. **AnimationOptions**：在调用组件方法时，可以传入`AnimationOptions`来配置动画的行为，如动画速度、是否循环等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值