原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧

简介: 原生app开发技巧——底部导航栏动画效果按钮制作方法之采用photoshop制作gif动画-过渡动画关键帧

 

我们要做的效果是如下,就像这个app一样底部的每个菜单点击是有动画的:

 

 1.gif

   

 

此问题来源于我们的一位ui设计师他无法制作Lottie动画无法输出.json格式给到我们的安卓工程师,因此还有一种方法就是做个gif图,而这个目前他也不会只有给大家来一手了,顺便学习记忆下。

 

这是ui原始给到的图,是我让他这样切得看起来是满足的,我打算订阅,发现,我的图标做放大效果,首页的笑脸做慢慢出来,小视频同理,本文就以第一个首页笑脸为例子即可,其他便可举一反三。

 1.png

1,准备工作

下载好蓝湖ui设计师做好的图,选择最大的就行了现在的app都要做适应,

 

2.png

 

3.png4.png 

然后打开ps,我们放入第一张首页未被选中(active)的图。

 

2,创建帧动画

 

打开窗口-时间轴-创建帧动画,

 

 

5.png

 

 

第一帧初始效果,第二帧为最终显示的效果,

第一帧用图层一,第二帧用图层二并且图层二放入我们最终效果图,这样直接gif是鬼畜感没有任何丝滑感,做原生app要的就是丝滑,进入下一步。

 

 

6.png

 

 

 

3,创建过渡动画

 

 

我们总共有两个动画效果,一个是房子从小变大,另一个是笑脸微笑,微笑,微笑起来。

 

先做房子从小变大,增加一个第二帧等比缩小一个红色小房子的图层,然后点击过渡动画帧,

 

7.png

 

这里数值我们写15,数值越大越丝滑但是时间也越长合适就行了,播放了一遍虽然丝滑但是不是我想要的效果,看来做到这效果害的视频关键帧。

 

 

 

 

8.png

 

 

4,创建视频关键帧

 

视频时间轴这里我们删除掉小房子这层因为用不上了,我把图层重新命名了下方便大家看,

 

9.png

 

10.png 

然后对红房子这里开始的地方创建变换关键帧,这是起的位置创建一个,尾部位置再创建一个,

 

11.png

 

由于起的时候我们需要房子从小变大,所以把起的关键帧的房子变成小房子。

 

 

12.png

 

微笑也是同理可得,好来看看我们的效果吧,

 

13.gif

 

ok满意,可能还要对速度和颜色以及起点的白房子进行调整下这样看着合理,做完后可以交给安卓工程师了,等我们这一版app的demo上线大家可以去观摩下。

 

 

 

