CocosCreator之Tween缓动动画

官方文档：使用缓动系统 · Cocos Creator

可能遇到的问题：

1.按钮相关的bug->按钮设置了缩放效果后，会与动作的scale的效果冲突，此时需要先禁用按钮，动画完成后再启用按钮。

2.重复次数填1，则1次都不循环，填2则循环1次，请避开此坑。

3.repeat操作是对上个操作循环，而不是对前面所有的操作repeat，如果操作多请用cc.sequence包裹住这些操作后，再使用循环。

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

// 后面直接修改_speed的值就OK（_speed默认为1值越大速度越快）
// 问题已解决，个人理解大佬勿喷

整理不易，关注收藏不迷路。

目录：CocosCreator经典笔记_神兽白泽-CSDN博客

笔者qq、微信：1302109196

qq群：415468592