Unity动画关键帧插值

2023-10-16 03:20
文章标签 unity 动画 插值 关键帧

本文主要是介绍Unity动画关键帧插值,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Unity动画的关键帧插值有2种模式1,一种是3次多项式插值,另一种是3次贝塞尔曲线插值。下面介绍具体实现,首先我们先看关键帧的几个重要成员定义:

inTangent,左侧的斜率,下面用it来表示
inWeight,决定贝塞尔曲线的第2个点的x,用iw表示
outTangent,右侧的斜率,用ot表示
outWeight,决定贝塞尔曲线第3个点的x,用ow表示
value,关键帧的值,用y表示
time,关键帧的时间,用x表示

给定两个关键帧,

F i = { i t i , i w i , o t i , o w i , x i , y i } , 0 ≤ i ≤ 1 F_i = \{ it_i, iw_i, ot_i, ow_i, x_i, y_i \},\ 0 \le i \le 1 Fi={iti,iwi,oti,owi,xi,yi}, 0i1

三次多项式插值

三次多项式插值在两个关键帧的weightedMode都是None时使用。

三次多项式方程为

y = f ( x ) = a x 3 + b x 2 + c x + d y = f(x) = ax^3+bx^2+cx+d y=f(x)=ax3+bx2+cx+d

我们可以使用如下4个方程解得4个系数

