1 混合动画简介
【Rive】动画 中介绍了 Rive 中动画的基础概念和一般动画的制作流程，本文将介绍混合动画的基础概念和一般制作流程。Unity 中混合动画介绍详见→ 【Unity3D】动画混合。
混合动画是指同一时刻多个动画按照一定比例同时执行，这些动画控制的动画参数往往是相同的参数。与动画图层不同，动画图层是指多个动画同时执行，互不干扰，这些动画控制的动画参数往往是不同的参数。
在动画状态机窗口右键，在弹出的菜单栏中选择【Add State】创建一个新的动画节点，选中创建的动画节点，在右侧窗口选择动画混合选项卡，如下。
Input 下拉列表可以选择一个 Number 类型变量，表示将由该变量控制动画混合的比例；Timelines 里可以添加多个动画（即时间线），表示参与混合的动画。如下，是配置的一个混合动画。
2 应用
本节将介绍使用 Rive 制作一个秒表。Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。本节完整资源详见 → 基于Android和Rive实现秒表。
1）界面元素
创建一个圆形做表盘，再创建一个矩形做指针，对指针进行裁角处理，界面显示如下。
2）时间线、输入变量、状态机
①时间线说明：SecStart、SecEnd 都只对指针的旋转参数做动画，并且都只有一帧，SecStart 的旋转值为 0，SecEnd 的旋转值为 360。
②输入变量说明：Second 用于控制混合动画的混合系数。
3）MainActivity
package com.zhyan8.secondWatch
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.os.Looper
import app.rive.runtime.kotlin.RiveAnimationView
import java.util.Calendar
class MainActivity : AppCompatActivity() {
private lateinit var clockView: RiveAnimationView
private lateinit var handler: Handler
private var keepGoing = true
private val deltaTime = 1000L
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
clockView = findViewById(R.id.clock)
handler = Handler(Looper.getMainLooper())
handler.postDelayed(task, deltaTime)
}
override fun onDetachedFromWindow() {
keepGoing = false
super.onDetachedFromWindow()
}
private fun setTime() {
val calendar = Calendar.getInstance()
val second = calendar.get(Calendar.SECOND).toFloat()
clockView.setNumberState("State Machine 1", "Second", second)
}
private val task = object: Runnable {
override fun run() {
if (keepGoing) {
setTime()
handler.postDelayed(this, deltaTime)
}
}
}
}
4）activity_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.secondWatch.MainActivity"
android:orientation="vertical"
android:gravity="center">
<app.rive.runtime.kotlin.RiveAnimationView
android:id="@+id/clock"
android:layout_width="400dp"
android:layout_height="400dp"
app:riveFit="COVER"
app:riveResource="@raw/seccond_watch"
app:riveStateMachine="State Machine 1" />
</LinearLayout>
5）运行效果
声明：本文转自【Rive】混合动画。
