当前位置: 首页 > news >正文

Babylon.js学习之路《八、动画基础:关键帧动画与缓动效果》

在这里插入图片描述

文章目录

  • 1. 引言:动画在3D场景中的核心作用
  • 2. 关键帧动画基础
    • 2.1 键帧动画原理
    • 2.2 创建简单关键帧动画
  • 3. 缓动函数(Easing Functions)
    • 3.1 缓动函数的作用
    • 3.2 应用缓动函数
  • 4. 复杂动画:多属性联动与序列控制
    • 4.1 同时控制位置、旋转、缩放
    • 4.2 动画序列控制
  • 5. 实战任务
    • 任务 1:实现角色跑步动画
    • 任务 2:交互式动画(点击触发特效)
  • 6. 性能优化与常见问题
    • 6.1 优化技巧
    • 6.2 常见问题
  • 7. 总结与下一章预告
    • 7.1 关键知识点回顾
    • 7.2 下一章预告


1. 引言:动画在3D场景中的核心作用

从基础动画到复杂交互的完整技能,为3D场景注入动态生命力

  • 核心作用
    - 提升场景动态表现力(如角色移动、机械运转、UI元素过渡)。
    - 增强用户交互反馈(如按钮点击效果、物体拖拽动画)。

  • 案例对比
    - 静态场景:缺乏生命力,用户注意力易分散。
    - 动态场景:通过动画引导视线,传递信息(如旋转的齿轮表示设备运行)。


2. 关键帧动画基础

2.1 键帧动画原理

  • 关键帧(Keyframe)定义
    在时间轴上定义物体属性的关键状态点(如位置、旋转、缩放)。
  • 插值(Interpolation)
    系统自动计算关键帧之间的过渡状态(如从位置A到位置B的平滑移动)。

