Android Lottie体验经历

以下未体验经历以及个人观点，有说错的地方请见谅，先说一下简单的实现
1、连接

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

2、布局实现

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

加了一个背景颜色（这对于下面演示很重要），lottie_fileName，放在assets里的一个json文件（你可以到上面github上用别人制作好的），具体自己制作，用After Effects(简称 AE)工具制作这个动画，在AE中安装一个叫做Bodymovin的插件，使用这个插件可以将动画效果生成一个json文件

此时动画效果。

这里写图片描述
动画出来了，可不可以人机互动呢，这很关键，我们加一个点击事件

animation_view.setOnClickListener(new View.OnClickListener()
{
     @Override
     public void onClick(View v)
     {
        Toast.makeText(MainActivity.this,"小西瓜"+i++,Toast.LENGTH_SHORT).show();
     }
});

这里写图片描述

恩，点击事件有，而且所有的灰色区域都可以以点击，很明显是当前控件的点击区域，从这里应该可以看出一点原理：创建一个控件，然后用这个控件显示动画，相当于视频播放器。这已经和我们所理解的动画不一样了。我们先不管动画了，来看一下大小。

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

先来个宽度200dp试试

这里写图片描述

这TM什么鬼，根据宽度截取中间一部分来显示动画，大小居然没变化？我再试试高度

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

依然是200dp

这里写图片描述

……..，我们还是都调吧

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#50000000"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true"/>

这里写图片描述

终于变大了，那么变大的的原理是根据宽高的最小值来定义动画的大小，这样就会带来一个问题，会出现多余的区域，那么怎么解决大小以及点击事件区域的问题，我也不知道……..，但是当我们的动画没有点击事件的时候，这个控件还是很棒的，背景一透明，谁也看不出来我们控件的真实大小，哈哈，机智。顺便附带上一个动图制作网站，贼鸡儿好用https://ezgif.com/video-to-gif

Android Lottie体验经历

猜你喜欢