前言

大家在网上查看关于Lottie使用时，其中在讲述它的优点时，就会提到“绑定事件”，例如：Lottie的使用和源码详解，但是从网上并未找到相关的文章。一次我在和同事分享关于Lottie使用时，也被问到了这个问题，于是乎秉着自己动手丰衣足食的原则，查看了源码，写下了这篇文章。

一、试问世间事件是何物？

作为一名Android开发攻城狮，一提到事件首先会想到的可能就是OnClickListener、OnLongClickListener事件等等。所以也就跟着这个思路到Lottie中找相关的函数，结果老天不负有心人，找了好久什么都没有找到。

就在要放弃的时候，突然想到了Lottie官方Demo，git clone后发现其中有一个“Bullseye”的示例。

你通过手势对浅蓝色小圆进行控制，从而达到对图形的控制，看到这个效果，突然恍然大悟，这就是Lottie中口口相传的绑定事件。

它本质上不是View本身提供对动画操作的事件，而是通过对动画中的KeyPath进行操作，从而达到对动画的操作。也就是说需要通过其他的View事件来绑定KeyPath的操作，而从达到绑定事件的效果。

二、绑定事件

为了更好帮助大家对绑定事件的理解，下面我会分解“Bullseye”示例代码，以便更好的讲解。

1、布局代码

<com.airbnb.lottie.samples.views.InterceptingFrameLayout  //这是自定义布局主要就是通过它的事件对动画效果的控制
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/containerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animationView"
        android:layout_width="256dp"
        android:layout_height="256dp"
        app:lottie_url="https://raw.githubusercontent.com/airbnb/lottie-android/master/LottieSample/src/main/res/raw/bullseye.json"
        app:lottie_autoPlay="true"
        app:lottie_loop="true"
        android:layout_gravity="center"/>

    <com.airbnb.lottie.samples.views.BackgroundColorView   //这个是浅蓝色的小圆圈
        android:id="@+id/targetView"
        android:layout_width="16dp"
        android:layout_height="16dp"
        android:background="#00ddff"
        android:layout_gravity="center"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center_horizontal"
        android:layout_marginBottom="8dp"
        android:text="@string/bullseye_drag_dot"
        android:textColor="@color/text_color"/>

</com.airbnb.lottie.samples.views.InterceptingFrameLayout>

其中InterceptingFrameLayout主要是通过ViewDragHelper进行手势识别控制，而BackgroundColorView只是绘制了一个圆，并未做其他操作。

三、结语