原生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上线大家可以去观摩下。

 

 

 

相关文章
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
661 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
732 1
|
6天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
|
2天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
23天前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
28天前
|
设计模式 Swift iOS开发
探索iOS开发:从基础到高级,打造你的第一款App
【10月更文挑战第40天】在这个数字时代,掌握移动应用开发已成为许多技术爱好者的梦想。本文将带你走进iOS开发的世界,从最基础的概念出发,逐步深入到高级功能实现,最终指导你完成自己的第一款App。无论你是编程新手还是有志于扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。让我们一起开始这段旅程吧!
家政服务小程序APP开发,做好上门家政最快的方法是什么?
在家政服务领域,打造成功的平台并非易事。本文分享了三个关键步骤:避免初期盲目投入、采用低成本获客方式、建立有效的阿姨筛选机制。遵循这些方法,可助你避开常见陷阱,成为行业头部平台。
|
1月前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
1月前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
2月前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。

热门文章

最新文章