首页 > 其他分享 >【Rive】骨骼动画

【Rive】骨骼动画

时间:2024-12-24 21:53:08浏览次数:4  
标签:Rive 动画 骨骼 绑定 IK 图形

1 骨骼基本概念

1)骨骼简介

​ 骨骼不能渲染显示,只能控制其他图形变换,具有以下特性。

  • 绑定图形:可以将图形绑定到骨骼上,使图形随骨骼移动、旋转或缩放。
  • 权重 (Weights):通过调整顶点权重,可以控制图形在骨骼运动时的变形程度,从而实现平滑的形变效果。
  • IK(反向动力学)约束:通过操控骨骼末端来控制整个骨骼链条的姿态(如:角色开枪后,枪的震动带动手和胳膊的抖动)。

img

2)绑定骨骼

​ 选中图形中的 Path,点击 Bind Bones 后面的 “+” 号,然后选择要绑定的骨骼,按 Shift 键可以选择绑定多个骨骼。如果 Bind Bones 选项未出现,先点击一次 Edit Vertices,就会出现 Bind Bones 选项。

img

3)配置顶点权重

​ 选中图形中的 Path,点击 Edit Vertices,选中 Path 的顶点(或贝塞尔曲线手柄),在右侧 Bind Bones 中可以配置骨骼的权重。

img

4)IK 约束

​ 选中骨骼后,点击 Constraints 后面的 “+”,选择 IK 选项,再选择 Target。

img

2 骨骼动画应用

​ 本节只展示 Rive Editor 中的案例实现步骤,Rive 在 Android 中的环境配置详见 → Rive在Android上的简单应用。本节完整资源详见 → 基于Rive骨骼动画实现绳摆动画

1)界面显示

img

2)骨骼权重

img

img

img

img

img

img

img

3)IK 约束

​ 选中第 3 块 骨骼,添加 IK 约束,Target 是 下面的圆形。

4)动画参数

​ 第 1、3、5 帧参数:

img

​ 第 2 帧参数:

img

​ 第 4 帧参数:

img

5)运行效果

img

​ 声明:本文转自【Rive】骨骼动画

标签:Rive,动画,骨骼,绑定,IK,图形
From: https://www.cnblogs.com/zhyan8/p/18621016

相关文章

  • 使用css3画一个小火车动画
    创建一个简单的小火车动画涉及几个步骤。首先,我们需要定义火车和轨道的HTML结构。然后,我们将使用CSS3来样式化这些元素,并添加动画效果。以下是一个基本示例,展示如何创建一个小火车在轨道上行驶的动画:HTML结构:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF......
  • 使用CSS3实现电影投影仪动画
    实现一个电影投影仪动画需要涉及多个CSS3的特性,如动画(@keyframes)、渐变(linear-gradient)、阴影(box-shadow)以及转换(transform)等。以下是一个简单的示例,展示了如何创建一个基础的“电影投影仪”动画效果。HTML结构:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UT......
  • 使用CSS3绘制一杯冒热气的咖啡动画
    在前端开发中,使用CSS3来绘制一杯冒热气的咖啡动画是一个有趣且富有挑战性的任务。以下是一个简单的示例,说明如何使用HTML和CSS3来创建这样的动画。首先,我们需要创建HTML结构来表示咖啡杯和热气:<divclass="coffee-cup"><divclass="steam"></div><divclass="steam"></div......
  • 使用CSS3绘制一只卡通小蜜蜂的动画特效
    要使用CSS3来绘制一只卡通小蜜蜂并添加动画特效,你需要利用CSS的各种属性,包括border-radius、transform、animation和@keyframes等。以下是一个简单的示例,展示了如何创建一个小蜜蜂并为其添加飞行动画。HTML<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">......
  • 【Rive】事件回调
    1前言​Android中可以通过RiveAnimationView的addEventListener方法添加动画监听器,用于监听状态动画和过渡动画的开始和结束时机,实现动画开始和结束时的事件回调;也可以监听Rive事件触发的时机,在事件触发时响应回调。//添加事件监听器funaddEventListener(listene......
  • 【Rive】波动文字
    1前言​本文将使用文本修改器(TextModifiers)做文字动画,实现文字波动效果。​按以下步骤可以创建一个ModifierGroup和Range。​部分参数的释义如下。Range:Modifier作用的范围。Falloff:Modifier在最大值时的范围,Falloff一般是Range的子集。Offset......
  • jQuery+css3制作精美的2024圣诞节倒计时页面动画HTML源码,附源码下载
    源码介绍jQuerycss3制作精美的2024年圣诞节倒计时主题页面,下着雪拉着雪橇的圣诞老人圣诞节倒计时元素动画特效。源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,源码下载jQuery+css3制作精美的20......
  • manim边学边做--移动动画
    在Manim中,其实直线移动的动画非常简单,每个Mobject对象都有animate属性,通过obj.animate.shift()或者obj.animate.move_to()很容易将对象从一个位置移往另一个位置。不过,如果要更复杂的移动路线,那么animate属性的移动方法就无法满足了。本篇介绍Manim中的两个处理复杂移动动画的......
  • 基于Web Animations API的js动画库插件
    animatelo.js是一款基于WebAnimationsAPI的js动画库插件。通过animatelo.js动画库插件可以制作出63种炫酷的过渡动画效果,这些动画效果和animate.css相似。 在线预览 下载 安装可以通过bower或npm来安装animatelo.js动画库插件。$bowerinstallanimatel--save$np......
  • 使用CSS3+SVG实现点火发射的动画
    要使用CSS3和SVG实现一个点火发射的动画,你需要组合多种技术,包括SVG图形、CSS动画和过渡效果。以下是一个简化的步骤指南,用于创建这样的动画:1.准备SVG图形首先,你需要准备代表火箭和火焰的SVG图形。你可以使用像AdobeIllustrator或Inkscape这样的矢量图形编辑器来创建它们,或者从......