封装Android带Lottie动画的底部导航栏

  1. 什么是Lottie动画
    Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画,并且能让原生 App 像使用静态素材一样使用这些动画,完美实现动画效果,动画效果比原生动画要优美很多。Lottie动画由UI提供,UI给到我们的是xxx.json文件,这个文件就是动画文件。
    优点:动画效果好,灵活,导入方便,使用简单,可以从网络下载,支持多平台。
    缺点:性能没有属性动画好。

  2. 导入Lottie动画库
    github地址
    在app build.gradle 中导入
    implementation 'com.airbnb.android:lottie:$lottieVersion'
    $lottieVersion 为版本号。
    注意2.8.0及之后的版本加入了android x, 如果你的项目没有使用android x ,要使用2.8.0之前的版本,否则会编译失败

Lottie 2.8.0 and above only supports projects that have been migrated
to androidx.

  1. 导入动画文件
    在 main文件夹下创建assets文件夹,将json文件放入assets文件夹下。需要确认json中是否包含本地文件路径,例如 img0/image1.png,如果存在,需要将本地图片按路径存储,否则运行会报错。
    在这里插入图片描述
  2. 代码中实现动画播放
    关键类 LottieAnimationView ,LottieDrawable 。此类实现Lottie动画的配置及控制。
    LottieAnimationView继承AppCompatImageView,所以它是支持Lottie的Imageview。
mLottieView.setImageAssetsFolder("image0"); //设置本地文件路径
mLottieView.setRepeatCount(0); //设置重复次数,默认0
mLottieView.setAnimation(mAnimationPath);//mAnimationPath 是动画json文件的相对路径
mLottieView.playAnimation();//播放动画  
//其他属性自行搜索

以上配置也可以在xml中配置。

app:lottie_fileName="xxx.json"
app:lottie_repeatCount="0"
app:lottie_imageAssetsFolder="image0"//其他属性自行搜索
  1. 导航栏实现
    新建自定义控件 LottieTabView
public class LottieTabView extends FrameLayout {
    private int mTextNormalColor;
    private int mTextSelectColor;
    private float mTextSize;
    private String mTabName;
    private Drawable mIconNormal;
    private String mAnimationPath;
    private LottieAnimationView mLottieView;
    private TextView mTabNameView;
    private TextView mMsgView;
    private boolean isSelected;

    public LottieTabView(Context context) {
        super(context);
    }

    public LottieTabView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public LottieTabView(Context context, AttributeSet attrs, int defStyleAttr) 
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值