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

 

 

 

相关文章
|
8天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
8天前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
116 3
|
8天前
|
Android开发 开发者 UED
个人开发 App 成功上架手机应用市场的关键步骤
个人开发 App 成功上架手机应用市场的关键步骤
|
8天前
|
开发工具 数据安全/隐私保护 Android开发
【教程】APP 开发后如何上架?
【教程】APP 开发后如何上架?
|
8天前
|
开发者 iOS开发
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
UniApp打包教程:使用HBuilder X和AppUploader完成原生App云打包和上架指南“
98 3
|
8天前
|
开发框架 前端开发 Android开发
专刊:随着技术进步,未来在线生成App将有更多可能性,为移动应用开发带来便利
【4月更文挑战第27天】在数字化时代,移动App变得不可或缺,而在线生成App的技术正逐渐兴起,为开发者提供快捷创建移动应用的途径。本文探讨了网页到App的转变过程,介绍了WebView嵌入、混合式开发框架和云端打包技术等方法,以及在线生成App的步骤、优势和挑战。虽然存在性能和功能限制,但随着技术进步,未来在线生成App将有更多可能性,为移动应用开发带来便利。
|
8天前
|
Android开发 iOS开发 开发者
App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法
App备案-iOS云管理式证书 Distribution Managed 公钥及证书SHA-1指纹的获取方法
165 0
|
3天前
|
Web App开发 JSON 小程序
苹果app开发apple-app-site-association文件配置
apple-app-site-association 是苹果的配置文件,用于建立app和网站关联,支持Universal Links,使点击网站链接能直接打开相应app内部页面。配置文件为JSON格式,需上传至服务器`.well-known`目录或根目录。通过检查三个链接来测试配置,确保Content-Type为`application/json`。成功配置后,点击链接能在iPhone备忘录或Safari中直接唤起app,但可能有24-48小时延迟。
24 6
|
6天前
|
JavaScript 前端开发 小程序
uni-app subNVue 原生子窗体开发指南
uni-app subNVue 原生子窗体开发指南
|
8天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
17 1