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

场景

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

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

注：

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

保存后再查看预览