runaction 旋转_使用cc.tween(缓动系统)代替runAction
在高版本中的Cocos中使用runAction时,会警告cc.Action is deprecated now, please use cc.TweenAction instead。这是开发者建议使用新的缓动系统来代替原本的Action。可以选择替换,但不替换实际上也不会对项目造成什么影响,Action系统估计在很长的时间内不会移除。
ca57ab27dc1ec59d71010263ed33021d.png
如果你选择替换可以根据下面的提示对照尝试替换
//按顺序执行动作
node.runAction(
cc.sequence(
actions...
)
);
cc.tween(node)
.to()
.to()
.start();
//同时执行动作
node.runAction(
cc.spawn(
actions...
)
);
cc.tween(node)
.to(time, { 属性: 值, 属性: 值 })
.start();
cc.tween(node)
.parallel(
t().to(time, { 属性: 值 }),
t().to(time, { 属性: 值 })
)
.start();
//回调
node.runAction(
cc.sequence(
action,
cc.callFunc()
)
);
cc.tween(node)
.to(time, { 属性: 值, 属性: 值 })
.call()
.start();
//重复
node.runAction(
cc.repeat(
action, times
)
);
cc.tween(node)
.by(time, { 属性: 值, 属性: 值 })
.repeat(times)
.start()
//永远重复
node.runAction(
cc.repeatForever(
action, times
)
);
cc.tween(this.node)
.by(time, { 属性: 值, 属性: 值 })
.repeatForever()
.start()
以下内容摘自官方文档(如果你懒得点上面的跳转链接可以看这个)
缓动系统(cc.tween)介绍
Cocos Creator 在 v2.0.9 提供了一套新的 API —— cc.tween。cc.tween 能够对对象的任意属性进行缓动,功能类似于 cc.Action(动作系统)。但是 cc.tween 会比 cc.Action 更加简洁易用,因为 cc.tween 提供了链式创建的方法,可以对任何对象进行操作,并且可以对对象的任意属性进行缓动。
动作系统 是从 Cocos2d-x 迁移到 Cocos Creator 的,提供的 API 比较繁琐,只支持在节点属性上使用,并且如果要支持新的属性就需要再添加一个新的动作。为了提供更好的 API,cc.tween 在 动作系统 的基础上做了一层 API 封装。下面是 cc.Action 与 cc.tween 在使用上的对比:
cc.Action:this.node.runAction( cc.sequence( cc.spawn( cc.moveTo(1, 100, 100), cc.rotateTo(1, 360), ), cc.scale(1, 2) ) )
cc.tween:cc.tween(this.node) .to(1, { position: cc.v2(100, 100), rotation: 360 }) .to(1, { scale: 2 }) .start()
链式 API
cc.tween 的每一个 API 都会在内部生成一个 action,并将这个 action 添加到内部队列中,在 API 调用完后会再返回自身实例,这样就可以通过链式调用的方式来组织代码。
cc.tween 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列,所以 cc.tween 的链式结构是依次执行每一个 API 的,也就是会执行完一个 API 再执行下一个 API。
cc.tween(this.node)
// 0s 时,node 的 scale 还是 1
.to(1, { scale: 2 })
// 1s 时,执行完第一个 action,scale 为 2
.to(1, { scale: 3 })
// 2s 时,执行完第二个 action,scale 为 3
.start()
// 调用 start 开始执行 cc.tween
设置缓动属性
cc.tween 提供了两个设置属性的 API:
to:对属性进行绝对值计算,最终的运行结果即是设置的属性值
by:对属性进行相对值计算,最终的运行结果是设置的属性值加上开始运行时节点的属性值
cc.tween(node)
.to(1, {scale: 2}) // node.scale === 2
.by(1, {scale: 2}) // node.scale === 4 (2+2)
.by(1, {scale: 1}) // node.scale === 5
.to(1, {scale: 2}) // node.scale === 2
.start()
支持缓动任意对象的任意属性
let obj = { a: 0 }
cc.tween(obj)
.to(1, { a: 100 })
.start()
同时执行多个属性
cc.tween(this.node)
// 同时对 scale, position, rotation 三个属性缓动
.to(1, { scale: 2, position: cc.v2(100, 100), rotation: 90 })
.start()
easing
你可以使用 easing 来使缓动更生动,cc.tween 针对不同的情况提供了多种使用方式。
// 传入 easing 名字,直接使用内置 easing 函数
cc.tween().to(1, { scale: 2 }, { easing: 'sineOutIn'})
// 使用自定义 easing 函数
cc.tween().to(1, { scale: 2 }, { easing: t => t*t; })
// 只对单个属性使用 easing 函数
// value 必须与 easing 或者 progress 配合使用
cc.tween().to(1, { scale: 2, position: { value: cc.v3(100, 100, 100), easing: 'sineOutIn' } })
Easing 类型说明可参考 API 文档。
自定义 progress
相对于 easing,自定义 progress 函数可以更自由的控制缓动的过程。
// 对所有属性自定义 progress
cc.tween().to(1, { scale: 2, rotation: 90 }, {
progress: (start, end, current, ratio) => {
return start + (end - start) * ratio;
}
})
// 对单个属性自定义 progress
cc.tween().to(1, {
scale: 2,
position: {
value: cc.v3(),
progress: (start, end, current, t) => {
// 注意,传入的属性为 cc.Vec3,所以需要使用 Vec3.lerp 进行插值计算
return start.lerp(end, t, current);
}
}
})
复制缓动
clone 函数会克隆一个当前的缓动,并接受一个 target 作为参数。
// 先创建一个缓动作为模板
let tween = cc.tween().to(4, { scale: 2 })
// 复制 tween,并使用节点 Canvas/cocos 作为 target
tween.clone(cc.find('Canvas/cocos')).start()
// 复制 tween,并使用节点 Canvas/cocos2 作为 target
tween.clone(cc.find('Canvas/cocos2')).start()
插入其他的缓动到队列中
你可以事先创建一些固定的缓动,然后通过组合这些缓动形成新的缓动来减少代码的编写。
let scale = cc.tween().to(1, { scale: 2 })
let rotate = cc.tween().to(1, { rotation: 90})
let move = cc.tween().to(1, { position: cc.v3(100, 100, 100)})
// 先缩放再旋转
cc.tween(this.node).then(scale).then(rotate)
// 先缩放再移动
cc.tween(this.node).then(scale).then(move)
并行执行缓动
cc.tween 在链式执行时是按照 sequence 的方式来执行的,但是在编写复杂缓动的时候可能会需要同时并行执行多个队列,cc.tween 提供了 parallel 接口来满足这个需求。
let t = cc.tween;
t(this.node)
// 同时执行两个 cc.tween
.parallel(
t().to(1, { scale: 2 }),
t().to(2, { position: cc.v2(100, 100) })
)
.call(() => {
console.log('All tweens finished.')
})
.start()
回调
cc.tween(this.node)
.to(2, { rotation: 90})
.to(1, { scale: 2})
// 当前面的动作都执行完毕后才会调用这个回调函数
.call(() => { cc.log('This is a callback') })
.start()
重复执行
repeat/repeatForever 函数会将前一个 action 作为作用对象。但是如果有参数提供了其他的 action 或者 tween,则 repeat/repeatForever 函数会将传入的 action 或者 tween 作为作用对象。
cc.tween(this.node)
.by(1, { scale: 1 })
// 对前一个 by 重复执行 10次
.repeat(10)
// 最后 node.scale === 11
.start()
// 也可以这样用
cc.tween(this.node)
.repeat(10,
cc.tween().by(1, { scale: 1 })
)
.start()
// 一直重复执行下去
cc.tween(this.node)
.by(1, { scale: 1 })
.repeatForever()
.start()
延迟执行
cc.tween(this.node)
// 延迟 1s
.delay(1)
.to(1, { scale: 2 })
// 再延迟 1s
.delay(1)
.to(1, { scale: 3 })
.start()
————————————————
版权声明:本文为CSDN博主「天天小宇」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_35969684/article/details/113023116
参考:https://www.jianshu.com/p/abfac4aab600
runaction 旋转_使用cc.tween(缓动系统)代替runAction相关推荐
- Cocos状态机与缓动系统
import { _decorator, Component, Node ,Animation,EventTouch} from 'cc'; const { ccclass, property } = ...
- cocos creator 3.x使用tween缓动接口和贝塞尔曲线实现简易抛物线
抛物线还是比较常用的,人物跳跃,投掷物等等,2dx和3.x接口很多都不兼容了,本文使用3.x中的缓动函数配合onUpdate钩子,计算并设置贝塞尔曲线中的坐标实现简易的抛物线运动. 代码: nodeM ...
- CocosCreator之缓动函数类 Easing
官方文档:使用缓动系统 · Cocos Creator 效果图地址:https://easings.net/ /** !#enThis class provide easing methods for ...
- Egret_Tween缓动动画
通常情况下,游戏中或多或少都会带有一些缓动动画.例如界面弹出,或者道具飞入飞出的特效等等.在制作这些缓动动画的时候我们仅仅 希望简单的办法实现这种移动或者变形缩放的效果.Egret中的 Tween 缓 ...
- android自定义插值器_自定义缓动插值器,可在Android中实现有意义的动作
android自定义插值器 Interpolators are very useful to model movement for your UI elements. In this article, ...
- JavaScript Tween算法及缓动效果
Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. 我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. ...
- Unity移动和旋转缓动实现
为了构建更逼真的移动和旋转效果,缓动实现就很有必要了. 1,移动缓动: transform.position = Vector3.Lerp(tarnsform.position,targetPosit ...
- 软件项目技术点(1)——Tween算法及缓动效果
AxeSlide软件项目梳理 canvas绘图系列知识点整理 Tween算法及缓动效果 软件里在切换步序时需要有过渡动画效果,从当前位置的画面缓动到目标位置的画面.动画效果可重新查看文章系列第一篇 ...
- react 组件连动效果_记一个缓动水柱React动画组件的初次尝试
写完意识到这是第一篇,算是前言吧... 以后在zhihu写点东西...就当是博客好了,个人观点和体会而已,不求高大上,但求回头看的时候能够让以后的自己瞧不起. 背景:写React也一年多了,从一开始的 ...
- css3-定时缓动效果与块旋转
先来了解一下两个css3的属性(当前学习到并理解的属性) 1.transform(变换) 语法: transform : none | <transform-function> [ < ...
最新文章
- spark 资源参数调优
- Oracle 共享磁盘阵列 双机热备 实战 配置教程 配置手册
- 四元数相关总结-未完
- mysqlnavicat数据库备份与恢复_Navicat如何还原MySQL数据库
- php 导出txt 缩进,indent - 缩进文本
- dedecms--在后台增加会员添加
- 你真的会玩SQL吗?你所不知道的 数据聚合
- 关于2012(世界末日)
- 打造一流软文营销推广平台,看看媒体批发网是如何做的
- 苹果怎么把某个app隐藏_苹果app超级签名是什么?超级签名设备用不完怎么办?...
- 带密码的php文件管理器,PHP文件管理器Tiny File Manager账号密码修改方法
- 文件大小单位Bytes, KB, MB, GB, TB, PB等及换算关系,英语怎么说?
- 响应式网页设计教程:展示响应式设计的基本原理
- springMVC教程初级(四)Controller篇(结果、参数 )
- 对对碰java_Java开发学习之用Java打造一款对对碰游戏(下篇)
- day48 - 49
- 精易编程助手 V2.35 正式版
- 统计学原理--总论(统计学的对象和方法)基本概念通俗理解
- ARAIM高级接收机自主完好性监测算法
- 除磷工艺的7大关键参数
热门文章
- Excel xlsx file; not supported
- Matting之Towards Enhancing Fine-grained Details for Image Matting
- Viddy VS SocialCam 谁是视频中的Instagram
- Mybatis Generator配置文件
- AS400 资料大放送
- 使用grafana为zabbix绘制拓扑
- GIS空间分析(二)—— 空间分析的历史与发展
- 记录一次 AGP 调研过程中的思考,我从一个事故搞出了一个故事!
- blackscholes matlab,基于MATLAB的Black-Scholes-Merton欧式期权定价模型的计算研究
- python_sklearn机器学习算法系列之LogisticRegression(逻辑回归)----识别垃圾邮件(短信)