1 事件简介

1.1 事件生产者

Rive 中事件监听器（Listener）、状态动画（Timeline）、过度动画、关键帧都可以抛出自定义事件，并且状态动画和过度动画可以在动画开始和结束的时机抛出事件。

1）监听器抛出事件

2）状态动画抛出事件

3）过度动画抛出事件

4）关键帧抛出事件

1.2 事件消费者

1.2.1 Rive 消费事件

Rive 中可以创建一个监听器，监听抛出的自定义事件。需要注意：绑定的元素只能是画板，才能监听自定义事件。

1.2.2 Android 消费事件

Android 中可以通过 RiveAnimationView 的 addEventListener 方法添加动画监听器，用于监听状态动画和过渡动画的开始和结束时机，实现动画开始和结束时的事件回调；也可以监听 Rive 事件触发的时机，在事件触发时响应回调。

// 添加事件监听器
fun addEventListener(listener: RiveFileController.RiveEventListener)

// 事件监听器
interface RiveEventListener {
    fun notifyEvent(event: RiveEvent)
}

open class RiveEvent(unsafeCppPointer: Long, val delay: Float) : NativeObject(unsafeCppPointer) {
    ...
    val name: String
    // 事件类型, 取值有: OpenURLEvent、GeneralEvent
    val type: EventType
    val properties: HashMap<String, Any>
    val data: HashMap<String, Any>
    ...
}

说明：要想在 Android 中访问到 Rive 的 Event Properties，需要右键 Event 的 Properties，并勾选 Export name。

2 应用

本节将介绍 Android 监听 Rive 的点击事件回调、状态动画开始回调、状态动画结束回调、过渡动画结束回调。Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。本节完整资源详见 → Android中监听Rive事件回调案例。

1）创建事件

创建 4 个事件如下。为了让 Android 中可以访问到事件的属性，需要勾选 Export name。

4 个事件的作用如下。

①MyClickEvent：单击圆形时抛出的事件，在 Listener_Click 中添加 report 事件。

②MyStartEvent：圆形开始向右平移时抛出的事件。

③MyEndEvent：圆形向右平移到终点时抛出的事件。

④MyComeEvent：圆形回到左侧起点时抛出的事件。

2）设置事件属性

3）时间线、输入变量、监听器、状态机

①时间线说明：Translate_Idle、Translate 都只对圆形的 PostionX 参数做动画，Translate_Idle 只有一帧，值为 140，Translate 有 2 帧，值为 140、360。

②输入变量说明：Trigger_Translate 是触发器类型变量，当触发器激活时，水平向右运动的动画的过渡条件将会满足。

③监听器说明：Listener_Click 监听了圆形的点击事件，并添加了 report 事件：MyClickEvent。

④状态机说明：Translate_Idle→Translate 的过渡条件是 Trigger_Translate 触发器被激活；Translate→Translate_Idle 无过渡条件，但设置了 Duration 为 300ms，Exit Time 为 100%。

4）添加事件

给 Listener_Click 添加 report 事件，如下。

给 Translate 状态动画添加事件，如下。

给 Translate→Translate_Idle 过渡动画添加事件，如下。

5）MainActivity

package com.zhyan8.testEvent

import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import app.rive.runtime.kotlin.RiveAnimationView
import app.rive.runtime.kotlin.controllers.RiveFileController
import app.rive.runtime.kotlin.core.RiveEvent
import app.rive.runtime.kotlin.core.RiveGeneralEvent

class MainActivity : AppCompatActivity() {
    private lateinit var riveAnimView: RiveAnimationView
    private lateinit var riveListener: RiveFileController.RiveEventListener

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        riveAnimView = findViewById(R.id.rive_view)
        riveListener = object : RiveFileController.RiveEventListener {
            override fun notifyEvent(event: RiveEvent) {
                if (event is RiveGeneralEvent) {
                    Log.i("MainActivity", "name: ${event.name}, properties: ${event.properties}")
                }
            }
        }
        riveAnimView.addEventListener(riveListener)
    }

    override fun onDestroy() {
        super.onDestroy()
        riveAnimView.removeEventListener(riveListener)
    }
}

6）layout_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhyan8.testEvent.MainActivity"
    android:orientation="vertical"
    android:gravity="center_vertical"
    android:paddingLeft="16dp"
    android:paddingRight="16dp">

    <app.rive.runtime.kotlin.RiveAnimationView
        android:id="@+id/rive_view"
        android:layout_gravity="center_horizontal"
        android:layout_width="380dp"
        android:layout_height="380dp"
        app:riveFit="COVER"
        app:riveResource="@raw/test_event"
        app:riveStateMachine="State Machine 1" />

</LinearLayout>

7）运行效果

打印日志如下。

声明：本文转自【Rive】事件回调。

【Rive】事件