【Rive】Android与Rive交互

1 Android与Rive交互的常用接口

1.1 RiveAnimationView参数

XML 复制代码
<app.rive.runtime.kotlin.RiveAnimationView
	android:id="@+id/rive_view"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:adjustViewBounds="true"
	app:riveAnimation="rive_anim"
	app:riveArtboard="rive_artboard"
	app:riveResource="@raw/rive_res"
	<!--加载网络资源
	app:riveUrl="https://cdn.rive.app/animations/vehicles.riv"
	-->
	app:riveStateMachine="State Machine 1" />

1.2 Inputs交互

Android 中可以通过 RiveAnimationView 控制动画状态机的状态切换,也可以控制混合动画的混合比例变化。

Kotlin 复制代码
// 激活触发器
fun fireState(stateMachineName: String, inputName: String)
// 修改Boolean变量的值
fun setBooleanState(stateMachineName: String, inputName: String, value: Boolean)
// 修改Number变量的值
fun setNumberState(stateMachineName: String, inputName: String, value: Float)

1.3 文本操作

Android 中可以通过 RiveAnimationView 访问 Rive 中的 Run Text,并且 修改 Run Text 的内容。

Kotlin 复制代码
// 获取文本
fun getTextRunValue(textRunName: String): String?
fun getTextRunValue(textRunName: String, path: String): String?
// 设置文本
fun setTextRunValue(textRunName: String, textValue: String)
fun setTextRunValue(textRunName: String, textValue: String, path: String)

说明:要想在 Android 中访问到 Rive 的 Run Text,需要右键文本的 Run Text,并勾选 Export name。

2 应用

本节将演示 Android 与 Rive 交互的应用,Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。本节完整资源详见 → Android与Rive交互应用案例

2.1 Inputs交互应用

本节主要介绍 Android 传递参数给 Rive,使得动画状态机中某些状态的过渡条件满足,触发动画由 A 状态过渡到 B 状态。关于 Android 传递参数给 Rive 触发混合动画的混合比例变化的应用详见 → 【Rive】混合动画

1)时间线、输入变量

①时间线说明:Color_Red、Color_Green、Color_Blue 都只对颜色参数做动画,并且都只有一帧,对应的颜色分别是红、绿、蓝;Rotate_P、Rotate_N 都只对旋转参数做动画,并且都只有一帧,对应的旋转值分别是 0°、-90°;Scale_Idle、Scale 都只对缩放参数做动画,Scale_Idle 只有一帧,值为 0,Scale 里有 3 帧,值分别为 100%、120%、100%。

②输入变量说明:Number_Color 是 Number 类型参数,用于控制颜色动画的过渡条件;Boolean_Rotate 是 Boolean 类型参数,用于控制旋转动画的过渡条件;Trigger_Scale 是 Trigger 类型参数,用于控制缩放动画的过渡条件。

2)状态机

①Color状态机说明:当 Number_Color 分别为 0、1、2 时,颜色会切换到红色、绿色、蓝色,过渡时长都设置为 300ms。

②Rotate状态机说明:当 Boolean_Rotate 分别为 true 或 false 时,会正向或逆向旋转 90°。

③Scale状态机说明:当 Trigger_Scale 被激活时,会触发一次缩放动画,Scale→Scale_Idle 过渡条件的 Exit Time 设置为 100%。

3)MainActivity

Kotlin 复制代码
package com.zhyan8.testInputs

import android.os.Bundle
import android.view.View
import android.widget.CheckBox
import android.widget.RadioButton
import androidx.appcompat.app.AppCompatActivity
import app.rive.runtime.kotlin.RiveAnimationView

