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

快来打我* 2022-10-11 00:51 4阅读 0赞

# 场景 #

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

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118333539][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118333539]

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

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][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][https_developer.harmonyos.com_cn_docs_documentation_doc-guides_ability-ability-overview-0000000000029852]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

然后配置ability，这里叫animator

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1][]

点击Finish完成后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2][]

可以发现其和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][https_developer.harmonyos.com_cn_docs_documentation_doc-references_js-components-basic-image-animator-0000001050066126]

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

将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点开预览按钮

![20210629142553244.gif][]

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

准备图片

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3][]

然后将这一组图放在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",
                },
            ],
        },

保存后再查看预览

![20210629142609271.gif][]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118333539]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118333539
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[https_developer.harmonyos.com_cn_docs_documentation_doc-guides_ability-ability-overview-0000000000029852]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability-overview-0000000000029852
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221005/a0cd0d4f634d4ce98010292448d2e402.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 1]: /images/20221005/7dbd217d3ecd4fefaa1b3a35a03f0bd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 2]: /images/20221005/4d8e282e6cda4561b6e9d547c3504be9.png
[https_developer.harmonyos.com_cn_docs_documentation_doc-references_js-components-basic-image-animator-0000001050066126]: https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-basic-image-animator-0000001050066126
[20210629142553244.gif]: /images/20221005/26ceb569878841c38a9006ec22eb2eca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70 3]: /images/20221005/1aa6878232f94c02ae7c54080da636e0.png
[20210629142609271.gif]: /images/20221005/2417019df6664b22850cf8f4ba343e44.png