美文网首页动画动画收藏
动画库 Lottie的基本使用

动画库 Lottie的基本使用

作者: i小灰 | 来源:发表于2022-03-16 14:50 被阅读0次

    版本是 3.2.2。
    GitHub:https://github.com/airbnb/lottie-android
    官方文档:http://airbnb.io/lottie/

    配置

    1. 在 app/build.gradle 中添加如下:(版本号以官网最新版为准)
    implementation 'com.airbnb.android:lottie:3.2.2'
    

    使用

    1. 在 main/assets下添加动画资源,data.json.

      image
    2. 在布局文件中添加 LottieAnimationView 控件

    <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="data.json"
            app:lottie_loop="true"
            app:lottie_autoPlay="true"/>
    
    
    1. 效果图

      image

    动画资源

    如果你因为各种原因,没有办法专门由一个设计师来为你的 App 定制动画效果,你也可以尝试找找线上公开的一些 Lottie 的动画效果,这里推荐使用 LottieFiles 这个网站。
    LottieFiles: https://www.lottiefiles.com/

    进阶

    1. 本地 json 动画使用。
            mLottieAnimationView= (LottieAnimationView) findViewById(R.id.animation_view); //实例化
            //设置是否循环播放:true为循环.false为播放一次
            mLottieAnimationView.loop(true);
    //        //暂停
    //        mLottieAnimationView.pauseAnimation();
    //        //开始播放
    //        mLottieAnimationView.playAnimation();
            mLottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {
                    //动画开始监听
                }
    
                @Override
                public void onAnimationEnd(Animator animation) {
                    //动画结束
                }
    
                @Override
                public void onAnimationCancel(Animator animation) {
                    //动画取消
                }
    
                @Override
                public void onAnimationRepeat(Animator animation) {
                    //动画重复
                }
            });
    
    
    1. 网络 json 动画使用。
        private RelativeLayout mLayout;
        private LottieAnimationView mLottieAnimationView;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_network);
            mLayout = (RelativeLayout) findViewById(R.id.layout_content);
            initView();
    
        }
    
        private void initView() {
            mLottieAnimationView = new LottieAnimationView(NetworkActivity.this);
            String response = "你从网络获取的json";
            try {
                JSONObject jsonObject = new JSONObject(response);
                LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() {
                    @Override
                    public void onCompositionLoaded(LottieComposition lottieComposition) {
                        setComposition(lottieComposition);
                    }
                });
    
            } catch (JSONException e) {
                e.printStackTrace();
            }
            mLayout.addView(mLottieAnimationView);
        }
    
        private void setComposition(LottieComposition lottieComposition) {
            mLottieAnimationView.setProgress(0);
            mLottieAnimationView.loop(true);
            mLottieAnimationView.setComposition(lottieComposition);
            mLottieAnimationView.playAnimation();
        }
    
    

    工具

    集成流程
    UI 使用 AE → 安装 bodymovin 插件 → 将 AE 中的动画工程文件通过 bodymovin 转换为 .json 文件→ 发给开发-开发集成Lottie框架-直接在项目中使用
    是不是很简洁,这样我们压根就不需要一帧一帧的png或者.gif文件了,不仅让gif的加载速度变快而且节约了我们app的内部空间。

    AE安装插件教程(这里的安装教程让UI去看就好)
    MAC
    windows
    懒得写了 介绍两个别人的文章 :
    文章2
    文章3

    相关文章

      网友评论

        本文标题:动画库 Lottie的基本使用

        本文链接:https://www.haomeiwen.com/subject/dfeoiktx.html