Lottie动画在Android和Ios开发中的应用——Android篇

旧城等待， 2024-02-17 19:19 65阅读 0赞

[Lottie动画官网][Lottie]

Lottie动画是airbnb最新开源的一个动画解决方案，在移动平台使用非常便捷，无论Android，Ios，还是Web都支持。

先来看一下他能做的效果

![Center][]![Center 1][]

![Center 2][]

这都是官方demo做的效果，动画都没有使用图片哦！

都是利用描述文件做的动画

Android里avg动画也是利用描述文件来做的，但是5.0以后才支持，现在4.x的android手机还是很多的，

不能放弃他们，做动画的时候就没有用。

另外Lottie动画对于UI设计人员的支持也更好一点，可以直接用AE来做，安装bodymovin插件，就能导出

动画文件，各个平台都能使用哦。

我们来看[官方demo][demo]

这是Lottie动画在github上传的android官方demo

运行这个demo，可是着实让我费了点力气，遇到了几个坑，一是gradle最低版本要求3.3，之后各种库文件又

需要下载，最后还在运行时报错:Android Studio版本不匹配，关闭了InstantRun，才运行起来。

我上传了一份运行出来的apk文件，需要可以去[下载][Link 1]。

之后自己照着官方文档写一个demo，这个容易多了，用起来非常方便。

首先，在Android Studio里自己创建一个Android工程。

然后，在gradle文件中添加Lottie的引用

compile 'com.airbnb.android:lottie:1.5.0'

之后，就能正常使用了

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            app:lottie_fileName="hello-world.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true"/>

这个是播放动画的控件，可以在这里直接设置要播放的动画，也可以在代码中设置

fileName参数设置播放的文件（文件放在assets目录下，播放文件要写全路径）

loop设置是否循环播放 autoPlay设置是否自动播放

在代码里设置，可以这样写

animationView = (LottieAnimationView) findViewById(R.id.animation_view);
            animationView.setAnimation(jsonData);
            animationView.loop(true);
    animationView.playAnimation();

LottieAnimationView还有很多其他api

我认为使用比较多的有

animationView.cancelAnimation();

取消播放，这个取消我在测试中是类似暂停的功能

animationView.setImageAssetsFolder(imageFolder);

如果你播放的动画是有图片信息的，那么需要设置动画中图片所在的位置（也是放在assets文件夹中）

还要一些其他api

//设置播放进度
            animationView.setProgress(1.0f);
            //设置播放速度
            animationView.setSpeed(1.0f);
            //检查是否在播放中
            animationView.isAnimating();
            //暂停播放
            animationView.pauseAnimation();
            //获取动画总长度
            animationView.getDuration();
            //获取当前播放的进度
            animationView.getProgress();
            //添加播放动画状态的监听（开始，结束，取消，重复）
            animationView.addAnimatorListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animator) {
    
                }
    
                @Override
                public void onAnimationEnd(Animator animator) {
    
                }
    
                @Override
                public void onAnimationCancel(Animator animator) {
    
                }
    
                @Override
                public void onAnimationRepeat(Animator animator) {
    
                }
            });

另外，如果你在listview之类的空间中使用动画，如果每一列都播放的是相同的动画，官方推荐这样来做

LottieComposition.Factory.fromAssetFileName(this, jsonData, new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(LottieComposition composition) {
                    animationView.setComposition(composition);
                    animationView.playAnimation();
                }
            });

这样可以复用加载动画了，这也是异步加载的写法，从网络加载json文件数据，也这样写

LottieComposition.Factory.fromInputStream(context, inputstream, new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(LottieComposition composition) {
                    
                }
            });
            LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(LottieComposition composition) {
                    
                }
            });

只用一个动画，很简单，我就不举例了

我写了一个Adapter来作为事例，来看一下怎么复用动画好了

public class TestLottieAdapter extends BaseAdapter {
    
        private List<String> showStr;
        private LottieComposition composition;
        private LayoutInflater inflater;
    
        public TestLottieAdapter(List<String> showStr, Context context, String json) {
            this.showStr = showStr;
            this.inflater = LayoutInflater.from(context);
            LottieComposition.Factory.fromAssetFileName(context, json, new OnCompositionLoadedListener() {
                @Override
                public void onCompositionLoaded(LottieComposition composition) {
                    TestLottieAdapter.this.composition = composition;
                }
            });
    
        }
    
        @Override
        public int getCount() {
            return showStr == null ? 0 : showStr.size();
        }
    
        @Override
        public Object getItem(int i) {
            return showStr.get(i);
        }
    
        @Override
        public long getItemId(int i) {
            return i;
        }
    
        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {
            ViewHolder holder;
            if (view == null) {
                view = inflater.inflate(R.layout.listitem, null);
                holder = new ViewHolder();
                holder.animationView = (LottieAnimationView) view.findViewById(R.id.animation_view);
                view.setTag(holder);
            } else {
                holder = (ViewHolder) view.getTag();
            }
            if (composition != null) {
                holder.animationView.setComposition(composition);
                holder.animationView.playAnimation();
            }
            return view;
        }
    
        private static class ViewHolder {
            LottieAnimationView animationView;
        }
    
    }

我也是初次使用，如有问题，欢迎讨论!

[Lottie]: http://airbnb.design/lottie/
[Center]: https://img-blog.csdn.net/20170224085435437?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGVuZ2RhaWpj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/2f871455d14644ecb6fd13d7941a6553.png
[Center 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/40c7af83221d409da5314ec7e40589b7.png
[demo]: https://github.com/airbnb/lottie-android
[Link 1]: http://download.csdn.net/detail/dengdaijc/9762564