Phaser3之Tweens

NumberTweenBuilderConfig
Phaser.Tweens.Tween

Phaser.Math.DegToRad(deg) // 将给定的角度从度数转换为以弧度为单位的等效角度。
var tween = this.tweens.add(...); // 添加动画
tween.stop(); // 停止动画
tween.resume(); // 恢复之前暂停的 Tween 的播放。
tween.play(); // 开始 Tween 播放。在创建时暂停，可以用此方法。如果 Tween 已在播放，再次调用此方法将不起作用。如果想重新启动 Tween，请使用Tween.restart
tween.isPlaying(); // 检查 Tween 当前是否处于活动状态。
tween.pause(); // 暂停
tween.restart();// 从头开始重新启动动画。
tween.seek(0.04);// Tween过程中的某一点。介于 0 和 1 之间的值，它表示要通过 Tween 寻找多远。0.5 的值会在 Tween 的中途寻找，而 0 的值会寻找开始。
tween.updateTo(key, value [, startToCurrent]) // 更新所有匹配目标的给定属性的“结束”值。
    //key	 要为其设置新值的属性。
    //value  属性的新值。
    //startToCurrent	 此更改是否应将起始值设置为当前值？
    //tween.updateTo('x', 300, true);

tween.isPlaying(); // 检查 Tween 当前是否处于活动状态。 true/false
tween.progress // 进度:介于 0 和 1 之间的值。通过 Tween 的数量，不包括循环。

this.tweens.pauseAll(); // 暂停此 Tween Manager 中的所有 Tweens。
this.tweens.resumeAll(); // 恢复此 Tween Manager 中的所有 Tweens。

this.tweens.timeScale; // 管理器的时间尺度。缩放两帧之间的时间增量，从而影响此 Tween Manager 拥有的所有 Tween 的时间速度,(改变两帧之间的时间)


// stagger:创建一个由 Tween 属性使用的交错函数。stagger 函数将允许您在补间的所有目标之间交错更改属性值。仅当补间有多个目标时才值得使用。
this.tweens.stagger(500, {
  grid: [ 20, 8 ], // 通过提供一个数组来设置交错穿过网格，20是网格的宽度，8是高度。结合 'from' 属性来控制方向。
  from: 'center', // 开始交错的索引。可以是字符串first、last或center、或表示交错位置的整数。
  ease: 'Power0', // 易于应用于交错的值。可以是字符串，例如“sine.inout”，也可以是函数。
  start: 100 // 开始交错的值。可用作偏移交错的方法，同时仍使用值的范围。
})



// 以下将在补间的所有目标上错开 100 毫秒的延迟，导致它们在指定的持续时间内缩小到 0.2
this.tweens.add({
    targets: [ ... ],
    scale: 0.2,
    ease: 'linear',
    duration: 1000,
    // delay: this.tweens.stagger(100),
    delay: function (target, targetKey, value, targetIndex, totalTargets, tween) {
        return targetIndex * 100;
    }
});


// 时间构建器参数  TimelineBuilderConfig
config = { 
    targets:  [ target, image, ...group.getChildren() ],
    from: 0, // 起始编号
    to: 30,// 结束编号
    x: 100, // x轴   x:'+=600' // 在targets.x原有的基础上再加上600
    y: { value: 400, duration: 1500, ease: 'Bounce.easeOut', yoyo: -1 }
    width:20,// 宽
    height:20,// 高
    props: {
        x: { value: () => { return 10; }, ease: 'Power1' },
        y: {  duration: 400, yoyo: true, repeat: 8, ease: 'Sine.easeInOut',
            value: {
                getEnd: function (target, key, value) {   return 30;  },
                getStart: function (target, key, value) { return value + 30; }
            }
        },
        rotation: { value: 2.3, duration: 8000, ease: 'Cubic.easeInOut' },
        zoom:4,
        ...
    }
    // alpha：0.5, // 透明度
    alpha：{ // (透明度从0到1，开始值是0.3)
        from: 0, // 起始编号
        to: 1,// 结束编号
        start: 0.3, // 开始值
        to: 0.7  // 结束值
    },
    paused: true, // 如果true，时间轴将开始暂停
    repeat: -1, // 重复次数 -1 无限次
    loop: 2, // 重复次数,当loop为-1时,是无限次
    loopDelay: 2000, // 重复下一次前间隔的时间
    ease: 'Sine.easeIn', 
    easeParams:[3.5], // 缓动参数  ease = Back/Elastic
    duration: 5000,// 以毫秒为单位的补间持续时间。(当前动画栋开始到结束所需要的时间)
    scaleX: 1, // 缩放
    scaleY: { value: 4, duration: 2000, delay: function (target, key, value, targetIndex) { return 1000 + Math.random() * 2000 }, yoyo: true },
    flipX: true,// 完成后水平翻转 Tween 的目标
    flipY: true,// 完成后垂直翻转 Tween 的目标
    // angle: 270, // 旋转270度
    angle: {
        getEnd: function (target, key, value) {
            var a = Math.random() > 0.5?90:-90
            return 180 + a
        },
        getStart: function (target, key, value) {
            console.log(target.angle);
            return target.angle;
        }
    },
    repeatDelay: 1000, // 在重复补间之前暂停的毫秒数
    hold: 1000, // 上一个动画运行完后停留的时间毫秒
    yoyo: true, // 每个补间都应该完成，然后逐步反转值以恢复到起始补间值吗，即动画运行完，是否反向运行回去
    totalDuration: 2000, // 如果tweens中的子项没有设置duration,则子项会平分totalDuration的时间,如果子项有duration的话,则会被子项覆盖
    onComplete: (tween, targets, myImage) => {}, // 补间完成的回调
    onCompleteParams: [ image ], // onComplete的回调参数
    onStart: (tween, targets, myImage) => {}, // 补间开始时调用的函数。
    onStartParams: [ image ] //onStart的回调参数。
    onActive: (tween, targets, myImage) => {},// 当补间在补间管理器中处于活动状态时要调用的函数。
    onLoop: (tween, targets, myImage) => {}, // 每次补间循环时调用的函数。必须设置了  loop会调用这个
    onYoyo: (tween, targets, myImage) => {}, // 每次 tween yoyos 时调用的函数。每个目标每个属性调用一次。
    onRepeat:  (tween, targets, myImage) => {}, // 每次重复补间时调用的函数。每个目标每个属性调用一次。
    onUpdate:() =>{}
}




 // 创建一个数字 Tween 并将其添加到活动的 Tween 列表中。(不需要targets的时候可以使用addCounter)
