技术标签: cocos2d cocosCreator
版本: 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
主要应用于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对象的构成:
主要组成部分:
至此结束。
文章浏览阅读3.4k次,点赞8次,收藏42次。一、什么是内部类?or 内部类的概念内部类是定义在另一个类中的类;下面类TestB是类TestA的内部类。即内部类对象引用了实例化该内部对象的外围类对象。public class TestA{ class TestB {}}二、 为什么需要内部类?or 内部类有什么作用?1、 内部类方法可以访问该类定义所在的作用域中的数据,包括私有数据。2、内部类可以对同一个包中的其他类隐藏起来。3、 当想要定义一个回调函数且不想编写大量代码时,使用匿名内部类比较便捷。三、 内部类的分类成员内部_成员内部类和局部内部类的区别
文章浏览阅读118次。分布式系统要求拆分分布式思想的实质搭配要求分布式系统要求按照某些特定的规则将项目进行拆分。如果将一个项目的所有模板功能都写到一起,当某个模块出现问题时将直接导致整个服务器出现问题。拆分按照业务拆分为不同的服务器,有效的降低系统架构的耦合性在业务拆分的基础上可按照代码层级进行拆分(view、controller、service、pojo)分布式思想的实质分布式思想的实质是为了系统的..._分布式系统运维工具
文章浏览阅读174次。1.数据源准备2.数据处理step1:数据表处理应用函数:①VLOOKUP函数; ② CONCATENATE函数终表:step2:数据透视表统计分析(1) 透视表汇总不同渠道用户数, 金额(2)透视表汇总不同日期购买用户数,金额(3)透视表汇总不同用户购买订单数,金额step3:讲第二步结果可视化, 比如, 柱形图(1)不同渠道用户数, 金额(2)不同日期..._exce l趋势分析数据量
文章浏览阅读3.3k次。堡垒机可以为企业实现服务器、网络设备、数据库、安全设备等的集中管控和安全可靠运行,帮助IT运维人员提高工作效率。通俗来说,就是用来控制哪些人可以登录哪些资产(事先防范和事中控制),以及录像记录登录资产后做了什么事情(事后溯源)。由于堡垒机内部保存着企业所有的设备资产和权限关系,是企业内部信息安全的重要一环。但目前出现的以下问题产生了很大安全隐患:密码设置过于简单,容易被暴力破解;为方便记忆,设置统一的密码,一旦单点被破,极易引发全面危机。在单一的静态密码验证机制下,登录密码是堡垒机安全的唯一_horizon宁盾双因素配置
文章浏览阅读7.7k次,点赞4次,收藏16次。Chrome作为一款挺不错的浏览器,其有着诸多的优良特性,并且支持跨平台。其支持(Windows、Linux、Mac OS X、BSD、Android),在绝大多数情况下,其的安装都很简单,但有时会由于网络原因,无法安装,所以在这里总结下Chrome的安装。Windows下的安装:在线安装:离线安装:Linux下的安装:在线安装:离线安装:..._chrome linux debian离线安装依赖
文章浏览阅读153次。中国发达城市榜单每天都在刷新,但无非是北上广轮流坐庄。北京拥有最顶尖的文化资源,上海是“摩登”的国际化大都市,广州是活力四射的千年商都。GDP和发展潜力是衡量城市的数字指...
文章浏览阅读3.3k次。前言spark在java使用比较少,多是scala的用法,我这里介绍一下我在项目中使用的代码配置详细算法的使用请点击我主页列表查看版本jar版本说明spark3.0.1scala2.12这个版本注意和spark版本对应,只是为了引jar包springboot版本2.3.2.RELEASEmaven<!-- spark --> <dependency> <gro_使用java调用spark注册进去的程序
文章浏览阅读4.8k次。汽车零部件开发工具巨头V公司全套bootloader中UDS协议栈源代码,自己完成底层外设驱动开发后,集成即可使用,代码精简高效,大厂出品有量产保证。:139800617636213023darcy169_uds协议栈 源代码
文章浏览阅读4.6k次,点赞20次,收藏148次。AUTOSAR基础篇之OS(下)前言首先,请问大家几个小小的问题,你清楚:你知道多核OS在什么场景下使用吗?多核系统OS又是如何协同启动或者关闭的呢?AUTOSAR OS存在哪些功能安全等方面的要求呢?多核OS之间的启动关闭与单核相比又存在哪些异同呢?。。。。。。今天,我们来一起探索并回答这些问题。为了便于大家理解,以下是本文的主题大纲:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JCXrdI0k-1636287756923)(https://gite_autosar 定义了 5 种多核支持类型
文章浏览阅读2.2k次,点赞6次,收藏14次。原因:自己写的头文件没有被加入到方案的包含目录中去,无法被检索到,也就无法打开。将自己写的头文件都放入header files。然后在VS界面上,右键方案名,点击属性。将自己头文件夹的目录添加进去。_vs2013打不开自己定义的头文件
文章浏览阅读3.3w次,点赞80次,收藏342次。此时,可以将系统中所有用户的 Session 数据全部保存到 Redis 中,用户在提交新的请求后,系统先从Redis 中查找相应的Session 数据,如果存在,则再进行相关操作,否则跳转到登录页面。此时,可以将系统中所有用户的 Session 数据全部保存到 Redis 中,用户在提交新的请求后,系统先从Redis 中查找相应的Session 数据,如果存在,则再进行相关操作,否则跳转到登录页面。当数据量很大时,count 的数量的指定可能会不起作用,Redis 会自动调整每次的遍历数目。_redis命令
文章浏览阅读449次,点赞3次,收藏3次。URP的设计目标是在保持高性能的同时,提供更多的渲染功能和自定义选项。与普通项目相比,会多出Presets文件夹,里面包含着一些设置,包括本色,声音,法线,贴图等设置。全局只有主光源和附加光源,主光源只支持平行光,附加光源数量有限制,主光源和附加光源在一次Pass中可以一起着色。URP:全局只有主光源和附加光源,主光源只支持平行光,附加光源数量有限制,一次Pass可以计算多个光源。可编程渲染管线:渲染策略是可以供程序员定制的,可以定制的有:光照计算和光源,深度测试,摄像机光照烘焙,后期处理策略等等。_urp渲染管线