【开发者说】栏目是为 HarmonyOS 开发者提供的展现和分享平台，在这里，大家能够发表本人的技术洞察和见解，也能够展现本人的开发心得和成绩。欢送大家踊跃投稿，HarmonyOS 开发者公众号后盾回复【投稿】，即可取得投稿渠道。期待你们的分享~
本期咱们给大家带来的是 HarmonyOS 开发者翻新大赛决赛一等奖作者九弓子（张旭乾）的分享，心愿能给你的 HarmonyOS 开发之旅带来启发~
作为一名 Web 开发者，深入研究了 HarmonyOS 两年，关注 HarmonyOS 的起因很简略，就是 JS 语言能够做原生手机 APP 开发，于去年年底上架了一款本人的 HarmonyOS 手机 APP——XstoryMaker。
我集体比拟喜爱玩天黑请闭眼、狼人杀之类的推理游戏，做这个 APP 的初衷其实是想做一个工具，让视觉小说这种表达形式工具化。APP 上架到华为利用市场后，受到用户们宽泛好评，下载量超 8 万，评分达 4.7 分。
在加入 HarmonyOS 第二届翻新大赛时，我又用 JS 开发了服务卡片、Xbone 2D 骨骼动画等性能，通过多轮强烈角逐，荣膺本次开发者翻新大赛一等奖。
XstoryMaker 华为利用市场界面一、XstoryMaker 作品介绍
XstoryMaker 是一款鸿蒙生态的利用工具, 用户利用这款利用在手机端即可实现简略场景动画剧本制作；通过内置 2D 骨骼动画引擎，能疾速制作游戏动画，且反对将动画导出为 JSON 格局，不便更多平台运行与再创作。
阐明：什么是 2D 骨骼动画？
2D 骨骼动画次要是为了解决 2D 立体游戏动画制作中的一个古老的痛点，让骨骼可能自在产生形变静止。
该 APP 次要能实现以下性能：
1. 剧情设计性能
(1) 剧本疾速排序 + 角色仓库
通过剧幕切换的思路，设计剧情流水与人物对话
人物仓库疾速复用
(2) 分支剧情蓝图设计
形象剧幕为图形模块
分支器出入口联通剧情转场
剧情设计性能2. 2D 骨骼动画制作
用户在手机端即可实现 PNG 美术素材的切图组合及动画制作，Xbone 2D 动画引擎提供了 2D 动画在手机端制作的可能与工作流程。
(1) 动画素材姿态摆放：通过触摸的人机交互过程实现一个动画所需素材的摆放组合与图层治理。
(2) 图片疾速网格化：美术素材能够通过网格化操作主动疾速辨认通明区域进行主体辨认。
(3) 骨骼绑定形变：通过触摸即可实现对网格素材的权重绑定，不同骨骼作用于绑定的顶点，挪动顶点对图形进行相似肌肉与骨骼的静止设计。
(4) 动画关键帧插入与预览：轻触时间轴抉择不同的时间轴，摆放画面到新的地位，引擎会主动为用户进行补帧与动画预览的操作。
2D 骨骼动画引擎通过 XstoryMaker 生产的动画具备体积更小、产出更快、可视化分支走向等劣势；同时利用 HarmonyOS 分布式个性能够分享作品给身边的敌人
二、HarmonyOS 技术利用
在开发 XstoryMaker 的过程中，最让我印象最深的是“分布式文件”开发能力及“ArkUI”开发框架。
1. 分布式文件
分布式文件是我开发过程中被惊艳的零碎开发能力，在这样的设计下，只须要将文件通过简略的转存，另一台设施就能够像本机一样轻松拜访。
我在开发 XstoryMaker 对于视觉小说的分布式流转的时候基本没有感触到这是两台设施在做数据传输的开发，两个端的开发代码只须要依照一个设施的资源拜访思考形式就能够，不须要太多对于网络环境与数据索引的开发，这大大提高了多设施数据拜访的开发效率，在多设施互联互通，万物互联的开发场景下，HarmonyOS 太好用了。
XstoryMaker 对于分布式文件运作机制示意图阐明：分布式文件运作机制示意图
各设施雷同的 APP 都有独立的分布式文件存储空间，在进行分布式文件开发的时候，思考的对象是 APP 在配网环境下的独立软件设计，零碎中对于分布式文件的框架同样提供了新增订阅公布的设计，从而不须要思考其余网络与文件门路问题。
2. ArkUI
市面上从 Flash 年代开始，就始终有着 2D 骨骼动画的解决方案。次要思路是通过用户交互给须要变形的图像绑定一个形象的“骨骼”，通过挪动骨骼将图片变形。听起来如同不是很简单，但目前来说并没有任何一个具体的图像编辑软件将该性能彻底开源。所以我在加入 HarmonyOS 利用翻新大赛的时候，在 XstoryMaker 中退出了 Xbone 2D 骨骼动画的性能。
Xbone 动画展现在 HarmonyOS 零碎内开发这样的图形图像性能，应用 ArkUI 来实现，Canvas 组件大部分 API 都是 W3C 规范，能够间接调用，大大减少了代码的输出；同时 ArkUI 的实时界面预览性能，让开发成果视觉化出现，防止了反复开发，无效帮忙开发者们晋升利用界面的开发效率。
三、Xbone 动画制作教程
1. 华为利用市场下载 APP：XstoryMaker。
2. 进入利用首页新建 Xbone，抉择资源（举荐抉择 png 格局美术素材）。
3. 输出“项目名称”，进入 Xbone 动画制作场景。
4. 简略的位移与缩放。
位移与缩放操作5. 简略的骨骼配置：如果没有美术素材，利用内默认寄存了一套 SD 人物的素材包。存储地位为：利用首页 –> Xbone 我的项目列表，第一个我的项目为网友资助，点击“进入预览”，骨骼的配置须要提前将图片元素搁置画布，并且实现网格化。
骨骼配置操作6. 骨骼动画 ：骨骼动画的关键帧存储，只须要在摆放骨骼到须要的地位后“插入关键帧”即可，Xbone 动画引擎会帮忙你实现两帧之间骨骼的动画补帧。
阐明：什么是关键帧？
计算机动画术语，指角色或者物体静止变动中要害动作所处的那一帧，相当于二维动画中的原画。
插入关键帧
具体制作教程请查看开源地址：https://gitee.com/harmonyos/e…
目前 XstoryMaker 已上架了手机端 APP，手机端的目标是让用户疾速创作；想要生产更精密的作品，桌面端必不可少，XstoryMaker 的 PC 端及宽屏设施曾经在开发，通过 HarmonyOS 分布式，置信能够提供一套更顺畅的数据创作流程。
最初，作为一名深入研究 HarmonyOS 零碎两年，并开发上架了本人 APP 的开发者，我粗浅的感触到 HarmonyOS 在开发效率、多端互联等方面的先进性，值得开发者们退出进来！