场景

鸿蒙开发-基础组件介绍及chart组件使用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539

在上面学习了基础组件的使用流程后，下面介绍image-animator这个组件。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

Ability

Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。一个应用可以具备多种能力（即可以包含多个Ability），HarmonyOS支持应用以Ability为单位进行部署。Ability可以分为FA（Feature Ability）和PA（Particle Ability）两种类型，每种类型为开发者提供了不同的模板，以便实现不同的业务功能。

FA支持Page Ability：
Page模板是FA唯一支持的模板，用于提供与用户交互的能力。一个Page实例可以包含一组相关页面，每个页面用一个AbilitySlice实例表示。

PA支持Service Ability和Data Ability：
Service模板：用于提供后台运行任务的能力。
Data模板：用于对外部提供统一的数据访问抽象。
在配置文件（config.json）中注册Ability时，可以通过配置Ability元素中的“type”属性来指定Ability模板类型，示例如下。

其中，“type”的取值可以为“page”、“service”或“data”，分别代表Page模板、Service模板、Data模板。为了便于表述，后文中我们将基于Page模板、Service模板、Data模板实现的Ability分别简称为Page、Service、Data。

详细介绍可以参照其官方文档

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability-overview-0000000000029852

在js上右键新建ability-Empty Page Ability(JS)

然后配置ability，这里叫animator

点击Finish完成后

可以发现其和default是同级的。

image-animator图片帧动画播放器

image-animator 图片帧动画播放器，多图帧动画的构建能力一直以来都是基于 Android 安卓系统使用 Java or C#语言进行开发的，而华为鸿蒙系统将「图片帧动画播放器」引入到了 JS 前端开发领域，这无疑是一次巨大的突破，这也代表着华为鸿蒙系统对其图片渲染能力的巨大自信。

注意如果照片使用云端路径的话，需要配置权限

ohos.permission.INTERNET（如果使用云端路径）

官方文档地址：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-animator-0000001050066126

然后按照其官方文档指示，分别将animator下的pages下index下index.hml修改为

<div class="container"><image-animator class="animator" ref="animator" images="{{frames}}" duration="1s" /><div class="btn-box"><input class="btn" type="button" value="start" @click="handleStart" /><input class="btn" type="button" value="stop" @click="handleStop" /><input class="btn" type="button" value="pause" @click="handlePause" /><input class="btn" type="button" value="resume" @click="handleResume" /></div>
</div>

将index.css修改为

.container {flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px;
}
.animator {width: 70px;height: 70px;
}
.btn-box {width: 264px;height: 120px;flex-wrap: wrap;justify-content: space-around;align-items: center;
}
.btn {border-radius: 8px;width: 120px;margin-top: 8px;
}

将index.js修改为

export default {data: {frames: [{src: "/common/asserts/heart78.png",},{src: "/common/asserts/heart79.png",},{src: "/common/asserts/heart80.png",},{src: "/common/asserts/heart81.png",},{src: "/common/asserts/heart82.png",},{src: "/common/asserts/heart83.png",},{src: "/common/asserts/heart84.png",},{src: "/common/asserts/heart85.png",},{src: "/common/asserts/heart86.png",},{src: "/common/asserts/heart87.png",},{src: "/common/asserts/heart88.png",},{src: "/common/asserts/heart89.png",},{src: "/common/asserts/heart90.png",},{src: "/common/asserts/heart91.png",},{src: "/common/asserts/heart92.png",},{src: "/common/asserts/heart93.png",},{src: "/common/asserts/heart94.png",},{src: "/common/asserts/heart95.png",},{src: "/common/asserts/heart96.png",},],},handleStart() {this.$refs.animator.start();},handlePause() {this.$refs.animator.pause();},handleResume() {this.$refs.animator.resume();},handleStop() {this.$refs.animator.stop();},
};

然后选中index.hml点开预览按钮

可以看到此时图片有在动，但是因为图片没有，所以没有动画效果。

准备图片

在阿里巴巴矢量图上找到心型图标，然后选择大小不同的，使用截图软件截取同样大小尺寸的一组图。

然后将这一组图放在common下images目录下

然后修改Index.js中图片路径的代码

    data: {frames: [{src: "/common/images/1.png",},{src: "/common/images/2.png",},{src: "/common/images/3.png",},{src: "/common/images/4.png",},],},

保存后再查看预览

鸿蒙开发-新建Ability与使用image-animator实现图帧动画相关推荐

华为云HMS Core 助力鸿蒙开发
前言今天看了一期华为云 HMS Core 助力鸿蒙开发的视频.内容干货满满.下面就视频的内容做一下学习记录. 名词说明文中涉及到的相关名词鸿蒙OS == HarmonyOS HarmonyOS ...
鸿蒙开发工具在哪下载,【鸿蒙开发工具下载】华为鸿蒙开发工具软件下载 v2.1.8 最新版-七喜软件园...
华为鸿蒙开发工具是一款非常实用的集成式应用开发软件,它能够帮助大家更加的快捷,方便的使用华为EMUI系统打造应用.鸿蒙开发工具最新版还支持设备管理,支持代码编译,支持调试仿真等多项功能,可以满足大家的 ...
HarmonyOS开发详解（二）——鸿蒙开发体系详解及入门实例演示运行
本篇文章的计划,先体系的介绍一下鸿蒙开发相关的体系内容,希望通过本篇内容构建对鸿蒙开发体系的了解,最后再来一个最简单入门例子.既是自我的学习,也希望对你了解鸿蒙开发的全貌有帮助. 这样安排而没有直接写 ...
用鸿蒙开发AI应用（五）HDF 驱动补光灯
前言上一篇,我们在鸿蒙上运行了第一个程序,这一篇我们来编写一个驱动开启摄像头的红外补光灯,顺便熟悉一下鸿蒙上的 HDF 驱动开发. 硬件准备先查一下原理图(具体可参考第一篇的硬件资料),找到红外灯 ...
用鸿蒙开发AI应用（六）UI篇
前言上一篇,我们在鸿蒙上写了一个HDF驱动并操作了一下LED硬件,这一篇我们来尝试一下构建一个有简单界面的App,体验一下鸿蒙的前端开发流程. 环境准备 1. 安装DevEco Studio 解压相 ...
鸿蒙开发之网络框架搭建，MVP+Retrofit2+okhttp3+Rxjava2+RxHarmony
抓住人生中的一分一秒,胜过虚度中的一月一年! 小做个动图开篇引题鸿蒙背景 2020年9月10号,鸿蒙2.0(HarmonyOS 2.0)系统正式发布,鸿蒙2.0面向应用开发者发布Beta版本,在20 ...
鸿蒙开发-使用Storage实现数据存储
场景鸿蒙开发-从搭建todolist待办事项来学习组件与js之间的交互: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1183 ...
鸿蒙开发-在JS中获取hml页面中Input输入的值
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...
鸿蒙开发-实现页面跳转与页面返回
场景鸿蒙基于JS搭建HelloWorld并修改国际化文件: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118274050 在 ...

鸿蒙开发-新建Ability与使用image-animator实现图帧动画

场景

Ability

image-animator图片帧动画播放器

鸿蒙开发-新建Ability与使用image-animator实现图帧动画相关推荐

最新文章

热门文章