var tweenCounter = this.tweens.addCounter({
  from: 0, // 起始
  to: 30,//结束
  duration: 200, // 以毫秒为单位的补间持续时间。
  yoyo: true, //即动画运行完，是否反向运行回去
  repeat: -1, // 重复次数 -1 无限次
  onUpdate: function (tween) {
    var t = tween.getValue();
    console.log(t)
  }
})
tweenCounter.getValue(); // 获取[0,30]之间的数

// 创建一个 Tween 时间线并将其添加到活动的 Tween 列表中。targets的运动路径正是tweens里面的路径
targets = this.add.image(100, 100, 'block');
// 写法1
this.tweens.timeline({
  targets: targets, // target
  loop: 2, // 重复次数,当loop为-1时,是无限次
  totalDuration: 2000, // 如果tweens中的子项没有设置duration,则子项会平分totalDuration的时间,如果子项有duration的话,则会被子项覆盖
  // duration: 2000, // 如果tweens里面设置了,则会覆盖此项
  // ease: 'Linear', // 如果tweens里面设置了,则会覆盖此项
  tweens: [ // 要创建并添加到新时间轴中的一组补间配置对象
  { x: 600, ease: 'Sine.easeOut', duration: 1000},
  { y: 500, ease: 'Sine.easeInOut', duration: 1000 }, // tweens的上一项移动到这一项需要花费的时间
  { x: 100, ease: 'Power1', duration: 1000,offset: '-=500'  }, // offset: 在前一个tween结束前500毫秒开始
  { y: 100, ease: 'Sine.easeIn', duration: 500, offset: 800}// 800ms之后开始运动(可能会出现,上一个tween已经运行完了,这个还没开始,等这个开始的时候,targets已经结束了运动)
  ]
});

// 写法2
var timeline = this.tweens.createTimeline();
timeline.add({ targets: targets,x: 600, ease: 'Sine.easeOut', duration: 1000, offset: 800})
timeline.add({ targets: targets,y: 500, ease: 'Sine.easeInOut', duration: 1000 })
timeline.add({ targets: targets,x: 100, ease: 'Power1', duration: 1000,offset: '-=500'  })
timeline.add({ 
    targets: targets,y: 100, ease: 'Sine.easeIn', duration: 5000,
    scaleX: 1, // 缩放
    scaleY: 1,// 缩放
    angle: 270, // 旋转270度
    repeatDelay: 1000, // 在重复补间之前暂停的毫秒数
    hold: 1000, // 上一个动画运行完后停留的时间毫秒
    yoyo: true, // 每个补间都应该完成，然后逐步反转值以恢复到起始补间值吗，即动画运行完，是否反向运行回去
} )
timeline.play()

缓动算法