{ f ( x 0 ) = y 0 f ( x 1 ) = y 1 f ′ ( x 0 ) = o t 0 f ′ ( x 1 ) = i t 1 \begin{cases} f(x_0) = y_0 & \\ f(x_1) = y_1 & \\ f'(x_0) = ot_0 & \\ f'(x_1) = it_1 \end{cases} f(x0)=y0f(x1)=y1f(x0)=ot0f(x1)=it1

得到的结果以矩阵表示为

[ a b c d ] = [ x 0 3 x 0 2 x 0 1 x 1 3 x 1 2 x 1 1 3 x 0 2 2 x 0 1 0 3 x 1 2 2 x 1 1 0 ] − 1 [ y 0 y 1 o t 0 i t 1 ] \begin{bmatrix} a \\ b \\c \\d \end{bmatrix} = \begin{bmatrix} x_0^3 & x_0^2 & x_0 & 1 \\ x_1^3 & x_1^2 & x_1 & 1 \\ 3x_0^2 & 2x_0 & 1 & 0 \\ 3x_1^2 & 2x_1 & 1 & 0 \end{bmatrix}^{-1} \begin{bmatrix} y_0 \\ y_1 \\ ot_0 \\ it_1 \end{bmatrix} abcd=x03x133x023x12x02x122x02x1x0x11111001y0y1ot0it1

计算逆矩阵比较麻烦,我们可以将曲线的区间平移并规格化到 [ 0 , 1 ] [0,1] [0,1]中再做计算,这样就方便许多,新的方程组为

{ f ( 0 ) = y 0 f ( 1 ) = y 1 f ′ ( 0 ) = o t 0 ( x 1 − x 0 ) f ′ ( 1 ) = i t 1 ( x 1 − x 0 ) \begin{cases} f(0) = y_0 & \\ f(1) = y_1 & \\ f'(0) = ot_0 (x_1 - x_0) & \\ f'(1) = it_1 (x_1 - x_0) \end{cases} f(0)=y0f(1)=y1f(0)=ot0(x1x0)f(1)=it1(x1x0)
注意,由于进行了缩放,端点处的斜率也需要进行缩放。
解得
[ a b c d ] = [ ( o t 0 + i t 1 ) ( x 1 − x 0 ) − 2 ( y 1 − y 0 ) ( − 2 o t 0 − i t 1 ) ( x 1 − x 0 ) + 3 ( y 1 − y 0 ) o t 0 ( x 1 − x 0 ) y 0 ] \begin{bmatrix} a \\ b \\c \\d \end{bmatrix} = \begin{bmatrix} (ot_0+it_1)(x_1-x_0)-2(y_1-y_0) \\ (-2ot_0-it_1) (x_1 - x_0) + 3(y_1-y_0) \\ ot_0(x_1-x_0) \\ y_0 \end{bmatrix} abcd=(ot0+it1)(x1x0)2(y1y0)(2ot0it1)(x1x0)+3(y1y0)ot0(x1x0)y0

给定时间 t t t,我们可以使用如下公式得到插值的结果

f ( t − x 0 x 1 − x 0 ) f(\frac{t-x_0}{x_1-x_0}) f(x1x0tx0)

我们验证一下结果,给定两个关键帧2

F 0 = { 0 , 1 3 , 0 , 1 3 , 0 , 0 } F 1 = { 0 , 1 3 , 0 , 1 3 , 1 , 1 } F_0 = \{0,\frac{1}{3},0,\frac{1}{3},0,0\} \\ F_1 = \{0,\frac{1}{3},0,\frac{1}{3},1,1\} F0={0,31,0,31,0,0}F1={0,31,0,31,1,1}

该多项式实际为

y = − 2 x 3 + 3 x 2 y=-2x^3+3x^2 y=2x3+3x2

对glsl熟悉的朋友应该会对这个多项式不陌生,就是smoothstep所用hermite多项式。

unity中的曲线为
hermite polynomial
在unity中查看 1 / 3 1/3 1/3 2 / 3 2/3 2/3处的结果为
values in editor
我们再看一下代入多项式后的值

f ( 1 3 ) = 7 27 = 0.2592592593 f ( 2 3 ) = 20 27 = 0.7407407407 f(\frac{1}{3}) = \frac{7}{27} = 0.2592592593 \\ f(\frac{2}{3}) = \frac{20}{27} = 0.7407407407 f(31)=277=0.2592592593f(32)=2720=0.7407407407

结果是一致的。

贝塞尔曲线插值

多项式插值不使用inWeightoutWeight,根据unity文档

Sets the incoming weight for this key. The incoming weight affects the slope of the curve from the previous key to this key.

第一想法是使用了贝塞尔曲线一类的插值方法。

三次贝塞尔曲线需要4个点,而这里4个点的定义如下

P 0 = ( x 0 , y 0 ) P 1 = ( x 0 + o w 0 ( x 1 − x 0 ) , y 0 + o w 0 ⋅ o t 0 ( x 1 − x 0 ) P 2 = ( x 1 − i w 1 ( x 1 − x 0 ) , y 1 − i w 1 ⋅ i t 1 ( x 1 − x 0 ) P 3 = ( x 1 , y 1 ) \begin{aligned} P_0 &= (x_0,y_0) \\ P_1 &= (x_0 + ow_0(x_1-x_0),y_0+ow_0\cdot ot_0 (x_1-x_0) \\ P_2 &= (x_1 - iw_1(x1-x_0),y_1-iw_1\cdot it_1 (x_1 - x_0) \\ P_3 &= (x_1,y_1) \end{aligned} P0P1P2P3=(x0,y0)=(x0+ow0(x1x0),y0+ow0ot0(x1x0)=(x1iw1(x1x0),y1iw1it1(x1x0)=(x1,y1)

这里 i w iw iw o w ow ow用来决定中间点的 x x x坐标,且权重在 [ 0 , 1 ] [0,1] [0,1]内。

我们来验证一下,给定如下两个关键帧(我们需要将Tangent设置为Weighted)

F 0 = { 0 , 1 3 , − 1 , 1 , 0 , 0 } F 1 = { 0 , 1 3 , − 0.5 , 0.5 , 1 , 1 } \begin{aligned} F_0 &= \{0,\frac{1}{3},-1,1,0,0\} \\ F_1 &= \{0,\frac{1}{3},-0.5,0.5,1,1\} \end{aligned} F0F1={0,31,1,1,0,0}={0,31,0.5,0.5,1,1}

unity中的曲线为
bezier curve

在unity中查看 1 / 3 1/3 1/3 2 / 3 2/3 2/3处的结果为

bezier values in editor
由于贝塞尔曲线不是以 x x x为参数的曲线,我们需要先解得对应参数 t t t,之后再代入得到 y y y。三次方程有封闭解,具体见Wikipedia。

解得对应的两个 t t t以及 y y y

t 0 = 0.1371916262 y 0 = − 0.2429122496 t 1 = 0.4502223408 y 1 = 0.1009137022 \begin{aligned} t_0 &= 0.1371916262 \\ y_0 &=-0.2429122496 \\ t_1 &= 0.4502223408\\ y_1 &= 0.1009137022 \end{aligned} t0y0t1y1=0.1371916262=0.2429122496=0.4502223408=0.1009137022

可以看到与editor中的结果一致。

默认权重

当一个关键帧的weightedMode不是weighted时,此时会默认采用 1 / 3 1/3 1/3作为权重,该权重为unity默认写入的值,通过观察clip文件可知。


  1. 官方文档没有给出具体算法,贝塞尔曲线插值只是猜测。 ↩︎

  2. 其中的权重 1 3 \frac{1}{3} 31会在贝塞尔曲线插值中讲到 ↩︎

这篇关于Unity动画关键帧插值的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/218668

相关文章

【Unity Shader】片段着色器(Fragment Shader)的概念及其使用方法

在Unity和图形编程中,片段着色器(Fragment Shader)是渲染管线中的一个阶段,负责计算屏幕上每个像素(片段)的颜色和特性。片段着色器通常在顶点着色器和任何几何处理之后运行,是决定最终像素颜色的关键步骤。 Fragment Shader的概念: 像素处理:片段着色器处理经过顶点着色器和几何着色器处理后,映射到屏幕空间的像素。颜色计算:它计算每个像素的颜色值,这可能包括纹理采样、光

【Unity Shader】Alpha Blend(Alpha混合)的概念及其使用示例

在Unity和图形编程中,Alpha Blend(也称为Alpha混合)是一种用于处理像素透明度的技术。它允许像素与背景像素融合,从而实现透明或半透明的效果。Alpha Blend在渲染具有透明度的物体(如窗户、玻璃、水、雾等)时非常重要。 Alpha Blend的概念: Alpha值:Alpha值是一个介于0(完全透明)和1(完全不透明)的数值,用于表示像素的透明度。混合模式:Alpha B

ArkTS开发系列之导航 (2.7动画)

上篇回顾: ArkTS开发系列之导航 (2.6 图形) 本篇内容:动画的学习使用 一、 知识储备 1. 布局更新动画 包含显式动画(animateTo)和属性动画(animation) 动画类型名称特点显式动画闭包内的变化都会触发动画执行, 可以做较复杂的动画属性动画属性变化时触发动画执行, 设置简单 说白了,显示动画就是靠闭包事件触发,属性动画是挂在组件身上的属性变化触发 显式动画

Android 扇形网络控件 - 无网络视图(动画)

前言 一般在APP没有网络的情况下,我们都会用一个无网络的提示图标,在提示方面为了统一app的情况,我们一般使用简单的提示图标,偶尔只需要改变一下图标的颜色就一举两得,而不需要让PS来换一次颜色。当然app有图标特殊要求的就另当别论了。 效果图 当你第一眼看到这样的图,二话不说直接让UI给你切一张图标来的快对吧,我其实开始也是这么想的,但是到了做的app越来越多的时候,你就会发现就算是用

Unity Meta Quest 开发:关闭 MR 应用的安全边界

社区链接: SpatialXR社区:完整课程、项目下载、项目孵化宣发、答疑、投融资、专属圈子 📕教程说明 这期教程我将介绍如何在应用中关闭 Quest 系统的安全边界。 视频讲解: https://www.bilibili.com/video/BV1Gm42157Zi 在 Unity 中导入 Meta XR SDK,进行环境配置后,打开 Assets > Plugins > An

PriorityQueue详解(含动画演示)

目录 PriorityQueue详解1、PriorityQueue简介2、PriorityQueue继承体系3、PriorityQueue数据结构PriorityQueue类属性注释完全二叉树、大顶堆、小顶堆的概念☆PriorityQueue是如何利用数组存储小顶堆的?☆利用数组存储完全二叉树的好处? 4、PriorityQueue的`offer`方法动画演示offer插入过程: 5、Pri

LVGL8.3动画图像(太空人)

LVGL8.3 动画图像 1. 动画图像本质 我们知道电影属于视频,而电影的本质是将一系列动作的静态图像进行快速切换而呈现出动画的形式,也就是说动画本质是一系列照片。所以 lvgl 依照这样的思想而定义了动画图像,所以在 lvgl 中动画图像类似于普通的静态图像对象。 唯一的区别是,动画图像设置了一个由多个源图像组成的数组,而不仅仅指定一个源图像。 2. 设置动画图像图片来源 不过在此之前

vuejs3用gsap实现动画

效果 gsap官网地址: https://gsap.com/ 安装gsap npm i gsap 创建Gsap.vue文件 <script setup>import {reactive, watch} from "vue";import gsap from "gsap";const props = defineProps({value:{type:Number,default

Unity 字体创建时候容易导致字体文件不正确的一种情况

上面得到了两种字体格式,一种是TextMeshPro的,另一种是Unity UI系统中默认使用的字体资源。其原因是创建的位置不同导致的。 1.下面是TextMeshPro字体创建的位置 2:下面是Unity UI系统中默认使用的字体资源

摄像头画面显示于unity场景

🐾 个人主页 🐾 🪧阿松爱睡觉,横竖醒不来 🏅你可以不屠龙,但不能不磨剑🗡 目录 一、前言二、UI画面三、显示于场景四、结语 一、前言 由于标题限制,这篇文章主要是讲在unity中调用摄像头,然后将摄像头捕捉到的画面显示到场景中,无论是UI画面还是场景中的某个物体上;至于应用的场景可以用于AR增强现实。 那么话不多说,直接开始今