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

 

 

 

相关文章
|
17天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
261 7
|
17天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
363 1
|
3天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
17天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
45 9
|
21天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
117 1
|
22天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
355 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
9天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
17天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
194 0
|
21天前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
293 0
|
25天前
|
机器学习/深度学习 搜索推荐 数据挖掘
北邮移动互联网应用大作业实验报告《云账本app》开发
北邮移动互联网应用大作业实验报告《云账本app》开发
33 0