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

1 前言

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

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

​ 相关链接如下:

2 应用

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

1)引入依赖

Kotlin 复制代码
implementation "app.rive:rive-android:9.11.2"

​ 补充:rive-android 的版本迭代很快, 最近基本是一天一个版本,详见→github.com/rive-app/ri...

2)初始化 Rive 环境

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

Kotlin 复制代码
class RiveApplication : Application() {

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

4)创建 MainActivity

Kotlin 复制代码
class MainActivity : AppCompatActivity() {

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

5)创建 layout

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.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 文件,资源详见 → rive.app/community/f...

​ 也可以加载网络资源,如下:

XML 复制代码
    <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)运行效果

3 推荐阅读

声明:本文转自【Rive】Rive在Android上的简单应用

相关推荐
德育处主任5 个月前
『ComfyUI』安装节点
人工智能·aigc·视觉设计
德育处主任6 个月前
『SD』场景变换魔法:InstructP2P控制类型助你一键换天气
人工智能·aigc·视觉设计
德育处主任6 个月前
『SD』文生图基础讲解
人工智能·aigc·视觉设计
德育处主任7 个月前
『SD』光影字:使用Brightness亮度控制模型来实现
人工智能·aigc·视觉设计
德育处主任7 个月前
『SD』人脸修复-ADetailer(智能检测人脸并修复好)
人工智能·aigc·视觉设计
德育处主任7 个月前
『SD』人脸修复-局部重绘
人工智能·aigc·视觉设计
德育处主任7 个月前
『SD』文生图-如何生成高分辨率图片?
aigc·设计师·视觉设计
德育处主任7 个月前
『SD』AI绘画,不会写提示词怎么办?
aigc·设计师·视觉设计
VUE8 个月前
Farmer 使用滚动变体创建动画
前端·视觉设计