大家好,欢迎来到莓创 IT 技术频道;我是陈杨。
今天给大家介绍一款我开发的动画制作软件:IF 画。这款软件一开始是准备自己用来学习绘画跟学习制作动画视频的,如果学会成功了,自己就画画插画或者动画,然后投稿到各大短视频平台,做一位自媒体达人,就不再打代码了。但是当我写出这篇文章的时候,证明我失败了,我学不会,还是乖乖当一个程序员吧。
以前我是在 web 端实现的,这次我把他搬到了原生鸿蒙平台了,然后开放给大家使用,一起来学习,等到上架的时候(预计 12 月 15 日之前),大家可以在应用市场搜索一下:IF画
。这里有一个大福利
,只要你画出来的比我好,哪怕一点,都会送你终身会员
,大家尽情的画起来。回归正题,这次在原生鸿蒙实现整个软件,我们采用了鸿蒙端云一体化的能力来实现整个软件的开发,说实话,端云一体化对纯前端同学来说,真的比较友好、方便,减少了很多学习成本。
所以这次我们来讲一下整体思路以及端云一体化是怎么交互的:
从 web 迁移到鸿蒙,一开始在 web 的功能很简单,都是本地功能,简单的用服务器搭了一下生成动画视频的。而考虑到如果提供给大家一起使用的话,那就要整套服务都要支持了。所以我简单的设计了一下项目的架构以及云服务开发
简单的看两张图
从项目架构图我们可以看出来,未来我们 IF 画软件的功能是很多的,包括分布式协同
、拖拽流转
、分享
、音频导入
等等。一期我们先搭建整个基础框架以及绘画功能
、视频生成
功能。这些功能都来源我们鸿蒙的特性,从而才能实现。
这张图主要是端云一体化的流程,我们主要用到了以下技术:
云认证
:主要是实现华为账号一键认证。云函数
:主要是实现查询接口跟保存接口之类的云数据库
:主要是创建存储绘画数据与用户信息相关的表云存储
:这个很重要,以前用服务器的时候,上传下载存储静态图片麻烦的很。现在用云存储贼拉方便,都有对应的 API,直接在端侧上传,下载都可以。这个必须好评我们 IF 画软件也适配了多端的能力,大家可以在平板也可以尽情的绘画您的作品。
讲完整体架构之后,我再讲解一下一期的核心功能吧,让大家对我们有一个基础的了解:
我们利用了图形算法实现了部分笔触,例如:圆珠笔、铅笔、水彩笔、马克笔等等。这个可以说是最重要的功能,如果没有多功能笔触的绘画工具,那就不是一个好工具。以后我们还会实现更加真实更加好用的笔触。
除了笔触之外,我们还而外开发了每种笔触的特性,比如宽度、流量、间隔、分散、蔓延、颜色等等属性,再配合我们的绘画算法,绘画算法我们主要考虑了几个因素:压力感应、速度控制等等。来实现我们整个绘画过程的真实感。
我们软件主要有两种绘画模式
当你使用动画模式来绘画的时候,你绘画好每一帧内容之后,可以进入视频编辑器,第一期的视频编辑器比较简单,只可以控制帧数,然后预览对应的效果。最后生成视频与保存视频。未来我们也会实现更多的功能,比如添加音频、控制每一帧的动画等等。
介绍之前先说一下感受以及使用的一些缺点。
首先感受这块:
缺点这块:
感受跟缺点先讲到这里,我来分享一下我的开发案例
这次云侧加了一个很好的功能,也变向了解决从 0 到 1 的存活问题。这样就提高首页加载的速度了,就再也不怕加载超时或者加载不出来了。而且配置也很简单,在 AGC 配置平台配置要缓存的云函数,然后在代码对应的云函数加上loadMode: cloudFunction.LoadMode.PRELOAD
就可以了,简单易用
云认证首先要在主入口注册,以前是不需要的,以前创建一体化项目的时候就会自动携带,现在需要我们手动在 EntryAbility.ets 下注册。代码如下:
jsimport auth from '@hw-agconnect/auth';import buffer from '@ohos.buffer';export default class EntryAbility extends UIAbility { onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { let file = this.context.resourceManager.getRawFileContentSync('agconnect-services.json'); let json: string = buffer.from(file.buffer).toString(); auth.init(this.context, json); hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); }}
复制代码
这里有一个需要注意的点,agconnect-services.json 需要放在这个目录下面:项目根目录/AppScope/resources/rawfile/agconnect-services.json,而 rawfile 自己手动创建,agconnect-services.json 是从 agc 上面项目管理获取即可,这里是跟以前的不太一样的地方
以前的云存储,我都是放在云函数实现的,但是这次新版本之后,云函数调用的方法 data 已经不支持很长的字符串了,我这边需要传 base64 去保存,导致一直报错,所以我这次是换成端侧云存储,具体实现方式如下:
jsimport { cloudStorage } from '@kit.CloudFoundationKit';import common from '@ohos.app.ability.common';let context = getContext(this) as common.UIAbilityContext;
// 将base64存在沙箱中async writeFile(data: string): Promise<string> { let uri = '' let filesDir = getContext().filesDir; let filePath = '' const name = `${Date.now()}.png` try { filePath = context.cacheDir + `/${name}`; uri = fileUri.getUriFromPath(filePath); let file = fileIo.openSync(filePath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE); const reg = new RegExp("data:image/\w+;base64,") const base64 = data.replace(reg, ""); const dataBuffer = buffer.from(base64, 'base64') await fileIo.writeSync(file.fd, dataBuffer.buffer); fileIo.closeSync(file); } catch (Error) { console.log('Error.code', '----->👉', JSON.stringify(Error)); }
return "internal://cache/" + name
}
update () { const previewUrl = 'down/xxxx' // 这里是你云存储创建的目录down,然后后面是你要上传的文件名称 const bucket: cloudStorage.StorageBucket = cloudStorage.bucket('xxxx'); // 这里是你云存储的实例 // ArkUI上下文 await bucket.uploadFile(getContext(this), { localPath: await this.writeFile(item.imagUrl), // 本地文件路径 cloudPath: previewUrl // 云侧文件路径 }, (err: BusinessError, task: request.agent.Task) => { // 这个回调函数一定要写,不然上传不了 if (err) { console.error(`Upload file failed! Code: ${err.code}, message: ${err.message}`); return; } task.on('progress', (progress) => { console.info(`on progress ${JSON.stringify(progress)}`); }); task.on('completed', (progress) => { console.info(`on completed ${JSON.stringify(progress)}`); }); task.on('failed', (progress) => { console.error(`on failed ${JSON.stringify(progress)}`); }); task.on('response', (response) => { console.info(`on response ${JSON.stringify(response)}`); });
// start task task.start((err: BusinessError) => { if (err) { console.error(`Failed to start the uploadFile task, Code: ${err.code}, message: ${err.message}`); } else { console.info(`Succeeded in starting a uploadFile task.`); } }); });}
复制代码
这里需要注意的点就是:bucket.uploadFile 函数有三个参数,都是必填的,不然上传不了。我一开始以为第三个可以不用写,然后一直没上传成功,还以为是没获取到本地,最后才发现是没写回调,大家注意了。
创建一个云函数的步骤:打开你的项目云侧代码,找到 cloudfunctions 文件,然后右键,就可以看到 new --> cloud Function,点击即可创建。
然后这里如果你要装第三方依赖或者云服务器相关的依赖,要在对应的云函数目录下安装,如果你在整个项目里面安装依赖的话,上传的时候,就会打不到依赖,云函数调用就会报错,所以要避免这点
首先先安装以下四个依赖,我不知道最新的有没有变哈,这是我从 API9 的时候就开始用的了
js"@agconnect/cloudstorage-server": "^1.0.1","@agconnect/database-server": "^1.0.7","@hw-agconnect/common-server": "^1.2.4","@hw-agconnect/database-server": "^1.0.21",
复制代码
然后在云函数里面注册云数据库
const clouddb = require('@hw-agconnect/database-server/dist/index.js')import {AGCClient, CredentialParser} from "@agconnect/common-server"const path = require('path');// 加载凭证文件let client_name = "./db/agc-apiclient-chen.json"; // 你的认证json,从agc获取let client_path = path.join(__dirname, client_name);let credential = CredentialParser.toCredential(client_path);let agcClient;try { agcClient = AGCClient.getInstance();} catch { AGCClient.initialize(credential); agcClient = AGCClient.getInstance();}
clouddb.AGConnectCloudDB.initialize(agcClient);const agconnectCloudDB = clouddb.AGConnectCloudDB.getInstance(agcClient);//云数据库区块const zoneName = 'MeichuangEdit';const cloudDBZoneConfig = new clouddb.CloudDBZoneConfig(zoneName);const mCloudDBZone = agconnectCloudDB.openCloudDBZone(cloudDBZoneConfig);
复制代码
这里注册之后就可以使用云数据库的查询、保存、更新、删除等等功能了,这个我放在后面详细的讲吧,东西很多。然后还有一个要注意就是,判断是否已经实例化了,就是上面代码的 try{}catch{},以前是不需要的,新版本需要了,我也是查了很久资料才知道,文档上是没写的,所以大家要注意避开。
我们今天的分享就讲到这里吧,云服务有机会的话我会单独出一套系列的文章给大家分享,我还注册了 b 站的讲师,也可以给大家录课,但是就是太忙了,抽不出身来去做这些事情,等以后吧,相信不会太久,大家可以先去关注我的 B 站,B 站搜索:莓创-陈杨。有技术问题都可以找我。
还有大家不要忘记了我们这个软件的福利哦,到时候记得来参与,鸿蒙原生应用市场搜索:IF 画。画出你的作品,只要画的比老板好,就送会员,最高奖励终身会员。快充吧
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有