美文网首页
Tween缓动

Tween缓动

作者: Jey | 来源:发表于2022-03-08 11:05 被阅读0次
    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

    相关文章

      网友评论

          本文标题:Tween缓动

          本文链接:https://www.haomeiwen.com/subject/kwmfaltx.html