页面加载动效怎么做_IT百科

在使用手机跳转页面的过程中，如果应用的UI做得比较细致的话，肯定会有相应的加载动效，加载一般就是运动等待的情况，虽然做起来不难，但是用户体验比较好，下面来学习一下怎么做一个简单的页面加载动效。

打开电脑中的AE软件，ctrl+n新建一个合成，合成的帧速率一般都是30f，宽高自定。

创建合成之后，在画布上我们先绘制一个椭圆，然后用“锚点工具”将圆的中心店移动到圆心。

接着将这个圆ctrl+c/v复制3个出来，要保证每个圆都是在不同的图层，一共有4个形状图层。

选择4个圆形，将位置距离进行适当调整，直接使用分布图层中的“水平居中分布”也可以进行对齐排列。

接着我们就来加关键帧，顺序是从左到右运动，先给左侧的图形在开始的位置加一个关键帧。

我们举例往上跳动，算好帧数，然后向上移动，再次添加关键帧。

跳上去之后肯定要落下去，再往后的帧数中向下移动，添加一个关键帧，帧数最好保证一致。

框选所有关键帧，右键关键帧后点击“关键帧辅助”，在里边给关键帧添加“缓动”辅助。

最后复制左侧圆的关键帧，算好相应的运动位置之后ctrl+v粘贴在别个图层中，这样就做好了一个简单的加载动效。

APP发现页面数据量大，需设计一个加载动效，提升用户体验。

1、商业价值（通过加载动效更好地吸引用户注意力，提升用户对内容的点击探索欲，提升阅读量）

2、用户体验价值（帮助用户理解当前所在的位置，缓解用户的等待情绪，促进用户体验）

3、遵循原则（动效应该是自然、和谐、可用的）

①物理规律：应该符合现实世界的真实物理效果，努力模仿自然界的物理运动

②品牌调性：应与整个产品的定位、风格相一致

③可用性：不能给用户错误的引导信息，影响用户的 *** 作

4、设计关键点：能否给用户直观的解释当前的位置，动效的趣味性，与发现页面的匹配

5、实现交付（动效是可实现的，应随时与开发人员沟通，保证动效的高度还原）

1、调研分析

查看大量学习、教育类APP的加载动效

在查看了今日头条、沪江网校、微信读书等APP之后，分析得出常见加载动效一共分为三种类型：

① 安卓、iOS原生动效

② 品牌logo

③个性化设计

因品牌logo在下拉刷新已用过，加载页面时间较长不适合原生动效，故选择个性化设计

2、创意

设计夹是学习类的APP，之前设计内容加载动效为书本翻页，发现页面为内容的上一页面，是许多成套的系统化内容，动效需保持与课程内容页面的关联性。

创意联想：

（书本 - 内容 - 笔记 - 资料 - 知识文件夹）

使用场景分析：用户打开发现页面，显示许多套系统化的知识内容。

一套内容 - 一个文件夹

多套内容 - 多个文件夹

成套的内容源源不断的向你输送而来（一个个文件夹向你输送而来）

由于开发成本的问题，此次设计采用了gif图实现效果。

切图只需要动效的部分即可，需保证动效在界面的中心位置。

Thanks.

欢迎分享，转载请注明来源：内存溢出

页面加载动效怎么做