【Rive】Rive在Android上的简单应用

1 前言

        Rive 是一款强大的矢量图编辑器，可以设计图形、也可以制作动画。Rive 提供了矩形、圆形、三角形、多边形、星形、钢笔、文字等工具来绘制各式各样的矢量图形；提供了平移、旋转、缩放等工具对矢量图形进行各种变换；提供了骨骼、约束、时间线、状态机、过渡条件、事件监听器等工具来制作各种交互复杂、动作炫酷的动画。

        通过 Rive 编辑器导出 .riv 文件后，可以在 Android、iOS、macOS、Web、Flutter、React、Unity、Unreal 等平台（如下图）运行（需要导入相关 Sdk，详见 → https://github.com/rive-app）。

        相关链接如下：

• Rive 官网：https://rive.app/

• Rive Editor 下载：https://rive.app/downloads

• Rive 在线编辑器: https://editor.rive.app/home

• Rive Sdk：https://github.com/rive-app

• rive-android: https://github.com/rive-app/rive-android

• Rive 社区资源: https://rive.app/community/files/

• Rive 官方视频: https://www.youtube.com/playlist?list=PLujDTZWVDSsFGonP9kzAnvryowW098-p3

• Rive Editor B 站教程: https://www.bilibili.com/video/BV1UW421R7sZ

2 应用

        本节完整资源见 → Rive在Android上的简单应用。

        1）引入依赖

implementation "app.rive:rive-android:9.11.2"

        补充：rive-android 的版本迭代很快, 最近基本是一天一个版本，详见→https://github.com/rive-app/rive-android/blob/master/CHANGELOG.md。 

        2）初始化 Rive 环境

        在 Application 的 onCreate 方法中调用 Rive.init 方法初始化 Rive 环境，如下。

class RiveApplication : Application() {

    override fun onCreate() {
        super.onCreate()
        Rive.init(this, RendererType.Canvas)
    }
}

        4）创建 MainActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

        5）创建 layout

<?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.simple.MainActivity"
    android:orientation="vertical"
    android:gravity="center">

    <app.rive.runtime.kotlin.RiveAnimationView
        android:id="@+id/simple_view_asset"
        android:layout_width="380dp"
        android:layout_height="380dp"
        app:riveFit="COVER"
        app:riveResource="@raw/cute_monster" />

</LinearLayout>

        说明：cute_monster 是 Rive 编辑器导出的 .riv 文件，资源详见 → https://rive.app/community/files/12726-24108-cute-monster/。

        也可以加载网络资源，如下：

    <app.rive.runtime.kotlin.RiveAnimationView
        android:id="@+id/simple_view_network"
        android:layout_width="381dp"
        android:layout_height="345dp"
        android:layout_marginTop="50dp"
        app:riveFit="COVER"
        app:riveUrl="https://cdn.rive.app/animations/vehicles.riv" />

        6）运行效果

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

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