缓动接口

Tween 属性和接口说明

接口说明

接口	功能说明
tag	为当前缓动添加一个数值类型（number）的标签
to	添加一个对属性进行绝对值计算的间隔动作
by	添加一个对属性进行相对值计算的间隔动作
set	添加一个直接设置目标属性的瞬时动作
delay	添加一个延迟时间的瞬时动作
call	添加一个调用回调的瞬时动作
target	添加一个直接设置缓动目标的瞬时动作
union	将上下文的缓动动作打包成一个
then	插入一个 Tween 到缓动队列中
repeat	执行几次（此前为重复几次，请及时适配）
repeatForever	一直重复执行
sequence	添加一个顺序执行的缓动
parallel	添加一个同时进行的缓动
start	启动缓动
stop	停止缓动
clone	克隆缓动
show	启用节点链上的渲染，缓动目标需要为 Node
hide	禁用节点链上的渲染，缓动目标需要为 Node
removeSelf	将节点移出场景树，缓动目标需要为 Node

静态接口说明

这些方法为 Tween 的静态方法，调用方式示例：

Tween.stopAll()
Tween.stopAllByTag(0);
Tween.stopAllByTarget(this.node);

接口	功能说明
stopAll	停止所有缓动该接口会移除底层所有已注册的缓动动画注意：该方法会影响所有对象
stopAllByTag	停止所有指定标签的缓动该接口将移除通过 tag 方法指定的所有缓动可通过指定第二个参数 target?: object 来指定是否仅移除该对象上带有某个标签的缓动
stopAllByTarget	停止所有指定对象的缓动

工具函数说明

接口

功能说明

tween

这是一个工具函数，帮助实例化 Tween 类

注意：该方法并非 Tween 类的成员，开发者也可自行调用 new Tween<T>(target:T) 的方式实例化缓动。

示例

这里以一个的 to 缓动动画作为示例演示缓动的用法：

lettweenDuration : number = 1.0;                                   // 缓动的时长tween(this.node.position).to( tweenDuration, new Vec3(0, 10, 0),    // 这里以node的位置信息坐标缓动的目标 {                                                               // ITweenOption 的接口实现：onUpdate : (target:Vec3, ratio:number)=>{                       // onUpdate 接受当前缓动的进度this.node.position = target;                                // 将缓动系统计算出的结果赋予 node 的位置}
}).start();                                                         // 调用 start 方法，开启缓动

一些限制

为了降低更新 Node Transform 信息的频率，Node 内部维护了一个 dirty 状态，只有在调用了可能会改变 Node Transform 信息的接口，才会将 dirty 置为需要更新的状态。

但目前的接口存在一定的限制，例如：通过 this.node.position 获取到的 position 是一个通用的 Vec3。

当执行 this.node.position.x = 1 这段代码的时候，只执行了 position 的 getter，并没有执行 position 的 setter。由于 dirty 并没有更新，便会导致渲染时使用的节点的 Transform 信息没有更新。

目前，我们也不支持这样的调用，而是鼓励使用 setPosition 或 position 的 setter，如下所示：

let _pos = new Vec3(0, 1, 0);
this.node.position = _pos;      // 这里将通过 position 的 setterthis.node.setPosition(_pos);    // 这里将通过接口 setPosition

cocos tween相关推荐

Cocos Creator游戏开发教程学习笔记
学完提问几个问题吧: position的锚点位置数值原点在哪里? 因为position是相对坐标,所以原点是父节点的锚点 .所以Canvas下面的直属节点原点就是世界坐标系的原点Canvas的锚点. ...
cocos create tween
tween 动画总结: 官方文档 :缓动接口 · Cocos Creator 接口功能说明 tag 为当前缓动添加一个数值类型(number)的标签 to 添加一个对属性进行绝对值计算的间隔 ...
Cocos Creator里cc.tween的stopAllActions() 和 repeatForever的用法
this.useNowBtn.stopAllActions(); this.useNowBtn.setPosition(46 + t * 120, 360); cc.tween(this.useNow ...
cocos creator尝试使用tween的几种新实现方案
尝试使用tween的几种新实现方案旧方式 tween(this.testNode1).then(tween(this.testNode1).to(1, {position: v3(500, 0, 0 ...
cocos creator 3.x使用tween缓动接口和贝塞尔曲线实现简易抛物线
抛物线还是比较常用的,人物跳跃,投掷物等等,2dx和3.x接口很多都不兼容了,本文使用3.x中的缓动函数配合onUpdate钩子,计算并设置贝塞尔曲线中的坐标实现简易的抛物线运动. 代码: nodeM ...
[Cocos Creator 3.5]cc.Tween中easing包含哪些
api链接:类型别名: TweenEasing 类型:string public TweenEasing : "linear" | "smooth" | &qu ...
Cocos creator -引擎解构
Cocos creator -引擎结构在长期的开发中,发现cc对大型的手游加载项目的速度很慢,于是我产生了一种想法,想把 cocos creator移植在Linux上做开发,编译时在Windows. ...
022 - cocos creator 3D
#cocos creator 3D warning 报错:"project:///assets/main.js,将https中的export注视掉重试一遍知识点 scrollview组件添 ...
小游戏开发--Cocos引擎
canvas 设计尺寸:720*1280 Cocos Creator 屏幕适配: 通常竖屏手机游戏采用Fit Width,横屏手机采用Fit Height,PC端全屏采用Show All. Warni ...

cocos tween