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的缓动
类似资料：