class MainActivity : AppCompatActivity() {
    private lateinit var riveAnimView: RiveAnimationView
    private lateinit var checkBox: CheckBox

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        riveAnimView = findViewById(R.id.rive_view)
        checkBox = findViewById(R.id.check_box)
        checkBox.setOnCheckedChangeListener { _, isChecked ->
            riveAnimView.setBooleanState("State Machine 1", "Boolean_Rotate", isChecked)
        }
    }

    fun onColorSelect(view: View) {
        if (view is RadioButton && view.isChecked) {
            when (view.getId()) {
                R.id.color_red ->
                    riveAnimView.setNumberState("State Machine 1", "Number_Color", 0f)
                R.id.color_green ->
                    riveAnimView.setNumberState("State Machine 1", "Number_Color", 1f)
                R.id.color_blue ->
                    riveAnimView.setNumberState("State Machine 1", "Number_Color", 2f)
            }
        }
    }

    fun onClick(view: View) {
        riveAnimView.fireState("State Machine 1", "Trigger_Scale")
    }
}

4)layout_main.xml

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.testText.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="300dp"
        android:layout_height="300dp"
        app:riveFit="COVER"
        app:riveResource="@raw/test_text"
        app:riveStateMachine="State Machine 1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edit_text"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:maxLength="10"
            android:onClick="onClick"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="提交"
            android:onClick="onClick"/>
    </LinearLayout>

</LinearLayout>

5)运行效果

2.2 文本操作应用

本节主要介绍 Android 传递文本给 Rive,Rive 刷新文本显示。

文本操作的官方介绍详见 → https://rive.app/community/doc/text/docn2E6y1lXo

1)配置 Export name

需要与 Android 交互的文本在导出前需要配置 Export name,如下,选中 Text Run,在右键菜单中勾选 Export name。

2)MainActivity

Kotlin 复制代码
package com.zhyan8.testText

import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.EditText
import androidx.appcompat.app.AppCompatActivity
import app.rive.runtime.kotlin.RiveAnimationView

class MainActivity : AppCompatActivity() {
    private lateinit var riveAnimView: RiveAnimationView
    private lateinit var editText: EditText

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        riveAnimView = findViewById(R.id.rive_view)
        editText = findViewById(R.id.edit_text)
    }

    fun onClick(view: View) {
        val oldText = riveAnimView.getTextRunValue("Run_1")
        Log.i("MainActivity", "onClick, oldText=$oldText")
        val newText = editText.text.toString()
        if (!newText.isNullOrEmpty()) {
            riveAnimView.setTextRunValue("Run_1", newText)
        }
    }
}

3)layout_main.xml

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.testText.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="300dp"
        android:layout_height="300dp"
        app:riveFit="COVER"
        app:riveResource="@raw/test_text"
        app:riveStateMachine="State Machine 1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:id="@+id/edit_text"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:maxLength="10"
            android:onClick="onClick"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:text="提交"
            android:onClick="onClick"/>
    </LinearLayout>

</LinearLayout>

4)运行效果

相关推荐
梦终剧13 分钟前
【Android之路】.sp和界面层次结构
android
2501_9160088920 分钟前
iOS 26 软件性能测试全流程,启动渲染资源压力对比与优化策略
android·macos·ios·小程序·uni-app·cocoa·iphone
zh_xuan38 分钟前
Android Handler源码阅读
android
雪饼android之路1 小时前
【Android】 android suspend/resume总结(3)
android·linux
00后程序员张1 小时前
iOS 26 兼容测试实战,机型兼容、SwiftUI 兼容性改动
android·ios·小程序·uni-app·swiftui·cocoa·iphone
molong9312 小时前
Android 应用配置跳转微信小程序
android·微信小程序·小程序
2501_915106322 小时前
iOS 可分发是已经上架了吗?深入解析应用分发状态、ipa 文件上传、TestFlight 测试与 App Store 审核流程
android·ios·小程序·https·uni-app·iphone·webview
安东尼肉店10 小时前
Android compose屏幕适配终极解决方案
android
2501_9160074710 小时前
HTTPS 抓包乱码怎么办?原因剖析、排查步骤与实战工具对策(HTTPS 抓包乱码、gzipbrotli、TLS 解密、iOS 抓包)
android·ios·小程序·https·uni-app·iphone·webview
feiyangqingyun11 小时前
基于Qt和FFmpeg的安卓监控模拟器/手机摄像头模拟成onvif和28181设备
android·qt·ffmpeg