|
官方文档：使用缓动系统 · 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
|