cocos 缓动系统
攻击效果
public attack(victime:BattelHead){
let targetPos = victime.getNode().getPosition();
let killerPos = this.getNode().getPosition();
// //目标在左边
if( victime.getLocation()=="left" ){
let ofst = victime.getUITransform().width
targetPos = new Vec3( targetPos.x + ofst,targetPos.y,targetPos.z );
}else{
let ofst = victime.getUITransform().width
targetPos = new Vec3( targetPos.x - ofst,targetPos.y,targetPos.z );
}
tween(this.node)
.to(0.15,{scale:new Vec3(1.4,1.4, 0)})
.to(0.2, {position: targetPos }, {easing: 'bounceInOut'})
.call(()=>{
victime.accpeetAttack();
})
.to(0.15,{scale:new Vec3(1,1, 0)})
.to(0.2, {position:killerPos}, {easing: 'bounceInOut'})
.start();
}
tween的基本操作:
let tween = cc.tween;
// 链式结构
tween(this.node)
.to(1, { position: cc.v2(100, 100), rotation: 360 })//到
.by(1, { scale: 2 })//加
.to(1, { scale: 2, position: { value: cc.v3(100, 100, 100), easing: 'sineOutIn' } })//easing
.to(1, { scale2 }, { onUpdate: () => { /* 每帧调用*/}})
.delay(1)//延迟
.call(()=>{})//回调
.parallel(//同时执行
tween().to(1, { scale: 2 }),
tween().to(2, { position: cc.v2(100, 100) })
)
.repeatForever()//无限循环上个操作
.repeat(10)//循环上个操作9次===========注意:填1则1次都不走,填2走1次,3走2次
.repeat(10,//循环上个操作9次指定tween===========注意:同上
cc.tween().by(1, { scale: 1 })
)
.start()//走一个
//灵活的嵌套使用//
let dt = cc.tween().delay(1)
let scale = cc.tween().to(1, { scale: 2 })
let rotate = cc.tween().to(1, { rotation: 90})
let call = cc.tween().call(()=>{})
let parallel = cc.tween().parallel(scale, rotate)
cc.tween(this.node).then(scale).then(rotate)//插入执行
scale.clone(this.node2).start();//克隆缓动scale到节点this.node2
cc.tween(this.node).then(rotate).repeatForever().start();//无限重复缓动rotate
cc.tween(this.node).then(rotate).repeat(4).start();//重复3次缓动rotate
cc.sequence([缓动])
透明度缓动的几种方式:
let opacity1 = tween().to(0.15, { opacity: 0 })// 透明度缓动
let opacity2 = cc.tween().to(0.4, { opacity: 1 }, { easing: 'elasticOut' });
let opacity3 = cc.tween().to(0.2, { opacity: { value: 1, easing: 'elasticOut' } })
缓动相关:
backIn,// 回震
backOut,
backInOut,
backOutIn,
sineIn,// 加减速
sineOut,
sineInOut,
sineOutIn,
fade,// 渐隐
效果图地址:https://easings.net/
// 所有的缓动类型:
export class Easing {
quadIn(t: number): number;// 平方曲线缓入函数。运动由慢到快。
quadOut(t: number): number;// 平方曲线缓出函数。运动由快到慢
quadInOut(t: number): number;// 平方曲线缓入缓出函数。运动由慢到快再到慢
cubicIn(t: number): number;// 立方曲线缓入函数。运动由慢到快。
cubicOut(t: number): number;// 立方曲线缓出函数。运动由快到慢。
cubicInOut(t: number): number;// 立方曲线缓入缓出函数。运动由慢到快再到慢。
quartIn(t: number): number;// 四次方曲线缓入函数。运动由慢到快。
quartOut(t: number): number;// 四次方曲线缓出函数。运动由快到慢。
quartInOut(t: number): number;// 四次方曲线缓入缓出函数。运动由慢到快再到慢。
quintIn(t: number): number;// 五次方曲线缓入函数。运动由慢到快。
quintOut(t: number): number;//五次方曲线缓出函数。运动由快到慢.
quintInOut(t: number): number;// 五次方曲线缓入缓出函数。运动由慢到快再到慢。
sineIn(t: number): number;// 正弦曲线缓入函数。运动由慢到快。
sineOut(t: number): number;// 正弦曲线缓出函数。运动由快到慢。
sineInOut(t: number): number;// 正弦曲线缓入缓出函数。运动由慢到快再到慢。
expoIn(t: number): number;// 指数曲线缓入函数。运动由慢到快。
expoOut(t: number): number;// 指数曲线缓出函数。运动由快到慢。
expoInOut(t: number): number;// 指数曲线缓入和缓出函数。运动由慢到很快再到慢。
circIn(t: number): number;// 循环公式缓入函数。运动由慢到快。
circOut(t: number): number;// 循环公式缓出函数。运动由快到慢。
circInOut(t: number): number;// 指数曲线缓入缓出函数。运动由慢到很快再到慢。
elasticIn(t: number): number;// 弹簧回震效果的缓入函数。
elasticOut(t: number): number;// 弹簧回震效果的缓出函数。
elasticInOut(t: number): number;// 弹簧回震效果的缓入缓出函数。
backIn(t: number): number;// 回退效果的缓入函数。
backOut(t: number): number;// 回退效果的缓出函数。
backInOut(t: number): number;// 回退效果的缓入缓出函数。
bounceIn(t: number): number;// 弹跳效果的缓入函数。
bounceOut(t: number): number;// 弹跳效果的缓出函数。
bounceInOut(t: number): number;// 弹跳效果的缓入缓出函数。
smooth(t: number): number;// 平滑效果函数。
fade(t: number): number;// 渐褪效果函数。
}
下面是抄来的,使用tween进行加减速的操作
// 项目遇到了项目需要动态修改Tween的速度,再查阅的一番资料找到了解决方案,特别感谢GT大佬
// https://forum.cocos.org/t/topic/115920
// tween.start() 之后会出现一个 _finalAction 成员。
//修改 _finalAction._speedMethod = true 。之后可以通过 _finalAction._speed 修改速度。
// 例
this.nodeTween = tw(this.node)
.sequence(
tw().to(0.5, { position: cc.v3(10,10) }),
tw().to(0.5, { position: cc.v3(20,20) }),
)
.repeatForever()
.start()
this.nodeTween._finalAction._speedMethod = true
this.nodeTween._finalAction._speed = 0.3
Rust编程语言群 1036955113
java新手自学群 626070845
java/springboot/hadoop/JVM 群 4915800
Hadoop/mongodb(搭建/开发/运维)Q群481975850
GOLang Q1群:6848027
GOLang Q2群:450509103
GOLang Q3群:436173132
GOLang Q4群:141984758
GOLang Q5群:215535604
C/C++/QT群 1414577
单片机嵌入式/电子电路入门群群 306312845
MUD/LIB/交流群 391486684
Electron/koa/Nodejs/express 214737701
大前端群vue/js/ts 165150391
操作系统研发群:15375777
汇编/辅助/破解新手群:755783453
大数据 elasticsearch 群 481975850
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
java新手自学群 626070845
java/springboot/hadoop/JVM 群 4915800
Hadoop/mongodb(搭建/开发/运维)Q群481975850
GOLang Q1群:6848027
GOLang Q2群:450509103
GOLang Q3群:436173132
GOLang Q4群:141984758
GOLang Q5群:215535604
C/C++/QT群 1414577
单片机嵌入式/电子电路入门群群 306312845
MUD/LIB/交流群 391486684
Electron/koa/Nodejs/express 214737701
大前端群vue/js/ts 165150391
操作系统研发群:15375777
汇编/辅助/破解新手群:755783453
大数据 elasticsearch 群 481975850
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。