CocosCreator 之 Tween缓动系统的使用

2023-11-28 06:15
文章标签 使用 cocoscreator 动系统 tween

本文主要是介绍CocosCreator 之 Tween缓动系统的使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

版本： 3.4.0

语言： TypeScript

环境： Mac


简介

在CocosCreator 3.x版本后， Tween缓动系统代替了原有的Action动作。官方使用缓动系统的主要目的之一是用于解决离线动画无法满足需求时的动态动画问题。

简单的示例：

let duration = 2;
tween(this.tipNode)// 延迟两秒.delay(duration)// 2秒钟移动到(0, 300, 0)的位置，并缩放由1为0.to(duration, {position: new Vec3(0, 300, 0)})// 执行回调.call(() => {console.log("运行结束");})// 开始运行当前缓动对象.start();

使用缓动，主要通过tween函数来构建Tween实例化对象。它非Tween成员：

// tween 是一个工具函数，帮助实例化Tween实例，target用于设置缓动的目标
export function tween<T>(target?: T): Tween<T>;

在缓动中，主要通过by和to修改某些属性， 其中：

  • by 使用 相对值 修改属性
  • to 使用 绝对值 修改属性

Tween提供的大部分接口返回的对象是this 或者一个新的Tween对象， 因此可以使用 链式调用。

上面的示例等同于：

// tweenObj 对象就是新生成的Tween实例化对象
let duration = 2;
let tweenObj_1 = tween(this.tipNode);
let tweenObj_2 = tweenObj_1.delay(duration);
let tweenObj_3 = tweenObj_2.to(duration, {position: new Vec3(0, 300, 0)});
let tweenObj_4 = tweenObj_3.call(() => {console.log("运行结束");
});
let tweenObj_5 = tweenObj_4.start();
console.log(typeof(tweenObj_5), tweenObj_5);

本篇文章主要讲述下关于缓动系统的使用，理解可能有误，欢迎您的指出。


常用接口

Tween类的基本使用：

// 声明的tween函数，用于实例化Tween对象
export function tween<T>(target?: T): Tween<T>;
// 构造函数相关，关于target可以通过构造函数或target方法设置缓动目标
export class Tween<T> {constructor(target?: T | null);target(target: T): Tween<T | undefined>;
}

创建缓动的简单示例：

let duration = 2;
// 使用构造函数
tween(this.node).to(duration, {position:new Vec3(0, 10, 0)}).start();
// 使用target
tween().target(this.node).to(duration, {position:new Vec3(0, 10, 0), scale: new Vec3(0, 0, 0)}).start();

注意： Tween 支持同时修改目标的多个属性，并非仅一个

Tween提供的接口较多，为了方便查看，主要为了如下几类：

  • 静态接口
  • 基础接口
  • 队列接口 主要用于顺序执行，并列执行， 执行重复次数等复杂动作

静态接口

接口说明
stopAll(): void停止所有缓动
stopAllByTag(tag: number, target?: object): void停止所有指定标签的缓动
stopAllByTarget(target?: object): void停止所有指定对象的缓动

简单示例：