目录
相关文章
|
29天前
|
人工智能 JSON 小程序
【一步步开发AI运动APP】七、自定义姿态动作识别检测——之规则配置检测
本文介绍了如何通过【一步步开发AI运动APP】系列博文,利用自定义姿态识别检测技术开发高性能的AI运动应用。核心内容包括:1) 自定义姿态识别检测,满足人像入镜、动作开始/停止等需求;2) Pose-Calc引擎详解,支持角度匹配、逻辑运算等多种人体分析规则;3) 姿态检测规则编写与执行方法;4) 完整示例展示左右手平举姿态检测。通过这些技术,开发者可轻松实现定制化运动分析功能。
|
8天前
|
人工智能 小程序 API
【一步步开发AI运动APP】九、自定义姿态动作识别检测——之关键点追踪
本文介绍了【一步步开发AI运动APP】系列中的关键点追踪技术。此前分享的系列博文助力开发者打造了多种AI健身场景的小程序,而新系列将聚焦性能更优的AI运动APP开发。文章重点讲解了“关键点位变化追踪”能力,适用于动态运动(如跳跃)分析,弥补了静态姿态检测的不足。通过`pose-calc`插件,开发者可设置关键点(如鼻子)、追踪方向(X或Y轴)及变化幅度。示例代码展示了如何在`uni-app`框架中使用`createPointTracker`实现关键点追踪,并结合人体识别结果完成动态分析。具体实现可参考文档与Demo示例。
|
13天前
|
API Go 网络架构
【Azure Logic App】特殊的方法来停止正常步骤无法停止的Workflow Job
本文介绍了一种特殊方法,用于解决标准版Logic App在异常情况下无法正常停止的问题。当点击Cancel按钮报错“WorkflowRunCanNotBeCancelled”时,可通过以下步骤解决:进入Logic App的Kudu页面,定位到`C:\home\site\wwwroot`目录下的`host.json`文件,添加`Jobs.SuspendedJobPartition`和`Jobs.CleanupJobPartition`参数,并以大写格式设置值为`"<WORKFLOWID>:2D<RUNID>"`。调整后可成功停止异常Job
66 18
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动APP】四、使用相机组件抽帧
本文介绍了如何使用`ai-camera`组件开发AI运动APP,助力开发者深耕AI运动领域。`ai-camera`是专为AI运动场景设计的相机组件,支持多平台,提供更强的抽帧处理能力和API。文章详细讲解了获取相机上下文、执行抽帧操作以及将帧保存到相册的功能实现,并附有代码示例。无论是AI运动APP还是其他场景,该组件都能满足预览、拍照、抽帧等需求。下篇将聚焦人体识别检测,敬请期待!
|
1月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
1月前
|
人工智能 小程序 开发者
【一步步开发AI运动APP】六、运动计时计数能调用
本文章介绍了如何通过【一步步开发AI运动APP】系列博文,利用uniAPP插件开发高性能的AI运动应用。文中详细说明了创建运动分析器、进行运动分析、监听计数变化以及停止/重置分析等功能实现步骤。插件内置多种常见运动(如跳绳、俯卧撑等),支持自定义扩展,满足健身、体测等场景需求。示例代码展示了人体检测、运动计时计数及UI更新的完整流程,帮助开发者快速上手并深耕AI运动领域。
|
1月前
|
缓存 开发工具 开发者
鸿蒙NEXT开发App相关工具类(ArkTs)
这段代码展示了一个名为鸿蒙NEXT开发 `AppUtil` 的工具类,主要用于管理鸿蒙应用的上下文、窗口、状态栏、导航栏等配置。它提供了多种功能,例如设置灰阶模式、颜色模式、字体类型、屏幕亮度、窗口属性等,并支持获取应用包信息(如版本号、包名等)。该工具类需在 UIAbility 的 `onWindowStageCreate` 方法中初始化,以便缓存全局变量。代码由鸿蒙布道师编写,适用于鸿蒙系统应用开发,帮助开发者更便捷地管理和配置应用界面及系统属性。
鸿蒙NEXT开发App相关工具类(ArkTs)
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动APP】五、人体检测能力调用
本文介绍如何开发性能更强、体验更优的AI运动APP,涵盖人体检测、实例创建、检测识别、骨骼图绘制及完整代码实现。通过API `createHumanDetector`,可灵活配置高性能、高精度或多人检测模式,省去模型部署麻烦。检测结果可通过`yz-pose-grapher`组件高效渲染骨骼图。最后提醒使用完毕需调用`destroy()`释放资源,下篇将聚焦运动检测分析,敬请期待!
|
1月前
|
人工智能 开发框架 小程序
【一步步开发AI运动APP】二、跨平台APP AI运动识别方案介绍
本系列博文旨在帮助开发者从【AI运动小程序】迈向性能更优的【AI运动APP】开发。通过「云智AI运动识别」uni-app版插件,提供本地原生极速识别、精准姿态检测及运动计时计数功能,支持健身系统、线上赛事、学生体测、康复锻炼等多场景应用。插件无需云端依赖,一次付费永久使用,成本低且扩展性强。同时兼容uni-app与uni-app x框架,适合不同技术背景的开发者快速上手,助力抢占AI辅助运动市场。下篇将介绍插件引入,敬请期待!
|
27天前
|
人工智能 小程序 API
【一步步开发AI运动APP】八、自定义姿态动作识别检测——之姿态相似度比较
本文介绍了如何通过姿态相似度比较技术简化AI运动应用开发。相比手动配置规则,插件`pose-calc`提供的姿态相似度比较器可快速评估两组人体关键点的整体与局部相似度,降低开发者工作量。文章还展示了在`uni-app`框架下调用姿态比较器的示例代码,并提供了桌面辅助工具以帮助提取标准动作样本,助力开发者打造性能更优、体验更好的AI运动APP。