【Rive】波动文字

1 前言

​ 本文将使用文本修改器(Text Modifiers)做文字动画,实现文字波动效果。

​ 按以下步骤可以创建一个 Modifier Group 和 Range。

【Rive】波动文字

​ 部分参数的释义如下。

  • Range: Modifier 作用的范围。
  • Falloff: Modifier 在最大值时的范围,Falloff 一般是 Range 的子集。
  • Offset: Range 的偏移。

​ 本节完整资源详见 → Android中使用Rive实现文字波动特效

2 第一种波形

1)Modifier 配置

【Rive】波动文字

2)时间线

​ 将 Modifier 的 PostionY、Offset 参数添加到时间线中,如下。

【Rive】波动文字

​ PositionY 对应的 4 帧的值分别为 100、-100、100、-100,4 帧的插值器都是 S 型;Offset 对应的 2 帧的值分别为 -0.4、1。

3 第二种波形

1)Modifier 配置

【Rive】波动文字

2)时间线

​ 将 Modifier Group 1 和 Modifier Group 2 的 Offset 参数添加到时间线中,如下。

【Rive】波动文字

​ Modifier Group 1 的 Offset 对应的 4 帧的值分别为 0、1、-1、0,第 2 、3 两帧相隔 1 帧,第 2 帧的插值器是 Z 型;Modifier Group 2 的 Offset 对应的 4 帧的值分别为 -0.5、1、-1、-0.5,第 2 、3 两帧相隔 1 帧,第 2 帧的插值器是 Z 型。

4 Android 中代码

​ Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用

1)MainActivity

package com.zhyan8.waveText  import androidx.appcompat.app.AppCompatActivity import android.os.Bundle  class MainActivity : AppCompatActivity() {      override fun onCreate(savedInstanceState: Bundle?) {         super.onCreate(savedInstanceState)         setContentView(R.layout.activity_main)     } } 

2)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.waveText.MainActivity"     android:orientation="vertical"     android:gravity="center">      <app.rive.runtime.kotlin.RiveAnimationView         android:layout_width="match_parent"         android:layout_height="200dp"         app:riveFit="COVER"         app:riveResource="@raw/wave_text"         app:riveArtboard="Artboard_1"/>      <app.rive.runtime.kotlin.RiveAnimationView         android:layout_width="match_parent"         android:layout_height="200dp"         android:layout_marginTop="20dp"         app:riveFit="COVER"         app:riveResource="@raw/wave_text"         app:riveArtboard="Artboard_2"/>  </LinearLayout> 

5 运行效果

【Rive】波动文字

​ 声明:本文转自【Rive】波动文字

发表评论

相关文章