ease 
Power0: Linear,  线性匀速运动效果
Power1: Quadratic.Out, 二次型。出来
Power2: Cubic.Out, 立方。出来
Power3: Quartic.Out, 四次方。出来
Power4: Quintic.Out, 五次方。出来
Linear: Linear, 线性，
Quad: Quadratic.Out, 二次。出来
Cubic: Cubic.Out, 立方的。出来
Quart: Quartic.Out, 四次方。出来
Quint: Quintic.Out, 五次方。出来
Sine: Sine.Out, 正弦。出来
Expo: Expo.Out, 缓动。出来
Circ: Circular.Out, 圆形。出来
Elastic: Elastic.Out, 弹性的。出来
Back: Back.Out, 返回。出来
Bounce: Bounce.Out, 弹跳。出来
Stepped: Stepped, 阶梯式,，
'Quad.easeIn': Quadratic.In, 二次方的缓动（t^2）/ 从0开始加速的缓动，也就是先慢后快
'Cubic.easeIn': Cubic.In, 三次方的缓动（t^3）/ 从0开始加速的缓动，也就是先慢后快
'Quart.easeIn': Quartic.In,四次方的缓动（t^4）/ 从0开始加速的缓动，也就是先慢后快
'Quint.easeIn': Quintic.In, 五次方的缓动（t^5）/ 从0开始加速的缓动，也就是先慢后快
'Sine.easeIn': Sine.In, 正弦曲线的缓动（sin(t)）/ 从0开始加速的缓动，也就是先慢后快
'Expo.easeIn': Expo.In, 指数曲线的缓动（2^t）/ 从0开始加速的缓动，也就是先慢后快
'Circ.easeIn': Circular.In, 圆形曲线的缓动（sqrt(1-t^2)）/ 从0开始加速的缓动，也就是先慢后快
'Elastic.easeIn': Elastic.In,  指数衰减的正弦曲线缓动 / 从0开始加速的缓动，也就是先慢后快
'Back.easeIn': Back.In, 超过范围的三次方缓动（(s+1)*t^3 – s*t^2）/ 从0开始加速的缓动，也就是先慢后快
'Bounce.easeIn': Bounce.In, 指数衰减的反弹缓动 / 从0开始加速的缓动，也就是先慢后快
'Quad.easeOut': Quadratic.Out, 二次方的缓动（t^2）/ 减速到0的缓动，也就是先快后慢
'Cubic.easeOut': Cubic.Out, 三次方的缓动（t^3）/ 减速到0的缓动，也就是先快后慢
'Quart.easeOut': Quartic.Out, 四次方的缓动（t^4）/ 减速到0的缓动，也就是先快后慢
'Quint.easeOut': Quintic.Out, 五次方的缓动（t^5）/ 减速到0的缓动，也就是先快后慢
'Sine.easeOut': Sine.Out, 正弦曲线的缓动（sin(t)）/ 减速到0的缓动，也就是先快后慢
'Expo.easeOut': Expo.Out, 指数曲线的缓动（2^t）/ 减速到0的缓动，也就是先快后慢
'Circ.easeOut': Circular.Out, 圆形曲线的缓动（sqrt(1-t^2)）/ 减速到0的缓动，也就是先快后慢
'Elastic.easeOut': Elastic.Out, 指数衰减的正弦曲线缓动 / 减速到0的缓动，也就是先快后慢
'Back.easeOut': Back.Out, 超过范围的三次方缓动（(s+1)*t^3 – s*t^2）/ 减速到0的缓动，也就是先快后慢
'Bounce.easeOut': Bounce.Out, 指数衰减的反弹缓动 / 减速到0的缓动，也就是先快后慢
'Quad.easeInOut': Quadratic.InOut, 二次方的缓动（t^2）/ 前半段从0开始加速，后半段减速到0的缓动，
'Cubic.easeInOut': Cubic.InOut, 三次方的缓动（t^3）/ 前半段从0开始加速，后半段减速到0的缓动  ，
'Quart.easeInOut': Quartic.InOut, 四次方的缓动（t^4）/ 前半段从0开始加速，后半段减速到0的缓动 ，
'Quint.easeInOut': Quintic.InOut, 五次方的缓动（t^5）/ 前半段从0开始加速，后半段减速到0的缓动，
'Sine.easeInOut': Sine.InOut, 正弦曲线的缓动（sin(t)）/ 前半段从0开始加速，后半段减速到0的缓动  ，
'Expo.easeInOut': Expo.InOut, 指数曲线的缓动（2^t）/ 前半段从0开始加速，后半段减速到0的缓动，
'Circ.easeInOut': Circular.InOut, 圆形曲线的缓动（sqrt(1-t^2)）/ 前半段从0开始加速，后半段减速到0的缓动 ，
'Elastic.easeInOut': Elastic.InOut, 指数衰减的正弦曲线缓动 / 前半段从0开始加速，后半段减速到0的缓动 ，
'Back.easeInOut': Back.InOut, 超过范围的三次方缓动（(s+1)*t^3 – s*t^2）/ 前半段从0开始加速，后半段减速到0的缓动，
'Bounce.easeInOut': 指数衰减的反弹缓动 / 前半段从0开始加速，后半段减速到0的缓动