【Rive】事件回调

1 前言

        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上的简单应用。本节完整资源详见 → 。

        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）运行效果

        打印日志如下。

原文地址：https://blog.csdn.net/m0_37602827/article/details/144350888

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！