ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

cocos 缓动系统

2022-06-24 01:33:56  阅读:183  来源: 互联网

标签:缓出 cocos 函数 cc number tween 动系统 缓入


攻击效果


    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

标签:缓出,cocos,函数,cc,number,tween,动系统,缓入
来源: https://www.cnblogs.com/cfas/p/16407332.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有