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

 

 

 

目录
相关文章
|
1月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
442 139
|
1月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
309 137
|
1月前
|
数据采集 JavaScript 前端开发
开发比分App?你缺的不是程序员
开发体育比分App,关键不在代码,而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源,再找专业的产品、数据与技术人才协同,才能少走弯路。程序员最后入场,效率最高。
221 154
|
1月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
247 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
213 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
546 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
1月前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
260 11
|
1月前
|
人工智能 小程序 开发者
【一步步开发AI运动APP】十二、自定义扩展新运动项目03
继【一步步开发AI运动小程序】后,我们推出新系列【一步步开发AI运动APP】,助开发者打造高性能、优体验的AI运动应用。本文详解自定义扩展运动分析器的统一管理实现,提升代码复用性与可维护性,涵盖APP与小程序插件差异及完整代码示例,助力AI运动场景深度拓展。
|
1月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
129 0

热门文章

最新文章