2.2 创建简单关键帧动画

  • 示例:立方体旋转动画
      const animBox = new BABYLON.Animation("boxRotation",  // 动画名称"rotation.y",   // 目标属性(绕Y轴旋转)30,             // 帧率(每秒30帧)BABYLON.Animation.ANIMATIONTYPE_FLOAT, // 属性类型BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE // 循环模式);// 定义关键帧const keyFrames = [{ frame: 0, value: 0 },          // 第0帧,旋转角度0{ frame: 30, value: Math.PI },   // 第30帧,旋转180度{ frame: 60, value: Math.PI * 2} // 第60帧,旋转360度];animBox.setKeys(keyFrames);  // 绑定关键帧box.animations = [animBox];  // 关联到物体scene.beginAnimation(box, 0, 60, true); // 播放动画(循环)
    

3. 缓动函数(Easing Functions)

3.1 缓动函数的作用

  • 定义
    控制动画速度变化规律(如加速启动、减速停止)。

  • 常见类型

    • Linear(线性):匀速运动。
    • EaseIn(加速):动画开始时慢,逐渐加速。
    • EaseOut(减速):动画结束时慢,逐渐减速。
    • Bounce(弹性):模拟物理弹性效果(如球体落地弹跳)。

3.2 应用缓动函数

  • 代码示例:立方体弹性缩放
      const animScale = new BABYLON.Animation("boxScale", "scaling", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);const keyFrames = [{ frame: 0, value: new BABYLON.Vector3(1, 1, 1) },  // 原始大小{ frame: 30, value: new BABYLON.Vector3(2, 2, 2) }  // 放大2倍];animScale.setKeys(keyFrames);animScale.setEasingFunction(new BABYLON.BounceEase()); // 弹性缓动box.animations.push(animScale);scene.beginAnimation(box, 0, 30, false); // 播放一次
    

4. 复杂动画:多属性联动与序列控制

4.1 同时控制位置、旋转、缩放

  • 代码示例:物体跳跃动画
      // 创建位置动画(Y轴上下跳动)const animPos = new BABYLON.Animation(...);animPos.setKeys([{ frame: 0, value: new BABYLON.Vector3(0, 0, 0) },{ frame: 15, value: new BABYLON.Vector3(0, 3, 0) },{ frame: 30, value: new BABYLON.Vector3(0, 0, 0) }]);// 创建旋转动画(绕Z轴旋转)const animRot = new BABYLON.Animation(...);animRot.setKeys([{ frame: 0, value: 0 },{ frame: 30, value: Math.PI * 2 }]);// 同时播放两个动画scene.beginDirectAnimation(box, [animPos, animRot], 0, 30, true);
    

4.2 动画序列控制

  • 顺序播放与延迟触发
      // 先播放缩放动画,再播放旋转动画scene.beginAnimation(box, 0, 30, false).onAnimationEnd = () => {scene.beginAnimation(box, 0, 60, true); // 旋转动画循环};
    

5. 实战任务

任务 1:实现角色跑步动画

  • 目标:通过关键帧控制角色四肢摆动和位移。

  • 步骤

    1. 定义腿部与手臂的旋转关键帧。
    2. 同步身体的前进位移。
    3. 应用 SineEase 缓动模拟自然运动。
  • 代码要点

      // 腿部摆动动画const legAnim = new BABYLON.Animation(...);legAnim.setEasingFunction(new BABYLON.SineEase());
    

任务 2:交互式动画(点击触发特效)

  • 目标:点击物体后播放爆炸粒子动画。
  • 代码要点
      box.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,() => {const particleSystem = new BABYLON.ParticleSystem(...);particleSystem.start(); // 播放粒子动画setTimeout(() => particleSystem.stop(), 1000); // 1秒后停止}));
    

6. 性能优化与常见问题

6.1 优化技巧

  • 合并动画轨道:减少独立动画数量,使用 beginDirectAnimation 批量处理。
  • 限制帧率:对非关键动画降低帧率(如从30帧/秒降至15帧/秒)。

6.2 常见问题

  • 问题1:动画卡顿
    • 原因:复杂场景中GPU负载过高。
    • 解决:启用层级细节(LOD),简化远处物体的动画。
  • 问题2:缓动效果不生效
    • 检查点:确认缓动函数正确绑定到动画对象:
      anim.setEasingFunction(new BABYLON.CircleEase()); // 正确方式
      

7. 总结与下一章预告

7.1 关键知识点回顾

  • 核心技能:关键帧定义、缓动函数选择、多动画联动、性能优化。
  • 扩展方向
    • 骨骼动画:控制角色骨骼的复杂动作。
    • 动画状态机:通过逻辑管理动画切换(如 idle → run → jump)。
    • 物理动画混合:结合物理引擎实现更真实的运动(如布料模拟)。

7.2 下一章预告

  • 《物理引擎入门:重力、碰撞与刚体模拟》:集成 Cannon.js/Oimo.js,实现物理交互效果。

相关文章:

Babylon.js学习之路《八、动画基础:关键帧动画与缓动效果》

文章目录 1. 引言:动画在3D场景中的核心作用2. 关键帧动画基础2.1 键帧动画原理2.2 创建简单关键帧动画 3. 缓动函数(Easing Functions)3.1 缓动函数的作用3.2 应用缓动函数 4. 复杂动画:多属性联动与序列控制4.1 同时控制位置、旋…...

小满未满,是成长的序章

节气小满,昭示着奋斗正当时,Codigger 怀揣热忱,在代码的天地里披荆斩棘,向着圆满目标大步迈进 。...

JavaWeb 开发流程

项目建立 SpringBoot框架构建 Spring Boot 是基于 Spring 框架的开源 Java 基础框架,用于创建独立、生产级的基于 Spring Framework 的应用程序。 我们可以使用IDEA建立SpringBoot框架。 语言选择Java,类型选择Maven,JDK和Java要保持一致&…...

Cmake 使用教程

介绍 CMake 是一个开源、跨平台的构建系统,主要用于软件的构建、测试和打包。CMake 使用平台无关的配置文件 CMakeLists.txt 来控制软件的编译过程,并生成适用于不同编译器环境的项目文件。例如,它可以生成 Unix 系统的 Makefile 、 Win…...

CLIP、ViLT 与 LLaVA:多模态模型是如何看图说话的?

一、前言:我们已经讲了 MLLM 能力,但它到底是怎么实现“看图说话”的? 在之前文章中,我们已经提到了MLLM可以看图说话以及文生图等能力,ViT统一图文多模态架构。那模型是如何处理图文信息以及不同处理所带来的能力是怎…...

基于Springboot + vue3实现的流动摊位管理系统

项目描述 本系统包含管理员、用户、商家三个角色。 管理员角色: 用户管理:管理系统中所有用户的信息,包括添加、删除和修改用户。 配置管理:管理系统配置参数,如上传图片的路径等。 权限管理:分配和管理…...

我的软考经历

说明:本文分享博主软考经验,及软考证书在找工作时的作用。 软考 软考,全称:中国计算机技术与软件专业技术资格(水平)考试,报名/考试/查询网址为,中国计算机技术职业资格网 考试分…...

C++的异常

引入:异常的意义是什么? ①:错误分离 将正常逻辑(try)与错误处理(catch)分离,避免代码被大量 if-else 污染。 ②:强制处理 若不捕获异常,程序终止&#xff0c…...

精益制造数字化转型智能工厂三年规划建设方案

该文档是精益制造数字化转型智能工厂三年规划建设方案,以打造高品质、低成本、柔性化的绿色智能工厂为愿景,围绕制造技术、自动化、数智化、管理赋能四大路径,通过夯实 EHS、品质一致性、生产安定化、现场整洁四大基石,推进标杆车间打造、联合管理、TOB 流程改善等专项。规…...

Linux 文件(3)

文章目录 1. Linux下一切皆文件2. 文件缓冲区2.1 缓冲区是什么2.2 缓冲区的刷新策略2.3 为什么要有缓冲区2.4 一个理解缓冲区刷新的例子 3. 标准错误 1. Linux下一切皆文件 在刚开始学习Linux的时候,我们就说Linux下一切皆文件——键盘是文件,显示器是文…...

Java异步编程利器:CompletableFuture 深度解析与实战

精心整理了最新的面试资料和简历模板,有需要的可以自行获取 点击前往百度网盘获取 点击前往夸克网盘获取 一、CompletableFuture 概述 CompletableFuture是Java 8引入的异步编程工具类,实现了Future和CompletionStage接口,支持链式调用、组…...

如何支持Enhanced RTMP H.265(HEVC)

在实时音视频传输中,H.264长期占据主流,但随着视频质量要求的不断提高和带宽压力的加大,H.265(HEVC)作为下一代视频编码标准逐渐崭露头角。 在这种背景下,我们顺应行业发展趋势,成功集成了对Enh…...

Idea 查找引用jar包依赖来源的Maven pom坐标

目录 问题引入 实现解决 问题引入: 在查看拉取的项目,维护自己项目、或者迁移原有项目时,会遇到不知道代码中引用到的依赖从哪里引用到的。 所以利用Idea,从import语句到Maven项目结构树中查找,最终找到pom文件里的…...

Linux操作系统之进程(二):进程状态

目录 前言 一、补充知识点 1、并行与并发 2、时间片 3、 等待的本质 4、挂起 二. 进程的基本状态 三、代码演示 1、R与S 2、T 3、Z 四、孤儿进程 总结: 前言 在操作系统中,进程是程序执行的基本单位。每个进程都有自己的状态,这些…...

web.py使用时报错AttributeError: No template named image_window

在使用python的web.py框架做前后端时遇到问题。 问题代码主要如下,当加上main(iamge_name)这行代码后就会报错。报错信息包含两个:第一是找不到image_window模板;第二是gbk无法解码... class ImageWindow:def GET(self, image_name):main(i…...

2025年度消费新潜力白皮书470+份汇总解读|附PDF下载

原文链接:https://tecdat.cn/?p42178 过去一年,消费市场在政策驱动与技术迭代中呈现结构性变革。社零总额达487,895亿元,实物商品网零额占比27%,线上渠道成为增长引擎。本报告从食品饮料、美妆护肤、家电数码、服饰户外四大核心领…...

全平台开源电子书阅读器推荐,支持多端同步+AI朗读!支持epub/mobi/azw3/pdf常见电子书格式!

Readest是一款好用的免费阅读工具,界面干净不花哨,特别适合喜欢专心读书的朋友。这个软件是经典阅读软件Foliate的全新升级版本,用最新技术开发,能在手机、电脑(包括苹果和Windows系统)以及网页上顺畅使用。…...

创建Workforce

创建你的Workforce 3.3.1 简单实践 1. 创建 Workforce 实例 想要使用 Workforce,首先需要创建一个 Workforce 实例。下面是最简单的示例: from camel.agents import ChatAgent from camel.models import ModelFactory from camel.types import Model…...

关于光谱相机的灵敏度

一、‌灵敏度的核心定义‌ ‌光谱灵敏度(单色灵敏度)‌ 描述光谱相机对单色辐射光的响应能力,即探测器对特定波长入射光的输出信号强度与入射光功率的比值。 例如,若在680nm波长下的光谱灵敏度较高,则表示该相机对此…...

【Redis】二、Redis常用数据类型命令学习

目录 一、String 1. SET、GET:设置与读取键值对: 2. DEL:删除键 3. INCR、DECR:自增 / 自减(常用于计数器) 4. APPEND:内容追加 5. EXPIRE:设置过期时间 / 查看剩余时间&#x…...

HarmonyOS基础组件:Button三种类型的使用

简介 HarmonyOS在明年将正式不再兼容Android原生功能,这意味着对于客户端的小伙伴不得不开始学习HarmonyOS开发语言。本篇文章主要介绍鸿蒙中的Button使用。 HarmonyOS中的Button相较于Android原生来说,功能比较丰富,扩展性高,减…...

RT_Thread——快速入门

文章目录 一、RT-Thread 目录结构二、核心文件三、移植时涉及的文件3.1 CPU 部分3.2 BSP 部分 四、内存管理五、启动流程及main函数5.1 启动流程5.2 关键函数速览5.3 main 函数示例 六、数据类型和编程规范6.1 数据类型6.2 函数名6.3 结构体定义6.4 注释规范 七、使用模拟器运行…...

Java 参数值传递机制

一个很经典的问题: java的方法入参 是值传递还是地址传递? 答案是:值传递。 今天排查一个生产问题,数据库链接资源没有关闭。 大致代码逻辑如下: try{Preparestatement ps null;String sql "select * from tableA wher…...

Redis 的 key 的过期策略是怎么实现的

在 Redis 中,有一个 expire 命令,用来设置某个 key 的过期时间,当超过这个时间后,这个 key 就被删除了,我们也就获取不到了,但是 Redis 是如何做到对于每一个设置了过期时间的 key 都能按时删除的呢&#x…...

ROG NUC 2025 :狂暴而冷静的小猛兽

在今年1 月的 CES 展会上,华硕首次披露了ROG NUC 2025,就以突破性紧凑设计桌面级超强性能配置,引发全球科技媒体和游戏爱好者的热议。蛰伏数月,蓄力进化! 华硕自承接英特尔NUC产品线以来,就一直致力于重塑迷…...

origin绘图之【如何将多条重叠、高度重叠的点线图、折线图分开】

在使用 Origin 进行数据可视化时,尤其是在绘制多组数据的折线图或点线图时,我们经常会遇到这样的问题:多条曲线重叠严重,难以区分,导致图形信息密集、可读性差,影响图表的传达效果。 那么,我们该…...

2025第一届轩辕杯--Crypto--WriteUp

2025第一届轩辕杯–Crypto–WriteUp Crypto easyrsa task e 65537 n 1000000000000000000000000000156000000000000000000000000005643 c 418535905348643941073541505434424306523376401168593325605206exp from Crypto.Util.number import inverse, long_to_bytese …...

人工智能范式:技术革命下的认知重构

当生成式AI能够自主创作内容、设计解决方案甚至编写程序时,我们正在见证的不仅是工具革新,更是一场认知范式的根本转变。人工智能范式正在重塑人类理解世界、解决问题和创造价值的基本方式——这种转变将重新定义未来十年的职业逻辑与知识体系。 一、范…...

python训练营打卡第30天

模块和库的导入 知识点回顾: 导入官方库的三种手段导入自定义库/模块的方式导入库/模块的核心逻辑:找到根目录(python解释器的目录和终端的目录不一致) 一、导入官方库 1.标准导入:导入整个库 import mathprint(&quo…...

第29天-python实现mysql数据增删改查

想用Python和Tkinter实现一个MySQL数据库的增删改查应用。首先,我需要确定用户的需求是什么。他们可能想要一个图形界面,方便操作数据库,而不需要直接写SQL语句。用户可能对Python和Tkinter有一定了解,但对如何整合数据库操作可能不太熟悉。 首先,我应该考虑如何设计界面。…...

2025.05.21华为暑期实习机考真题解析第三题

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 03. GPU资源租赁优化 问题描述 A先生是一家云计算服务商的资源调度负责人,负责管理公司的GPU资源租赁业务。公司拥有多个高性能GPU核心,并按时间段出租给不同客户使用。每个客户有…...

Datawhale 5月llm-universe 第4次笔记

第四章 构建RAG应用 envs 在 Conda 中,envs 目录是用来存放虚拟环境的地方。 也就是说,你在运行: onda create -n llm-universe python3.10 时,Conda 就会在这个路径下创建一个新的文件夹: makefile D:\Users\…...

滑窗问题实验LC2653(一次遍历维持窗口元素保持排序)

在只有一次遍历(即滑窗每向右移动一步只处理新增元素和删除旧元素)的前提下,要维持当前窗口内元素的全局“可排序”结构 问题背景:LeetCode 2653 - 滑动子数组的美丽值 题目要求在大小为 k 的滑动窗口中,找到第 x 小…...

PHP学习笔记(八)

返回值 值通过可选参数的返回语句返回 return的使用 函数不能返回多个值,但可以通过返回一个数组来得到类似的效果 函数返回一个引用,必须在函数声明和指派返回值给一个变量时都使用引用运算符&: 可变函数 PHP支持可变函数的概念。意味…...

【react18】在styled-components中引入图片报错

在styled-components项目中,遇到背景图片显示不出来的问题。图片的确是引入正确,但是webpack解析路径是有问题的 效果展示 以下这两种写法都不行,无法生效 export const HeaderNavLeft styled.h1width: 176px;height: 69px;background: ur…...

693SJBH基于.NET的题库管理系统

计算机与信息学院 本科毕业论文(设计)开题报告 论文中文题目 基于asp.net的题库管理系统设计与实现 论文英文题目 Asp.net based database management system design and Implementation 学生姓名 专业班级 XXXXXX专业08 班 ⒈选题的背景和意…...

centos系统redis-dump安装

1. ​Ruby 环境​ Redis-dump 是一个 Ruby 工具,需先安装 Ruby 和 RubyGems。 安装依赖​: sudo yum install -y curl gpg2 gcc-c patch readline readline-devel zlib zlib-devel libyaml-devel libffi-devel openssl-devel make bzip2 autoconf aut…...

如何利用 Conda 安装 Pytorch 教程 ?

如何利用 Conda 安装 Pytorch 教程 ? 总共分为六步走: (1)第一步:验证conda 环境是否安装好? 1) conda -V2) conda --version(2)第二步:查看现有环境 conda env list…...

FPGA降低功耗研究

FPGA降低功耗研究 首先要明白一点:我们的核心目标是在维持性能的前提下,通过工艺、架构、设计方法学和系统级策略的协同优化,降低动态功耗、静态功耗和短路功耗。 本篇文章则是聚焦于 FPGA 设计阶段 的功耗优化,主要从 RTL 代码设…...

软考 系统架构设计师系列知识点之杂项集萃(67)

接前一篇文章:软考 系统架构设计师系列知识点之杂项集萃(66) 第108题 RISC(精简指令系统计算机)的特点不包括()。 A. 指令长度固定,指令种类尽量少 B. 寻址方式尽量丰富&#xff…...

第十节第三部分:常见API:传统时间:Date日期类、SimpleDateFormat

Date日期类常用方法 时间格式常用符号 Date日期类总结 为什么用SimpleDateFormat SimpleDateFormat常见方法 SimpleDateFormat解析字符串时间成为日期对象 SimpleDateFormat总结 代码: 代码一:Date日期类 package com.itheima.Time;import java.util.D…...

Python学习Day1:安装

Python的安装 1.安装python 打开python的官网,我们下载3.6.8版本Python Release Python 3.6.8 | Python.org 根据自己的电脑来下载对应的python版本 如图所示: 我已经下载完成,就是这样, 安装页面的第一排是自动安装&#xf…...

Java安全-Servlet内存马

内存马简介 内存马是指将恶意代码注入到内存中,达到无文件落地的效果,使得被攻击方难以察觉。由于是无文件的形式,可以绕过部分基于文件检测的杀软。而 Servlet 内存马是基于 Java Servlet 技术,动态将恶意代码注入到 Tomcat 内存…...

Mariadb cpu 93% 问题

最近项目遇到cpu平均使用率93% 一、登录数据库服务查看具体情况 可以看到服务器负载很高,,mariadb CPU使用已达到接近380.4% (因为是8核,所以会有超过100%的情况)。如下图: 二、排查是否有耗时较长sql 在…...

LeetCode222_完全二叉树的结点个数

LeetCode222_完全二叉树的结点个数 标签:#位运算 #树 #二分查找 #二叉树Ⅰ. 题目Ⅱ. 示例 0. 个人方法 标签:#位运算 #树 #二分查找 #二叉树 Ⅰ. 题目 给你一棵 完全二叉树 的根节点 root ,求出该树的节点个数。 完全二叉树 的定义如下&…...

linux 查看java的安装路径

一、验证Java安装状态 java -version正常安装会显示版本信息: openjdk version "1.8.0_65" OpenJDK Runtime Environment (build 1.8.0_65-b17) OpenJDK 64-Bit Server VM (build 25.65-b01, mixed mode)二、检查环境变量配置 若已配置JAVA_HOME&#…...

day32 python解释性库PDPbox

目录 一、初识PDPbox官方文档 二、准备鸢尾花数据集和训练模型 三、使用PDPbox进行解释性分析 1. 导入类并实例化对象 2. 调用plot方法绘制图形 3. 探索返回值的意义 四、总结与感悟 作为一名正在学习机器学习的学生,今天要学习一个非常有趣的库——PDPbox&am…...

LVLM-AFAH论文精读

Basic Information 标题:Your Large Vision-Language Model Only Needs A Few Attention Heads For Visual Grounding作者:Seil Kang, Jinyeong Kim, Junhyeok Kim, Seong Jae Hwang机构:Yonsei Universit…...

蓝桥杯3503 更小的数

问题描述 小蓝有一个长度均为 n 且仅由数字字符 0∼9 组成的字符串,下标从 0 到 n−1,你可以将其视作是一个具有 n 位的十进制数字 num,小蓝可以从 num 中选出一段连续的子串并将子串进行反转,最多反转一次。 小蓝想要将选出的子…...

5.21本日总结

一、英语 复习list4list26 二、数学 学完14讲,1000题13讲写完 三、408 学习计网5.3剩余内容 四、总结 高数本月结束知识点学习,15讲知识点与14讲的题目同步进行。408剩余两本书要加快学习进度。 五、明日计划 英语:复习lsit5list25 …...