Android Lottie体验经历

来源:互联网 发布:金十数据是真的吗 编辑:程序博客网 时间:2024/05/22 18:09

以下未体验经历以及个人观点,有说错的地方请见谅,先说一下简单的实现
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

原创粉丝点击