这是【从零撸美团】系列文章第二篇。
项目地址:https://github.com/cachecats/LikeMeiTuan
今天写了下拉刷新,框架用的是 SmartRefreshLayout ,不为啥,因为
Github 上它有 9.5k 个 star,中文支持好节省时间。
先上图:

一、分析
美团的下拉加载动画初看挺简单的,就一个卖萌的小人。细看的话还稍微有点复杂,一共有三个状态。
- 刚开始下拉的时候,小脑袋从小变大的过程。
- 下拉到一定程度但还没松手,小人翻了个跟头直到完全出现。再往下拉保持最后完全出现的状态。
- 松开后左右摇头卖萌直至加载结束回弹回去。
这是三个动画啊!真佩服这些大厂,简单的加载动画都搞这么复杂。。
分析完过程该想怎么实现了。
二、反编译app看实现原理
最简单直白的方法就是反编译美团app,虽然看不到代码但资源文件能还原出来,图片和 xml 文件完美还原。

反编译工具是 apktool,使用方法官网上都有就不啰嗦了。
大部分图片都放在 res/drawable-xhdpi-v4 和 res/drawable-xxhdpi-v4 两个文件夹内,仔细找下能看到多张连续的 loading 图片。这里给美团程序猿点个赞,文件命名都很规范,很好找~


看到图片后知道原来它用的是最普通的帧动画啊,也不是太复杂。
拿到资源图片,知道实现原理,就开工吧!
三、实现动画效果
首先自定义View CustomRefreshHeader 继承自 LinearLayout,并实现 SmartRefreshLayout 的 RefreshHeader 接口。
然后主要就是重写 RefreshHeader 接口中的方法,里面提供了下拉刷新时不同阶段的回调,找到对应的方法码代码就好。
public class CustomRefreshHeader extends LinearLayout implements RefreshHeader {
private ImageView mImage;
private AnimationDrawable pullDownAnim;

本文是【从零撸美团】系列的第二篇,介绍如何实现美团下拉刷新的自定义动画。通过分析美团APP,发现其采用帧动画实现加载效果。通过反编译获取资源图片,利用SmartRefreshLayout框架,自定义View并重写相关接口,最终实现下拉刷新时小人的三种动画状态。完整源码可在GitHub找到。
最低0.47元/天 解锁文章
9085

被折叠的 条评论
为什么被折叠?