tween(this.node).tag(1000).to(duration, {position:new Vec3(0, 10, 0)}).call(() => {// 三种方式，任一即可Tween.stopAllByTarget(this.tipNode);Tween.stopAllByTag(1000);Tween.stopAll();}).start();

基础接口

接口说明
tag(tag: number): this设置缓动的标签
target(target: T): Tween<T>添加一个 直接设置缓动目标 的瞬时动作
start(): Tween<T>运行当前缓动
stop(): Tween<T>停止当前缓动
clone(target: T): Tween<T>克隆当前缓动
to(duration, props, opts): Tween<T>添加一个对属性进行 相对值 计算的间隔动作
by(duration, props, opts): Tween<T>添加一个对属性进行 绝对值 计算的间隔动作
set(props): Tween<T>添加一个 直接设置目标属性 的瞬时动作
delay(duration: number): Tween<T>添加一个延时 action
call(callback: Function): Tween<T>添加一个回调 action
show(): Tween<T>添加一个显示action，只适用target 是节点类型
hide(): Tween<T>添加一个隐藏 action，只适用target 是节点类型
removeSelf(): Tween<T>添加一个移除自己 action，只适用target是节点类型

简单示例：

let duration = 2;
// 示例1: 显示和隐藏节点
tween(this.node)        .hide()        .delay(1.0).show().start();
// 示例2: 移除节点
tween(this.node)        .delay(1.0).removeSelf()        .start();
// 示例3: 设置目标属性、可选选项及销毁缓动
tween().tag(1000).target(this.tipNode).set({position: new Vec3(0, 0, 0), scale: new Vec3(1, 1, 1)}).delay(duration)// 设置位置属性及缓动的可选选项.to(duration, {position: new Vec3(0, 300, 0), scale: new Vec3(0, 0, 0)}, {// 设置缓动方式easing: "smooth",onComplete: (target) => {console.log("当缓动动作完成时触发");},}).call(() => {Tween.stopAllByTarget(this.tipNode);}).start();

队列接口

接口说明
union(): Tween<T>将之前所有的 action 整合为一个 action
then(other: Tween<T>): Tween<T>插入一个 tween 到队列中
sequence(...args: Tween<T>[]): Tween<T>添加一个顺序执行的缓动
parallel(...args: Tween<T>[]): Tween<T>添加一个同时进行的缓动
repeat(repeatTimes, embedTween?): Tween<T>执行几次
repeatForever(embedTween?): Tween<T>一直重复执行

简单的示例：

let duration: number = 1.0;// 整合       
tween(this.node).to(duration, {position:new Vec3(0, 10, 0)})// 此时 Tween 内的动作数量为 2.to(duration, {position:new Vec3(0, -10, 0)})// 这里会将上述的两个缓动整合成一个，此时 Tween 内的动作数量为 1.union().start(); // 插入
let t2 = tween(this.node).to(duration, { position: new Vec3(0, -10, 0) })tween(this.node).by(duration, { position: new Vec3(0, 10, 0) }).then(t2).start();// 使用sequence按照顺序执行
let t1 = tween(this.node).to(duration, {position: new Vec3(0, 10, 0)})
let t2 = tween(this.node).to(duration, {position: new Vec3(0, -10, 0)})
tween(this.node).sequence(t1, t2).start();// 使用parallel同时执行
let t1 = tween(this.node).to(duration, {position: new Vec3(0, 10, 0)})
let t2 = tween(this.node).to(duration, {position: new Vec3(0, -10, 0)})
tween(this.node).parallel(t1, t2).start();// 重复执行
// 方式1: 
let tweenDuration: number = 1.0;
tween(this.node).to(tweenDuration, { position: new Vec3(0, 10, 0) }).by(tweenDuration, { position: new Vec3(0, -10, 0) }).repeat(3) // 注意这里会重复 by 这个缓动 3 次.start()
// 方式2:
let embedTween = tween(this.node).by(tweenDuration, {position: new Vec3(0, -10, 0)})tween(this.node).to(tweenDuration, {position: new Vec3(0, 10, 0)}).repeat(3, embedTween)  // 这里会重复 embedTween.start();

ITweenOption 缓动选项

ITweenOption主要应用于Tween的 to和by方法中， 它作为可选参数，用于设定缓动的方式和回调相关。

export class Tween<T> {// 添加相对值属性to(duration: number, props: __private.cocos_tween_tween_ConstructorType<T>, opts?: ITweenOption): Tween<T>;// 添加绝对值属性by(duration: number, props: __private.cocos_tween_tween_ConstructorType<T>, opts?: ITweenOption): Tween<T>;
}

这样可以更灵活的控制或修改目标的属性， 主要定义如下：

// 缓动方式
export type TweenEasing =
'linear'    | 'smooth'     | 'fade'         | 'constant'     |
'quadIn'    | 'quadOut'    | 'quadInOut'    | 'quadOutIn'    |
'cubicIn'   | 'cubicOut'   | 'cubicInOut'   | 'cubicOutIn'   |
'quartIn'   | 'quartOut'   | 'quartInOut'   | 'quartOutIn'   | 
'quintIn'   | 'quintOut'   | 'quintInOut'   | 'quintOutIn'   |
'sineIn'    | 'sineOut'    | 'sineInOut'    | 'sineOutIn'    |
'expoIn'    | 'expoOut'    | 'expoInOut'    | 'expoOutIn'    |
'circIn'    | 'circOut'    | 'circInOut'    | 'circOutIn'    |
'elasticIn' | 'elasticOut' | 'elasticInOut' | 'elasticOutIn' |
'backIn'    | 'backOut'    | 'backInOut'    | 'backOutIn'    |
'bounceIn'  | 'bounceOut'  | 'bounceInOut'  | 'bounceOutIn';// 缓动选项
export interface ITweenOption {// 设置缓动方式easing?: TweenEasing | ((k: number) => number);// 插值函数，参数的意义 start:起始值，end:目标值，current:当前值，ratio:当前进度progress?: (start: number, end: number, current: number, ratio: number) => number;// 回调，当缓动动作启动时触发onStart?: (target?: object) => void;// 回调，当缓动动作更新时触发onUpdate?: (target?: object, ratio?: number) => void;// 回调，当缓动动作完成时触发onComplete?: (target?: object) => void;
}

官方提供的示例：

let duration: number = 1.0;
tween(this.node).to(duration, {position: new Vec3(0, 10, 0)}, {// 设置缓动函数easing: "backIn",onStart: (target?: object) => {console.log("缓动动作启动时触发");},onUpdate: (target: Vec3, ratio: number) => {console.log("当缓动动作更新时触发, 进度:", ratio);// 将缓动系统计算出的结果赋予 node 的位置this.node.position = target;                    },onComplete: (target?: object) => {console.log("当缓动动作完成时触发");},progress: (start, end, current, ratio): number => {// 返回自定义插值进度return 0.0;}}).start();

这里做下延伸，在CocosCreator 3.x以后，节点透明度的参数opacity修改为了组件: UIOpactiy

节点的基本属性仅包含： 位置、缩放和旋转。

如果想实现一个提示功能，在节点上移的过程中逐渐透明, UI如下：
请添加图片描述

代码如下：

let duration = 2;
let tweenObj = tween(this.tipNode).tag(1000).delay(duration).to(duration, {position: new Vec3(0, 300, 0)}, {easing: "smooth",onUpdate: (target, ratio) => {// 更新时触发的回调，使用进度修改透明度let uiOpacity = this.tipNode.getComponent(UIOpacity);uiOpacity.opacity = (1 - ratio) * 255;},}).removeSelf().start();
console.log("tweenObj:", tweenObj);

最后看下tween对象的构成：
请添加图片描述

主要组成部分：

  • _actions 用于创建一组对象的缓冲
  • _finalAction 最终使用的Action对象
  • _tag 标记
  • _target 目标

至此结束。

这篇关于CocosCreator 之 Tween缓动系统的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/429193。

相关文章

Linux中压缩、网络传输与系统监控工具的使用完整指南

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压：数据存储与传输的优化核心1. zip/unzip：通用压缩格式的便捷操作2.
阅读更多...
使用Python实现可恢复式多线程下载器

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传：从崩溃边缘抢救进度二、多线程加速：榨干网络带宽三、速度控制：做网络的好邻居四、终端交互
阅读更多...
Python中注释使用方法举例详解

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,：本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释？示例：三、单行注释语法：以 China编程# 开头，后面的内容为注释内容示例：示例：四
阅读更多...
Go语言数据库编程GORM 的基本使用详解

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁
阅读更多...
ModelMapper基本使用和常见场景示例详解

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置（如匹配策略、转换器）,可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例：简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹
阅读更多...
Spring 框架之Springfox使用详解

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是
阅读更多...
嵌入式数据库SQLite 3配置使用讲解

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置（1）、下载安装SQLite库（2）、解压下载的文件（3）、
阅读更多...
使用Python绘制3D堆叠条形图全解析

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现：从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景：3D 堆叠图
阅读更多...
Springboot如何正确使用AOP问题

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》：本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出
阅读更多...
Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

Navicat数据表的数据添加,删除及使用sql完成数据的添加过程

《Navicat数据表的数据添加,删除及使用sql完成数据的添加过程》：本文主要介绍Navicat数据表的数据添加,删除及使用sql完成数据的添加过程,具有很好的参考价值,希望对大家有所帮助,如有... 目录Navicat数据表数据添加,删除及使用sql完成数据添加选中操作的表则出现如下界面，查看左下角从左
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2