Lottie初探（三）

来源：互联网发布：产品流程图用什么软件编辑：程序博客网时间：2024/06/05 02:31

这里，我们利用Lottie SampleDemo自带的json文件来完成一个自定义的动画，效果图：
这里写图片描述
由于电脑卡的问题，只截取到了最后一些。

总之，效果是出来了。说一下我的思路：
在Lottie给出的demo中，有这样一个效果
这里写图片描述
我的这个demo就是基于这个来完成的。

首先，找到这个功能的实现源码

我们可以发现，主要继承Layout，本质是一个ViewGroup，动态的将LottieAnimationView加载到布局中，再接着使用LottieAnimationView加载json文件，实现动画。
我们也使用这个方法，继承LinearLayout，重写addView(),onMeasure(),onLayout()来实现动画。

@Override    public void addView(View child, int index) {        super.addView(child, index);        if (index == -1) {            views.add(child);        } else {            views.add(index, child);        }    }

@Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        if (views.isEmpty()) {            return;        }        int currentX = getPaddingTop();        int currentY = getPaddingLeft();        for (int i = 0; i < views.size(); i++) {            View view = views.get(i);//            if (!fitsOnCurrentLine(currentX, view)) {     //如果超过屏幕//                currentX = getPaddingLeft();              //得到左边界//                currentY += view.getMeasuredHeight();      //下一行开始//            }            currentX += view.getWidth();        }         setMeasuredDimension(getMeasuredWidth(),                currentY + views.get(views.size() - 1).getMeasuredHeight());

@Override    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {        if (views.isEmpty()) {            return;        }        int currentX = getPaddingTop();        int currentY = getPaddingLeft();        for (int i = 0; i < views.size(); i++) {            View view = views.get(i);//            if (!fitsOnCurrentLine(currentX, view)) {//                currentX = getPaddingLeft();//                currentY += view.getMeasuredHeight();//            }            view.layout(currentX, currentY, currentX + view.getMeasuredWidth(),                    currentY + view.getMeasuredHeight());            currentX += view.getWidth();        }    }

 private boolean fitsOnCurrentLine(int currentX, View view) {  //是否会超过屏幕边界        return currentX + view.getMeasuredWidth() < getWidth() - getPaddingRight();    }

主要完成代码在addComposition（）中

private void addComposition(LottieComposition composition) {        LottieAnimationView lottieAnimationView = new LottieAnimationView(getContext());   //新建一个LottieAnimationView，这里每添加一个，就会新建一个，，所以最后的完成效果，是多个LottieAnimationView，并不是一个LottieAnimationView        /**下面就是对LottieAnimationView的参数设置，可以根据自己的需要来设置不同的布局*/        CustomLottieGroup.LayoutParams layoutParams = new CustomLottieGroup.LayoutParams(                LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT        );        layoutParams.width = 120;        layoutParams.setMargins(0,0,0,0);        layoutParams.gravity = Gravity.CENTER;        lottieAnimationView.setLayoutParams(layoutParams);        lottieAnimationView.setComposition(composition);        lottieAnimationView.playAnimation();        if (cursorView == null) {    //在源码中，对cursorView进行了初始化，我这里，就没有进行这一个初始化操作，每次都是执行这个，增加新的LottieAnimationView            addView(lottieAnimationView);        } else {            int index = indexOfChild(cursorView);            addView(lottieAnimationView, index);        }    }

根据我们的修改，我们利用已经有的json文件，就完成了这篇文章开头的效果。

0 0