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()//走一个

// 所有的缓动类型:
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;// 渐褪效果函数。
}

效果图: https://easings.net

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 参考cocos学习笔记 cc.tween[https://blog.csdn.net/liulei21/artic...
    合肥黑阅读 8,638评论 0 2
  • https://easings.net/cn[https://easings.net/cn]
    ChooAcc阅读 245评论 0 0
  • 缓动函数 是用来表述 位置与时间发生变化的函数先实现一个简单的函数,用来计算当前值 缓动函数列表 最后,来一张合集...
    传说中的水牛阅读 1,519评论 0 0
  • 将压缩包内的三个tween文件覆盖到项目中去 貌似有人需要替换引擎下的对应文件,在编译的时候会被引擎下的对应文件覆...
    Zszen阅读 2,744评论 1 50
  • Angular Animation简单来说 就是状态和状态之间的转场效果。每一种状态对应一种样式(style...
    tuacy阅读 2,492评论 0 2