Lottie一个可轻松实现各种动画（SVG、Animations）的开源项目

来源：互联网发布：大数据架构师年龄要求编辑：程序博客网时间：2024/05/18 02:50

先看一下官网给的图片：

这里写图片描述

相信肯定不少小伙伴还在为svg，Animations而头疼吗！Lottie这个开源项目的出现，真是久旱逢甘霖（个人感觉）。

有些人会认为这些即使不用这也可以实现啊！的确能实现，Android 5.x 之后提供了对 SVG 的支持，通过 VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画，可是这样你需要考虑很多：

写一堆代码来实现它
流畅度也要考虑
兼容性
要是公司要andorid和ios实现一套一模一样的，那资源的占用就显得过大了。

如果用Lottie这些都不需要考虑了，Lottie是支持Android、ios、ReactNative的，使用的过程也是很简单的。

总之Lottie这个项目，让我耳目一新，真是感觉吊的一笔！下面看看怎么简单使用的：

先看效果图：
这里写图片描述

Lottie引用

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

sdk最低要求： minSdkVersion 16
xml配置

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context="zlg.wolf.wolf_lottie.MainActivity">    <com.airbnb.lottie.LottieAnimationView    android:id="@+id/animation_view"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    app:lottie_fileName="LottieLogo2.json"    app:lottie_loop="true"    app:lottie_autoPlay="true" /></RelativeLayout>

也可以在activity中这样写：

/** app:lottie_fileName="LottieLogo2.json" * app:lottie_loop="true"    */  @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);        animationView.setAnimation("LottieLogo2.json");        animationView.loop(true);    }

assets资源文件

这样就完成了！
本文主要是先讲述这个项目的简单使用，后续会继续学习其它的功能！
Lottie资源库

Android: https://github.com/airbnb/lottie-android

iOS: https://github.com/airbnb/lottie-ios

ReactNative: https://github.com/airbnb/lottie-react-native

0 0