【Rive】混合动画

1 混合动画简介

【Rive】动画 中介绍了 Rive 中动画的基础概念和一般动画的制作流程,本文将介绍混合动画的基础概念和一般制作流程。Unity 中混合动画介绍详见→ 【Unity3D】动画混合

​ 混合动画是指同一时刻多个动画按照一定比例同时执行,这些动画控制的动画参数往往是相同的参数。与动画图层不同,动画图层是指多个动画同时执行,互不干扰,这些动画控制的动画参数往往是不同的参数。

​ 在动画状态机窗口右键,在弹出的菜单栏中选择【Add State】创建一个新的动画节点,选中创建的动画节点,在右侧窗口选择动画混合选项卡,如下。

img

​ Input 下拉列表可以选择一个 Number 类型变量,表示将由该变量控制动画混合的比例;Timelines 里可以添加多个动画(即时间线),表示参与混合的动画。如下,是配置的一个混合动画。

img

2 应用

​ 本节将介绍使用 Rive 制作一个秒表。Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。本节完整资源详见 → 基于Android和Rive实现秒表

1)界面元素

​ 创建一个圆形做表盘,再创建一个矩形做指针,对指针进行裁角处理,界面显示如下。

img

2)时间线、输入变量、状态机

img

​ ①时间线说明: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)运行效果

img

​ 声明:本文转自【Rive】混合动画

posted @   little_fat_sheep  阅读(41)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版
点击右上角即可分享
微信分享提示