creator tween复杂用法

整理一下tween 复杂用法

tween 动画默认是顺序执行的，所以不用考虑顺序问题

1：并行动画（同时执行）

//角色移动动画roleMove(node) {return new Promise((res, rej) => {cc.tween(node).parallel(cc.tween().delay(0.8).call(() => { res()}),cc.tween().to(1, { position: cc.v2(0, 0) }).call(() => {node.removeFromParent();node.destroy();})).start()})},

在parallel 执行多个动画用逗号隔开，官方说明好像可以用结构数组的方法带入 ...arr 还是直接带入数组需要自己测试

2：重复执行

cc.tween(this.qipanNode).repeatForever(cc.tween().by(1.5, { position: cc.v2(0, 10) }, { easing: 'easeInOut' }).by(1.5, { position: cc.v2(0, -10) }, { easing: 'easeInOut' })).start()

3：同时修改多个属性（这个相对简单）

cc.tween(node).to(0.5,{opacity:255,scale:2}).call(()=>{}).start()

4：停止继续 tween（暂时写的简单的旋转暂停）

if (type) {cc.tween(this.iconSprite.node).repeatForever(cc.tween().by(3, { angle: -180 }).by(6, { angle: -360 })).start()} else {this.iconSprite.node.stopAllActions();}

5：使用 easing （弹动）

this.labelNode.setScale(0.2)this.labelNode.active = true;cc.tween(this.labelNode).to(0.5,{scale:1}, { easing: 'elasticOut'}).delay(0.8).start()

6：持续旋转

cc.tween(this.fzNode1).repeatForever(cc.tween().by(3, { angle: -180 }).by(6, { angle: -360 })).start()cc.tween(this.fzNode2).repeatForever(cc.tween().by(3, { angle: 180 }).by(6, { angle: 360 })).start()

7：翻转动画（foreach实现多个节点同时翻转）

 arr.forEach(node=>{
//翻转时禁止点击node.getComponent(cc.Button).interactable = false;let icon = node.getChildByName('icon');let back = node.getChildByName('back');back.active = true;icon.active = true;cc.tween(node).to(0.2,{scaleX:0.01}).call(()=>{/*这里我直接复制的代码 根据当前显示面来隐藏背面
*/if(this.skillsPageType == 1){back.opacity = 0;back.active = false;icon.opacity = 255;}if(this.skillsPageType == 2){icon.opacity = 0;icon.active = false;back.opacity = 255;}}).to(0.2,{scaleX:1}).call(()=>{//翻转结束 可以点击this.isSwitchIng = false;node.getComponent(cc.Button).interactable = true;}).start()})

8：简单盖章效果

 //this.spriteNode 需要盖下的节点//this.bgNode 整体this.spriteNode.opacity = 0;this.spriteNode.active = true;this.spriteNode.setScale(5);cc.tween(this.spriteNode).to(0.3, { scale: 1, opacity: 255 }, { easing: 'easeInOut' }).call(() => {cc.tween(this.bgNode).to(0.1, { scale: 0.95 }).to(0.1, { scale: 1 }, { easing: 'bounceInOut' }).start();}).start();

9：单个节点的倒计时（独立倒计时）

同节点内多个倒计时如果关闭一个会导致全部关闭所以利用tween来实现针对节点的独立倒计时

 landPlanting(node, item) {let text = node.getChildByName('text');text.active = true;node.matureCountDown = item.matureCountDown;text.getComponent(cc.Label).string = `${node.matureCountDown}`;if (item.matureCountDown > 0) {node.stopAllActions();cc.tween(node).repeatForever(cc.tween().delay(1).call(() => {if (node.matureCountDown <= 0) {this.harvestNode(node)}node.matureCountDown--;text.getComponent(cc.Label).string = `${node.matureCountDown}`;})).start()} else {this.harvestNode(node)}},

harvestNode中写的就是 stopAllActions 和初始化的方法

10：循环动作链

let arr: any = []for (let i= 0; index < 10; index++) {arr.push(cc.callFunc(()=> {console.log('测试')}));arr.push(cc.delayTime(moveTime / checkCount));
}cc.tween(node).sequence(arr).start()

将action存入数组用.sequence执行

以后碰到复杂动画补齐语法。

creator tween复杂用法相关推荐

Cocos Creator游戏开发教程学习笔记
学完提问几个问题吧: position的锚点位置数值原点在哪里? 因为position是相对坐标,所以原点是父节点的锚点 .所以Canvas下面的直属节点原点就是世界坐标系的原点Canvas的锚点. ...
dotween上下摆动_DoTween用法教程
DoTween用法攻略本文提供全流程,中文翻译. Chinar坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar-- 心分享.心创新 ...
qdebug重定向_每个Qter都该知道的qDebug
在项目的开发中,当我们调试程序时,最常用的就是打印信息了,Qt为我们提供了非常方便的打印信息类QDebug. 大家应该已经很熟练的使用QDebug了,但也许有些地方并没有注意到,下面小豆君就介绍一下Q ...
Cocos Creator里cc.tween的stopAllActions() 和 repeatForever的用法
this.useNowBtn.stopAllActions(); this.useNowBtn.setPosition(46 + t * 120, 360); cc.tween(this.useNow ...
Qt Creator用法详解
Qt自带集成开发环境(IDE),名为Qt Creator.它可以在Linux.OS X和Windows上运行,并提供智能代码完成.语法高亮.集成帮助系统.调试器和剖析器集成,还集成了所有主要的版本控制 ...
小白练习cocos creator——property用法记录
property用法记录参考文档:官方文档-属性检查器在记录property用法之前,先说下从官方文档中摘抄的笔记:用property修饰的属性是组件脚本中声明的公开的并可被序列化存储在场景和动画 ...
creator shader, 河面水流的效果噪声图的花式用法
河面水流的效果又名,噪声图的花式用法抄自哪里的呢?网上看别的人游戏有一个,就搞了搞试试,还凑合开始吧,弄个干净的shader,然后布个游戏场景主场景图这张图是反转y轴,放在下方做水面用的场 ...
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.0新的用法
一个纯洁无瑕的萌新学的时候随便记的,不理解.不准确.不用看.不一定更新 . . . 属性声明所有想在引擎里看到并挂载的属性在声明的前面都要加@property装饰.不想手动挂载的不用装饰,但是所有的 ...

creator tween复杂用法

creator tween复杂用法相关推荐

最新文章

热门文章